I'm simply trying to change a hover trigger to a click but for some reason any click function I use does not work?
This my current code that works when you hover...
Current Script Thats Working on hover...
$showSidebar.hover(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
But see my attempts below to get it work when clicked, but weirdly nothing happens.
My Attempt One
$showSidebar.click(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and
My Attempt Two
$showSidebar.on('click', function () {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and a couple of others but nudda...
This is my mark up...
<span>//</span> MORE
and my var
$showSidebar = $("#show-sidebar");
Any ideas where I'm going wrong? Would be hugely helpful thanks!
See working code, thanks #hurshagrawal
$showSidebar.on('click', function () {
if ($showSidebar.html() == '<span>//</span> CLOSE') {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
} else {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
$showSidebar.html('<span>//</span> CLOSE');
}
});
I think you are looking for the .toggle() command:
$showSidebar.toggle(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
I don't think $.click() takes 2 functions as parameters. Did you try taking the second function out? If you're trying to toggle between the two, you might have to write something with an if-else in there.
EDIT: Ah, or use .toggle().
Try using bind(), I've found that more reliable across browsers.
http://api.jquery.com/bind/
basic usage in your case would be (untested):
$showSidebar.bind('click', function() {
// do stuff
});
Related
I have a function that swaps the position of two nodes.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000
});
padre.animate({
position: posInizFiglio,
style: {
backgroundColor: 'red'
}
}, {
duration: 2000
});
I'd like to execute a function after the padre.animate() function has ended.
I tried to use the complete property in animate() but it skips the animation and immediatly executes the function.
I even tried to use setTimeout but I get the same result, the function is immediatly executed and there is no animation
The animation works if i use it by itself
You need to use the complete callback:
complete: A function to call when the animation is done.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000,
complete: function(){
console.log('Animation complete');
}
});
I have done one example which is working fine with complete function
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.3/cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.animate({
pan: { x: 50, y: 50 },
zoom: 1,
style: {
backgroundColor: 'red'
},
complete:function(e){
console.log('Complete');
},
}, {
duration: 2000
});
</script>
</body>
</html>
Please help me! I don't have a clue, why my code is not working...
Is there any other way to define a variable inside event handler? Or return it somehow?
var $test;
$('#click1').click(function() {
$test = 1;
});
$('#click2').click(function() {
$test = 2;
});
$('#click3').click(function() {
$test = 3;
});
if ($test == 1) {
$right.fadeOut('2000');
$('#click1').css({
"color": "#6B1E1E",
"font-size": "100%",
"text-shadow": "0px 0px 2px green"
});
$animWebs.animate({
top: 170,
left: 800,
width: 400,
height: 300,
backgroundColor: 'white',
borderRadius: 6
}, 4000);
$('#img1').animate({
opacity: 1
}, 4000);
$('#click1').removeClass('click1');
} else if ($test == 2) {
$('#click2').css({
"color": "#6B1E1E",
"font-size": "100%",
"text-shadow": "0px 0px 2px green"
});
$right.remove();
$simpWebs.animate({
top: 170,
left: 300,
width: 400,
height: 300,
backgroundColor: 'white',
borderRadius: 6
}, 3000);
$('#img2').animate({
opacity: 1
}, 3000);
$('#click2').removeClass('click1');
} else if ($test == 3) {
$('#click3').css({
"color": "#6B1E1E",
"font-size": "100%",
"text-shadow": "0px 0px 2px green"
});
$right.remove();
$contact.animate({
top: 500,
left: 500,
width: 400,
height: 100,
backgroundColor: 'white',
borderRadius: 6
}, 3000);
$('#img3').animate({
opacity: 1
}, 3000);
$('#click3').removeClass('click1');
} else {
$test = null;
};
My if else statement works, but it seems that my click event doesn't make any changes to a variable
From what I can make out, could be down to sequence of events. See suggested code or re-fracturing of code below.
$(document).ready(function(){
var test;
$('#click1').click(function(){
test = 1;
evaluateTest(test);
});
$('#click2').click(function(){
test = 2;
evaluateTest(test);
});
$('#click3').click(function(){
test = 3;
evaluateTest(test);
});
function evaluateTest(testVal){
alert(testVal);
// INSERT YOUR IF STATEMENT HERE AND REMOVE ALERT ABOVE
}
});
$(document).ready(function(){
$('#click1').click(function(){
$right.fadeOut('2000');
$(this).css(/* CSS Stuff */);
});
$('#click2').click(function(){
/* Your Functionality */
});
});
I am searching for jquery's plugin blockUI functionality for mootools. Do You know some plugin or simple way to block browser for a given time by mootools ?
Here's some code to get you started. http://jsfiddle.net/5BCPS/
taken it out of my plugin here: https://github.com/DimitarChristoff/Modal/blob/master/Source/js/Modal.js
(function() {
this.Modal = {};
Element.implement({
diffuse: function(position){
return this.setStyles({
position: position || 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: '100%',
width: '100%'
});
}
});
Modal.Overlay = new Class({
Implements: [Events, Options],
options: {
zIndex: 900000,
opacity: .3,
backgroundColor: '#555',
fx: {
duration: 300
}
},
initialize: function(container, options){
this.setOptions(options);
this.container = document.id(container);
var self = this;
this.element = new Element('div', {
'class': 'overlay',
styles: {
display: 'none',
opacity: 0,
zIndex: this.options.zIndex,
backgroundColor: this.options.backgroundColor
},
events: {
click: function() {
self.fireEvent("overlayClick");
}
},
tween: this.options.fx
}).diffuse('fixed').inject(this.container);
return this;
},
show: function(){
this.element.setStyle("display", "block").fade(this.options.opacity);
return this.fireEvent("show");
},
hide: function(){
this.element.fade(this.options.opacity).get("tween").chain(function() {
this.element.setStyle("display", "none");
});
return this.fireEvent("hide");
}
});
})();
var modal = new Modal.Overlay(document.body, {
hideAfter: 5,
onHide: function() {
// do something.
}
}).show();
modal.hide.delay(3000, modal);
all you need is what you display on top / counter. thats just plain js.
I am having a bug with my custom slider script. When I am on the page everything goes smoothly, but when I open another tab and browse for a minute or so, and than comeback to my page my script goes crazy... Script is very straightforward.
Here is Jsfiddle - There are no images in the slider and that is why it does not look nice as it should..
function show12(evt){
$('#number_1').unbind();
$('#number_2').unbind();
// First slide
$('#number_1').css({
position: 'absolute',
top: '9px',
left: '10px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_1').css({
position: 'absolute',
top: '9px',
left: '47px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
// Second slide
$('#number_2').css({
position: 'absolute',
top: '9px',
left: '445px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_2').css({
position: 'absolute',
top: '9px',
left: '481px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
// Third slide
$('#number_3').css({
position: 'absolute',
top: '9px',
left: '879px'
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_3').css({
display: 'none'
});
// Forth slide
$('#number_4').css({
position: 'absolute',
top: '9px',
left: '917px'
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_4').css({
display: 'none'
});
$('#number_1, #number_2').hover(
function(){window.clearInterval(timer); i=1;}
);
$('#number_1, #number_2').mouseout(
function(){
$(this).unbind();
timer = window.setInterval(function(){slideLogos();}, 4000); i=1;
}
);
$('#number_3').hover(function(){$(this).unbind(); i++; show34();});
$('#number_4').hover(function(){$(this).unbind(); i++; show34();});
}
function show34(){
$('#number_3').unbind();
$('#number_4').unbind();
// First slide
$('#number_1').css({
position: 'absolute',
top: '9px',
left: '10px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_1').css({
display: 'none'
});
// Second slide
$('#number_2').css({
position: 'absolute',
top: '9px',
left: '48px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_2').css({
display: 'none'
});
// Third slide
$('#number_3').css({
position: 'absolute',
top: '9px',
left: '86px'
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#slide_3').css({
display: 'inline-block',
position: 'absolute',
top: '9px',
left: '123px',
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
// Forth slide
$('#number_4').css({
position: 'absolute',
top: '9px',
left: '521px'
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#slide_4').css({
position: 'absolute',
top: '9px',
left: '558px',
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#number_3, #number_4').hover(
function(){window.clearInterval(timer); i=0;}
);
$('#number_3, #number_4').mouseout(
function(){
$(this).unbind();
timer = window.setInterval(function(){slideLogos();}, 4000); i=0;
}
);
$('#number_1').hover(function(){$(this).unbind(); i++; show12();});
$('#number_2').hover(function(){$(this).unbind(); i++; show12();});
}
function slideLogos(){
switch(i%2){
case 0:
show12();
break;
case 1:
show34();
break;
}
i++;
}
var i = 1;
var timer;
$('document').ready(function(){
show12();
timer = setInterval(function(){slideLogos();}, 4000);
});
Number_n - is number always shown in slider, Slide_n - is a slide that is being shown/hidden, sorry about that :)
Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop.
The documentation suggests using the animation callbacks or the jQuery .queue() function on the element.
jQuery Queue()
Also this answer on queues is really interesting:
What are queues in jQuery?
I once ran into this same problem. I wouldn't say the script was going crazy as much as the animation appeared to be cached until I returned to the page. I don't know if this happens for you, but for me the sliding eventually slowed back down to the normal speed. I also noticed that the same thing happened across all browsers. So I figured it had to be caused by jQuery. Sure enough the problem disappeared by reverting to an older version of jQuery (1.5 instead of 1.6, if I remember correctly).
I have the following jQuery:
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}
How can I make it wait for the first one to finish?
http://api.jquery.com/animate/
animate has a "complete" function. You should place the 2nd animation in the complete function of the first.
EDIT: example http://jsfiddle.net/xgJns/
$("#div1").animate({opacity:.1},1000,function(){
$("#div2").animate({opacity:.1},1000);
});
$(function(){
$("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
$("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
});
});
http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/
You can pass a function as parameter to the animate(..) function which is called after the animation completes. Like so:
$('#div1').animate({
width: 160
}, 200, function() {
// Handle completion of this animation
});
The example below is a clearer explanation of the parameters.
var options = { },
duration = 200,
handler = function() {
alert('Done animating');
};
$('#id-of-element').animate(options, duration, handler);
Following what kingjiv said, you should use the complete callback to chain these animations. You almost have it in your second example, except you're executing your ShowDiv callback immediately by following it with parentheses. Set it to ShowDiv instead of ShowDiv() and it should work.
mcgrailm's response (posted as I was writing this) is effectively the same thing, only using an anonymous function for the callback.
Don't use a timeout, use the complete callback.
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
});
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });
This works for me. I'm not sure why your original code doesn't work. Maybe it needs to be incased in an anonymous function?