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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Jquery: Hover on the onmouseover

    Hi,

    How can I rewrite/ rearrange this onready code below,

    Code:
    $(document).ready(function(){
    
          $('#contents').hover(function(){
    		$(".caption", this).stop().animate({top:'330px'},{queue:false,duration:160});
    		$(".controller", this).fadeIn("slow");
    	}, function() {
    		$(".caption", this).stop().animate({top:'360px'},{queue:false,duration:160});
    		$(".controller", this).fadeOut("slow");
    	});
    				
    });
    into the code like this,

    Code:
    // function for toggle on one click
    jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    	return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };
    so that I can attach that code onto a link like below whenever it is needed, instead of declaring the hover code when the page is loaded,

    PHP Code:
    <a href="#" onmouseover="$('#contents').hoverMe(); return false;">Hover</a
    I tried to arrange it into the code below, but it doesnt work on safari and chrome, only works on firefox and IE,

    Code:
    jQuery.fn.hoverMe = function(){
    	$('#contents').hover(function(){
    		$(".caption", this).stop().animate({top:'330px'},{queue:false,duration:160});
    		$(".controller", this).fadeIn("slow");
    	}, function() {
    		$(".caption", this).stop().animate({top:'360px'},{queue:false,duration:160});
    		$(".controller", this).fadeOut("slow");
    	});
    }
    after all, what does the .fn stand for actually??

    Many thanks,
    Lau

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hi Lau,

    Good day!

    jQuery is an object itself. jQuery.fn is a short-hand for jQuery.prototype.

    This might be useful:
    Code:
    jQuery.fn.hoverON = function (obj,speed) {
    	$('.caption',this).stop().animate( { top:obj.top } , { queue:obj.queue, duraction:obj.duration } );
    	$('.controller',this).fadeOut(speed);
    }
    Use it as:
    Code:
    <a href="#" onmouseover="$(this).hoverON({top:'330px',queue:false,duration:160},'slow')">Test</a>
    There's no need on adding return false after the end of onmouseover event as we need not to cancel any unwanted behavior.
    return false is usually added on the inline onclick event whose purpose is to cancel any event from the point of execution forward.

    For further reading:
    http://docs.jquery.com/Core/jQuery.fn.extend

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    Hi Lau,

    Good day!

    jQuery is an object itself. jQuery.fn is a short-hand for jQuery.prototype.

    This might be useful:
    Code:
    jQuery.fn.hoverON = function (obj,speed) {
    	$('.caption',this).stop().animate( { top:obj.top } , { queue:obj.queue, duraction:obj.duration } );
    	$('.controller',this).fadeOut(speed);
    }
    Use it as:
    Code:
    <a href="#" onmouseover="$(this).hoverON({top:'330px',queue:false,duration:160},'slow')">Test</a>
    There's no need on adding return false after the end of onmouseover event as we need not to cancel any unwanted behavior.
    return false is usually added on the inline onclick event whose purpose is to cancel any event from the point of execution forward.

    For further reading:
    http://docs.jquery.com/Core/jQuery.fn.extend

    Hope that helps.
    Hi rangana,
    Many thanks for the tips above. I have tested it on my site, but it still wont work on safari for some reasons...

    Also I notice one thing, the .hover is not in the code u suggested any more, so the caption appears when the mouse is over the button, but the caption just stays forever when the mouse goes away from the button again....

    Is .hover an object or function of JQuery?

    Thanks,
    Lau

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Could you please provide a link to your page.

    hover(over,out) is an event handler. It's a way of assining "onmouseover" and "onmouseout" event to the element.

    For further reading:
    http://docs.jquery.com/Events/hover
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    Could you please provide a link to your page.

    hover(over,out) is an event handler. It's a way of assining "onmouseover" and "onmouseout" event to the element.

    For further reading:
    http://docs.jquery.com/Events/hover
    Hi rangana,

    Thanks again, below are the links to look at,

    1. safari wont process the code after I have integrated it with wordpress,
    http://lauthiamkok.net/tmp/gt2/

    2. the code works on all browsers without wordpress
    http://lauthiamkok.net/tmp/slide/

    Code:
    jQuery.fn.hoverON = function(obj,speed) {
    	
    		$('.caption',this).stop().animate( { top:obj.top } , { queue:obj.queue, duraction:obj.duration } );
    		$('.controller',this).fadeIn(speed);
    	
    }
    
    jQuery.fn.hoverOFF = function(obj,speed) {
    	
    		$('.caption',this).stop().animate( { top:obj.top } , { queue:obj.queue, duraction:obj.duration } );
    		$('.controller',this).fadeOut(speed);
    	
    }
    PHP Code:
    <div id="contents" onmouseover="$(this).hoverON({top:'330px',queue:false,duration:160},'slow')" onmouseout="$(this).hoverOFF({top:'360px',queue:false,duration:160},'slow')"
    Also, it takes ages to load a page with wordpress, I assume it is caused by the wordpress itself, hopefully it is not caused by the javascript that I added in and the JQuery that I am integrating...?

    Cheers,
    Lau


  •  

    Posting Permissions

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