Force jQuery content slider to pause on hover - javascript

I would be grateful if someone can help with with some javascript code. I have a content slider which can be found here:-
link text
This works fine but I would like to change the following code so that it pauses on hover. Any ideas?
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Thanks in advance of your help.
Kind regards
Jonathan

What you're looking for is the stop method. Something along the lines of:
$(".ui-tabs-panel").mouseover(function(e) {
if($(this).is(':animated')) {
$(this).stop();
}
});

Looks like you're using jQuery.UI. Here's how i've done it in the past using the same library (courtesy of this tutorial):
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

Related

Jquery show/hide hover or mouse enter issue

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

Jquery click function problems

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?
so far i have tried this
$(".wrap").click(function(){
$(this).css("margin-top", "-15px");
});
I just cant figure out how to make it move down to its original place
thanks
Try to do:
$("img.wrap").click(function(){
$("img.wrap").css("margin-top", "0px");
$(this).css("margin-top", "-15px");
});
For better look use Jquery animate
$( ".wrap" ).click(function() {
$(this).animate({
top: "15px",
}, 500);
});
Place it in document.ready and use latest JQuery source file:
<script type="text/javascript>
$(document).ready(function(){
$(".wrap").on('click',function(){
$(this).css("margin-top", "-15px");
});
});
</script>
Try to wrap it in ready()
And css() may not apply margins so use javascript marginTop like,
$(function(){
$(".wrap").click(function(){
this.style.marginTop='-15px';
});
});
Live Demo
As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.
$('.sample img').bind('click',function(){
$('.sample img').removeAttr('style');
$(this).css('top',-5);
});
Do you want like this:
var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
if($(this).css('margin-top') == '-15px'){
$(this).css('margin-top',mt);
} else {
$(this).css("margin-top", "-15px");
}
});

Swapping an image onClick with jQuery from 4 buttons

I've had a look through some other questions and was unable to find a solution. I have four buttons and I want them to change the colour of a dress when you click them using jquery. In Dreamweaver I have managed to sort of get it working but rather than replacing the image it seems to replace the buttons, any advice on where I'm going wrong would be greatly appreciated. I created a jsfiddle of it but that works even less, here it is: http://jsfiddle.net/zd72f/
Also sorry for not linking the fiddle properly, hopefully the link I've added will work.
<body style="margin:0 0 0 0;">
<div class="background">
<div id="index-dress">
</div>
</body>
Thanks in advance for any help!
You need to include jQuery in your fiddle as well as changing only the src of the image which is placed inside #index-dress div:
$('#index-dress img').attr('src'........
instead of all images like what you're doing at this moment:
$('img').attr('src'........
Final code should look like this:
$(document).ready(function () {
$('.buttons').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-dress-sized.png");
});
$('.navy').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-dress-sized.png");
});
$('.purple').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-dress-sized.png");
});
$('.yellow').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png");
});
});
Updated Fiddle
Just add a scope to your jQuery image selector:
...
$('img', '#index-dress').attr(..
...
http://jsfiddle.net/zd72f/14/

onClick show iframe 5000 and then hide

I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?
Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/
You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>

jQuery or onClick Div Fade

I apologize if this is in the wrong section..
Could someone possibly point me towards a script or a tutorial on this:
when I click on something, say for instance an "x", I'll click it, then it fades away on click.
If you understand what I mean, could someone point me in the right direction please?
Thanks!
Please familiarize yourself with Google.
Then familiarize yourself with http://docs.jquery.com/Tutorials:How_jQuery_Works
Try out some code on http://www.jsfiddle.net
refer
$('someclass/id').click(function() {
$('someclass/id').fadeOut();
});
check this
$('a').toggle(
function() { $('#us').fadeIn(); },
function() { $('#us').fadeOut(); }
);
.fadeToggle()
show( effect, [options], [speed], [callback] )jQuery UI
Refer this: http://www.webdesignerwall.com/demo/jquery/
There is small tutorials for different UI elements with good explanation.
This describes how to fade in and fade out an element on click
$(document).ready(function(){
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_in").fadeIn("slow");
});
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_out").fadeOut("slow");
});
});
Its easy you could have googled that.
jQuery('#divId').click(function(){
jQuery(this).hide('slow'); //this will give a little animated effect.
// or
jQUery(this).fadeOut('slow');
});
http://api.jquery.com/fadeOut/
http://api.jquery.com/hide/
use
$('#id').click(function() {
$('#id').fadeIn();
$('#id').fadeOut();
});
[link][1]
<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>

Categories