How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?
This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});
Related
I'm working under particular circumstances and I am trying to get a slick slider carousel to run.
I get an error that $ is not defined.
Unless I use
window.onload = function(e){
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
};
The problem is, this slider is the first thing on the page, so I can not wait until everything is loaded, as it takes way too long.
I cannot change the order of my script tag or make sure the jQuery link is properly placed in the head an so on.
I know that other sliders on the page work just fine, and I also know that this particular one works fine once the proper files are loaded
There must be a way to check if $ is defined, keep checking until it is, and then run the script once confirmed.
use a waiter:
setTimeout(function wait(){
if(!window.$) return setTimeout(wait, 100);
// do stuff needing $ here:
console.info("$=", $);
}, 100);
var timer = setInterval(checkjQuery, 5000);
function checkjQuery() {
if(window.jQuery) {
clearInterval(timer);
callSlick();
console.log('jQuery is loaded');
return;
} else {
console.log('waiting');
}
}
function callSlick() {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
};
Similar to DanDavis solution
IMO the answer from #dandavis solves the issue the simplest.
I'd like to offer a way to make a simple "wait-er" re-usable and show how to integrate this with the code you shared.
A re-usable wait-er:
function waitUntil(getResource, callback) {
// Copied from #dandavis' answer
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
callback(resource);
}, 100);
}
window.onload = function(e) {
waitUntil(function () { return window.$; }, function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
Or if you wanted to, you could make it promise-based:
function waitUntil(getResource) {
return new Promise((resolve, reject) => {
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
resolve(resource);
}, 100);
});
}
window.onload = function(e) {
waitUntil(function () { return window.$; })
.then(function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
I have the following jQuery animate function:
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' },
function () {
alert('hi');
}
);
The animation itself works. $myDiv slides with the easeInOutExpo effect, as desired. However, the callback function is never fired. To test it, I changed the callback to just alert("hi");, as you can see above. Still doesn't work.
What could I be doing wrong?
Try this
Demo: jsFiddle
$("#myDiv").animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' ,
complete:function () {
alert('hi');
}
}
);
There are a couple of things that need fixing here:
Make sure you've included jQuery UI in your code, because easeInOutExpo is not part of the standard jQuery library.
Your syntax is wrong: you're mixing up the two different options for the animate() function.
It's either
$(element).animate(properties [,duration] [,easing] [,complete]);
or
$(element).animate(properties, options)
where options is an object formatted like this:
{
duration: number,
easing: string,
complete: function,
}
You've gone with the second option, so you need to format it properly to use the complete attribute of the options object for your function:
$myDiv.animate({
"left": "0%",
}, {
duration: 1000,
easing: "easeInOutExpo",
complete: function () {
alert('hi');
},
});
Demo
Alternatively, you could use the first format option:
$("#myDiv").animate({
"left": "0%",
}, 1000, "easeInOutExpo", function () {
alert('hi');
});
Demo
One way is use of JQuery Promise
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }).promise().done(function(){
alert('hi done');
});
I've HTML tag like this:
<div id="user-detail"></div>
That's for jQuery.dialog container. And the dialog script...
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
When I call a function to show it, I adding .attr() to give the tag new attribute title.
function user_detail(id){
var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html(output)
.dialog('open');
}
and blah.... the .attr() not work. What is the problem??
You can hack it like that:
$("span.ui-dialog-title").text('User Detail');
If User Detail string is common for all,Do not mess up.
use
<div id="user-detail" title="User Details"></div>
Your script is working fine here http://jsfiddle.net/yeyene/GnpQ8/3/
Make sure your variable output has data.
$(document).ready(function(){
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html('HI, I am a dialog.')
.dialog('open');
});
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");
});
I have the following animations in my web page:
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
$(this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?
Thanks in advance.
Your function is wrong, if you are declaring options, then the callback goes in the options object:
$(".anim-item").animate({
opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
$(this).animate({
left: 200,
}, { queue: true, duration: 1000, complete: function() {
// Animation complete.
}});
}});
Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)
Two ways:
cache this in a local variable before calling .animate()
use .proxy() to pass your this reference to .animate()
example 1:
var func = function(){
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
self.animate({});
});
};
example 2:
var func = function(){
$.proxy($(".anim-item").not(this).animate({
}), this);
};
Save it under a different name, like this:
var myThis = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(myThis).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});
The closure of the inner function will make sure it's visible.
Make an alias for this via
var _this = this;
If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.
Store this in a local variable.
var _this = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete. Next animation
$(_this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
}
);
In a jQuery callback function this is always set to the DOM element that the function applies to.
If you want access to this in your first callback function you'll have to create a reference to it before you animate:
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(self).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});