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
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation jquery effect help please!

    Hi All,

    I have a featured content slider which i am trying to add an effect to it, at current it auto scrolls through the tabs and updates the main info, it also pauses on hover which is great. here is the code for this
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000, true);
    $("#featured").hover(
    function() {
    $("#featured").tabs("rotate",0,true);
    },
    function() {
    $("#featured").tabs("rotate",5000,true);
    }
    );
    });
    </script>
    now i want it so that when the user hovers over the tab it automatically updates the main data whilst pausing the auto scroll? i have this code which kinda works
    Code:
    $(function() {
    		$("#featured").tabs({
    			event: 'mouseover'
    		});
    	});
    but it disables the pause function and messes up the auto scroll process here is the updated code with the above included.
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000, true);
    $("#featured").hover(
    function() {
    $("#featured").tabs("rotate",0,true);
    },
    function() {
    $("#featured").tabs("rotate",6000,true);
    }
    );
    });
    $(function() {
    		$("#featured").tabs({event: 'mouseover'});
    });
    </script>
    anyone have any ideas please?
    thanks

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    anyone?

    the full source code is
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000, true);
    $("#featured").hover(
    function() {
    $("#featured").tabs("rotate",0,true);
    },
    function() {
    $("#featured").tabs("rotate",6000,true);
    }
    );
    });
    $(function() {
    		$("#featured").tabs({event: 'mouseover'});
    });
    
    </script>
    </head>
    <body>
    
    
    		<h3>&raquo; Featured Content Slider Using jQuery</h3>
    		
    		<div id="featured" >
    		  <ul class="ui-tabs-nav">
    	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/kinect_small.jpg" alt="" /><span>Microsoft Kinect UK launch date revealed</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Article Test 2</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Article Test 3</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Article Test 4</span></a></li>
    	      </ul>
    
    	    <!-- First Content -->
    	    <div id="fragment-1" class="ui-tabs-panel" style="">
    			<img src="images/image1.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >Microsoft Kinect UK launch date revealed</a></h2>
    				<p>Microsoft has revealed the much anticipated UK release date for the Xbox Kinect....<a href="#" >When is it?</a></p>
    			 </div>
    	    </div>
    
    	    <!-- Second Content -->
    	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image2.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
    				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
    			 </div>
    	    </div>
    
    	    <!-- Third Content -->
    	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image3.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
    				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
    	         </div>
    	    </div>
    
    	    <!-- Fourth Content -->
    	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image4.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
    				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
    	         </div>
    	    </div>
    
    		</div>
    	</div>
    
    
    </body>
    </html>
    thanks

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You would perhaps do better to post this thread in the jQuery forum.

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ah didnt know there was a jquery forum? will ask to have it moved there,

    thanks mate
    Last edited by LJackson; 08-21-2010 at 12:16 PM.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if you have fixed this issue but I am virtually doing the same thing.

    I used this code, which seems to be virtually what you are using and it seems to work for me.

    $('#TabSET').tabs({event: 'mouseover', fx: { opacity: 'toggle'}}).tabs("rotate", 5000, true);
    $('#TabSET').hover(
    function() {$("#TabSET").tabs("rotate",0,true);},
    function() {$("#TabSET").tabs("rotate",5000,true);}
    );


  •  

    Posting Permissions

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