SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript hover effect

    hii
    i have used a javascript code for banner transition on a page in which i have give a time span for 8 sec for each banner after which the banner changes.
    The banner also changes when the user clicks on any of the banners.

    But what i want is to extend it a little further like this:
    when the user hovers on any of the banners, the banner should change .

    i have used the banner transition code from the following site:http://demo.webdeveloperplus.com/fea...ontent-slider/
    thanks in advance..

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It looks like that page just uses the jQuery UI framework...

    And I think the jQuery UI framework supports tabs opening on mouseover:

    Toggle sections open/closed on mouseover with the event option. The default value for event is "click."

    Code:
    event: 'mouseover'
    Can you show us your page as well?
    I'm the web overlord for Graphic Business Systems

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    Be wary of hover powered effects - hover events don't get fired by touch devices (androids and iphones). Make sure the user can open the menu by clicking the main item instead of merely hovering on it.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As i mentioned above, its not for menu, actually its for banner transition effect.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, you can refer to the page at

    http://www.masterworks.in/gauritech

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You have this script at about line 17 in your HTML:

    Code JavaScript:
    	    $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
        });

    Try adding event: "mouseover" to that first object, so that it looks like this:

    Code JavaScript:
    	    $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle", event: "mouseover"}}).tabs("rotate", 8000, true);
        });
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your quick reply.
    but this code too does work as i want.


Bookmarks

Posting Permissions

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