...

View Full Version : jquery effect help please!



LJackson
08-20-2010, 06:40 PM
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

<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

$(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.

<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

LJackson
08-21-2010, 12:39 AM
anyone?

the full source code is

<!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

Philip M
08-21-2010, 11:34 AM
You would perhaps do better to post this thread in the jQuery forum.

LJackson
08-21-2010, 01:13 PM
ah didnt know there was a jquery forum? will ask to have it moved there,

thanks mate

rapidrich
10-13-2010, 12:09 PM
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);}
);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum