My code does not work. What I want is to move my pagination to the left and to the right after #prev_pag and #next_pag are clicked on. I don't know why this code isn't working?
EXAMPLE: http://jsfiddle.net/szVKD/
JS code:
$('#next_pag').click(function() {
$('#pagination').animate({
marginLeft: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
marginLeft: '+=100px'
},
500);
});
});
Try to animate not 'marginLeft' but 'left';
EXAMPLE:
http://www3.montonfashion.com/js/slider/carouselPP.js
http://www3.montonfashion.com/et/waistcoat-willy.html
you nedd to play with left not marginleft...see here
$('#next_pag').click(function() {
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
left: '+=100px'
},
500);
});
});
$('#next_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '+=100px'
},
500);
});
});
Related
I am not sure why the following doesn't work. I inspected and it successfully changes the class names but when I click on tab it doesnt move.
var main=function() {
$('.uptab').click(function() {
$('.headbar').animate({
top: '10px'
}, 600);
$('.tab').animate({
top: '45px'
}, 600);
$('.tab').removeClass('uptab');
$('.tab').addClass('downtab');
});
$('.downtab').click(function() {
$('.headbar').animate({
top: '-40px'
}, 600);
$('.tab').animate({
top: '-5px'
}, 600);
$('.tab').removeClass('downtab');
$('.tab').addClass('uptab');
});
};
$(document).ready(main)
I am making a site where I have a tabbed area (three tabs) which when hovered on, fade in different height divs.The page loads with the divs hidden and are only to fade in the corresponding div when the link is hovered on. If any div is already shown, it should fade out (or ideally appear to fade into the next div).I've already formed two methods but they have messy results, especially when dragging the mouse randomly across the links; too many divs appear and animations run before others finish.Any ideas on how I can make this work would be greatly appreciated; so what's there is replaced with the next div.Here's whats failed so far:
Version 1
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#one-box').delay(400).fadeIn(300);
});
// Box two
$('#two-link').hover(function () {
$('#one-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#two-box').delay(400).fadeIn(300);
});
// Box three
$('#three-link').hover(function () {
$('#one-box').fadeOut(300);
$('#two-box').fadeOut(300);
$('#three-box').delay(400).fadeIn(300);
});
});
Version 2
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box two
$('#two-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box three
$('#three-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
});
Try decreasing your fadeOut time:
$('#one-link').hover(function () {
$('#two-box').fadeOut(100);//100 ms as an example
$('#three-box').fadeOut(100);
$('#one-box').delay(400).fadeIn(300);
});
or you can try as a crude solution:
$('#one-link').hover(function () {
$('#two-box, #three-box').fadeOut(300, function() {
$('#one-box').fadeIn(300);
});
});
I've been fighting with this for a few hours now (I'm a bit new to js) and I decided to put it up to the community. I have this web app I'm building that is all based on percentages of screen sizes. The divs are fixed position, contents absolute within those divs. Here is the fiddle: http://jsfiddle.net/MycF6/31/ and the code I'm working with:
$(document)
.ready(function () {
$("#socialDash")
.click(function () {
$("#socialStream")
.hide("slide", {
direction: "left"
}, "1000");
});
});
$("#socialDash")
.click(function () {
$("#workBench")
.effect("scale", {
percent: 178,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 700);
});
$("#niner")
.click(function () {
$("#socialStream")
.show("slide", {
direction: "left"
}, "1000");
$("#workBench")
.effect("scale", {
percent: 56,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 500);
});
$(".socialButton")
.click(function () {
$("socialButton")
.removeClass(".clicked");
$(this)
.addClass(".clicked");
});
I want it so when I click the top button on the left (1) the left div of the inside content slides left and the div on the right expands to take its place. For the other two buttons (2),(3), I want the divs in original proportion. The other issue is when buttons (imgs) are clicked they have background that remains persistent instead of swapping to the next clicked button as I have tried to identify in that last bit of code.
Any help would be greatly appreciated. Thanks in advance!
Okay, I found a solution (basically I rewrote everything). It isn't pretty, but it works. Here is the new jfiddle: http://jsfiddle.net/MycF6/42/ if you are interested.
And the script:
$(document).ready(function () {
$("#dash").click(function () {
$("#stream").animate({
width: "0"
}, "fast").hide("slide", {
direction: "left"
}, "fast");
$("#dash").addClass("clicked");
$("#fb").removeClass("clicked");
$("#twit").removeClass("clicked");
$("#work").animate({
width: "100%"
}, "slow");
});
$("#twit").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").addClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").removeClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
$("#fb").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").removeClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").addClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
});
Do not execute until previous is completed. If you click quickly, the script is incorrect. If I click several times, the function will be executed without waiting for completion. It becomes messy.
$(".vid1 .next, .vid2 .next").click(function(){
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
});
You can initialize a variable to True when starting the Click, in Complete return it to False.
Every time he comes to click, check if True, then exit the function.
var isClicking=false;
$(".vid1 .next, .vid2 .next").click(function(){
if(isClicking)
return;
isClicking=true;
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
isClicking=false;
}
});
});
Try to disable the button first and enable the button after finish.
$(".vid1 .next, .vid2 .next").click(function(){
$(this).attr("disabled", true);
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
$(this).removeAttr("disabled");
});
$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300);
// Here I want wait that the div_id can complete its shake
alert('hello');
}
.delay I tried but it is not working.
$(this).effect("shake", { times:3 }, 300, function() {
// this will alert once the animation has completed
alert('hello');
});
If you're using jQuery UI, you should just be able to add a callback as the 4th parameter.
See: http://jqueryui.com/demos/effect/
$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300, function(){
alert('hello');
});
}
$(this).effect("shake", { times:3 }, 300, function() {
alert('hello');
});