Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    168
    Thanks
    78
    Thanked 1 Time in 1 Post

    Hover and click event

    Hi guys, have a slight problem. I have an image
    Code:
    <img class="header-icons" id="bowler" src="<?php echo responsive_child_uri( '/images/light_off.png' ); ?>" width="78" height="108" data-role="light" data-onimg="light_on.png" data-offimg="light_off.png">
    The image is basically a light. When hovered, the light should turn on, so it should do an image swap for the light_on.png image. When you move away, the light turns off again. This is simple enough. However, when the light is clicked, I want it to stay on until it is clicked off again. So the hover shouldnt work when the light has been clicked on, only when the light is off. I have the following code

    Code:
    jQuery(document).ready(function ($) {
        var clicked = false;
    
        $("[data-role='light']").click(function(){
            var onImage = $(this).data("onimg");
            var offImage = $(this).data("offimg");
            if(!clicked){
                $(this).attr("src", "/images/" + onImage);
                clicked = true;
            }
            else {
                $(this).attr("src", "/images/" + offImage);
                clicked = false;
            }
        });
    
        var onHoverOn = function() {
            var onImage = $(this).data("onimg");
            $(this).attr("src", "/images/" + onImage);
        }
    
        var onHoverOff = function() {
            var offImage = $(this).data("offimg");
            $(this).attr("src", "/images/" + offImage);
        }
    
        $("[data-role='light']").hover(onHoverOn, onHoverOff);
    });
    The hover is working fine, but when you click on a light, it wont stay on because its being affected by the hover event. How can I make these two events work alongside each other in the way that I have described?

    Many thanks

    Nick

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    var onHoverOn = function() {
        if (!clicked) {
            var onImage = $(this).data("onimg");
            $(this).attr("src", "/images/" + onImage);
        }
    }
    
    var onHoverOff = function() {
        if (!clicked) {
            var offImage = $(this).data("offimg");
            $(this).attr("src", "/images/" + offImage);
        }
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    nick2price (04-02-2014)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    168
    Thanks
    78
    Thanked 1 Time in 1 Post
    Thats fantastic, looking at the answer I think I should have figured that one out for myself.

    One more quick question. Say I have more than one light, and they all have data-role="light". The above would work for all of them, however, if one of the lights is turned on all other lights would become inactive. Is there any way to only make the clicked light inactive, without removal the data-role? I was thinking about maybe getting the id of the clicked light and then appending that to something, but I dont think this would be the best approach.

    Cheers

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If I understand you correctly, you should have the 'clicked' flag for each of the lights.

    Code:
    jQuery(document).ready(function ($) {
        
        $("[data-role='light']").click(function(){
            var $this = $(this),
            	onImage = $this.data("onimg"),
            	ffImage = $this.data("offimg"),
            	clicked = $this.data('clicked');
    
            if (!clicked){
                $this.attr("src", "/images/" + onImage).data('clicked', true);
            }
            else {
                $this.attr("src", "/images/" + offImage).data('clicked', false);
            }
        });
    
        var onHoverOn = function() {
        	var $this = $(this),
        		clicked = $this.data('clicked');
    
    	    if (!clicked) {
    	        var onImage = $this.data("onimg");
    	        $this.attr("src", "/images/" + onImage);
    	    }
    	}
    
    	var onHoverOff = function() {
    		var $this = $(this),
        		clicked = $this.data('clicked');
    
    	    if (!clicked) {
    	        var offImage = $this.data("offimg");
    	        $this.attr("src", "/images/" + offImage);
    	    }
    	}
    
        $("[data-role='light']").hover(onHoverOn, onHoverOff);
    });
    Last edited by glenngv; 04-02-2014 at 11:21 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    nick2price (04-03-2014)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    168
    Thanks
    78
    Thanked 1 Time in 1 Post
    Kool, I would presume that means adding the following to each of my lights?
    Code:
    data-clicked="false"
    The click doesnt seem to function properly when I do this, but something strange does happen. If I alert the clicked variable right after it has been assigned, the click does work properly. Not to sure why an alert would cause this to work, obviously I cant keep it there, just find it strange.

    Cheers

    Nick

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You don't have to add the data-click attribute but it shouldn't hurt either when added. If there is no such attribute, doing $this.data('clicked') will return undefined and it should still satisfy the if (!clicked) condition.

    I don't know why it doesn't work, can you post the code in jsfiddle?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •