I work at an sidebar (left & right) which I can slide out/in with jQuery.
Both sides works but the right sidebar slides in left direction instead to right.
I use the following jQuery-code:
jQuery(function ($) {
var left_open = true;
var right_open = true;
$('a#ToogleSidebarLeft').click(function () {
if (left_open === true) {
$('#boxwrapper-left').animate({ width: 'hide' });
$('#leftcolumn').animate({ width: 'hide' });
$("#maincontent").animate({ marginLeft: "0px" });
left_open = false;
} else {
$('#boxwrapper-left').animate({ width: 'show' });
$('#leftcolumn').animate({ width: 'show' });
$("#maincontent").animate({ marginLeft: "220px" });
left_open = true;
}
});
$('a#ToogleSidebarRight').click(function () {
if (right_open === true) {
$('#boxwrapper-right').animate({ width: 'hide' });
$('#rightcolumn').animate({ width: 'hide' });
// $('#boxwrapper-right').hide('slide', {width: 'hide', direction: 'right' });
// $('#rightcolumn').hide('slide', { width: 'hide', direction: 'right' });
$("#maincontent").animate({ marginRight: "0px" });
right_open = false;
} else {
$('#boxwrapper-right').animate({ width: 'show' });
$('#rightcolumn').animate({ width: 'show' });
$("#maincontent").animate({ marginRight: "200px" });
right_open = true;
}
});
});
How can I change the sliding-direction of the second function (ToogleSidebarRight) to right?
I have try something like this but it doesn't works so:
$('#boxwrapper-left').animate({ width: 'hide', direction: 'right' });
Thanks for helping!
PS: English isn't my native language, so the text looks maybe a little bit strange...
$("#maincontent").animate({ marginRight: "-200px" });
I think negative value of margin will work.
or change it to
$("#maincontent").animate({ marginLeft: "200px" });
there are plenty of examples available ... i hope you can extract the needed piece...
Finally, we can achieve the same
effect as the left animation by
animating the marginLeft property. In
this case, we still need overflow:
hidden; on the parent element, but the
sliding element does not need to be
positioned.
$(document).ready(function() {
$('#slidemarginleft button').click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
});
});
});
Related
I'm a javascript/jquery rookie, but I try to put in place a an interactive page containing multiple divs. These Divs enlight when we pass the mouse over and turn back to normal when mouse leaves the div. The div enlarges when clicked, and a "back" button" must turn back the div to "normal" state. My problem is the behavior of the div when click the back button, and it starts to get back to normal but enlarges again afterward. I know I could resolve the problem by moving the "button" out of the div, but is there any other solution ?
Also, how to "stop" the opacity change when enlarging the DIV ? Tried the stop() function in various scenarios but without success so far...
Thanks for the help.
Here is the HTML code :
<div id='container'>
<div id='back_button'>BACK</div>
</div>
And here is for the jQuery
$(document).ready(function () {
$('#container').hover(function () {
$(this).fadeTo('fast', 1);
}, function () {
$(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$(this).stop( true, true ).parent().animate({
width: "200px",
height: "100px"
});
});
});
I also created an example on jsfiddle
Stop the click on the back button from propagating up to the parent, and you can use a class to disable the hover events when the element is enlarged.
$(document).ready(function () {
$('#container').hover(function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
}, function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).animate({
width: "600px",
height: "600px",
opacity: 1
}).addClass('large');
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "200px",
height: "100px"
}).removeClass('large');
});
});
FIDDLE
please use this updated code
$(document).ready(function () {
$('#container').hover(function () {
$(this).stop().fadeTo('fast', 1);
}, function () {
$(this).stop().fadeTo('fast', 0.8);
}).click(function (e) {
if(e.target.id=="back_button" || $(this).width()>200){
return;
}
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$('#container').animate({
width: "200px",
height: "100px",
});
});
});
I'm trying to show some part of a div and animate it to 100% when the div is clicked.
and I want to animate it back to the initial height of the div if it's clicked again.
this is what i have so far,but it doesn't work. can anyone help?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>
click() doesn't accept two function arguments, previously there was a toggle() function that performed how you need it but it has now been deprecated and removed from jQuery.
Since your use case is pretty simple, I believe something like this would be enough:
$("#mydiv").click(function () {
var $this = $(this);
$this.animate({
height: $this.height() == 150 ? '100%' : 150
}, 300);
});
Demo fiddle
This should do the job for you.
jQuery:
$(document).ready(function() {
$("#mydiv").toggle(
function() {
$(this).animate({height: '100%'}, 300);
};
function() {
$(this).animate({height: 150}, 300);
});
});
I want to animate text smoothly from left and right in continuous loop can anyone suggest me something here is the fiddle link:
http://jsfiddle.net/yLNGn/3/
$(document).ready(function () {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
});
See Here is the answer. I make it as the seperate function with fiddle see here.
function repeat() {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
$('.kpp').delay(600).animate({
left:'-108px'
},600 ,function() {
repeat();
});
}
Fiddle
Hopefully it may helps.
Well, you can use setInterval function, or if you make use of the complete callback of the jquery animate method:
$(document).ready(function () {
console.log('ready');
var james = $('#bond');
var right = function () {
james.animate({left: '100px'}, 600, left);
};
var left = function () {
james.animate({left: '0px'}, 600, right);
};
right();
});
this is the complete fiddle example: http://jsfiddle.net/yLNGn/32/
Have you considered using this jQuery plugin?
Ok firstly - its not a toggle() as such.
This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.
This works so far, but it doesn't work going backwards. So the button works to show the 2nd Div, but hitting the 'less' button I made just makes the second div disappear and the 1st remains hidden.
Here is the code:
$('.more').click(function() {
$('.c1')
.animate({ left: "-828px" }, 600, 'easeInOutQuint')
.delay(300, function() {
$('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "828px" }, 600, 'easeInOutQuint')
.delay(300, function(){
$('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
What am I missing? And how could I do this so that I'm basically not repeating the same code twice?
have you tried with callback functions instead of delay ?
$('.more').click(function(){
$('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
$('.c2').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
$('.less').click(function(){
$('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
$('.c1').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
You have a wrong concept about .delay.
In jquery documentation:
Description: Set a timer to delay execution of subsequent items in the queue.
And its parameters are: duration [, queueName].
Also, from SO answer:
The delay() function only applies to actions queued on the element
So I think your best choice is, as #nicolast said, use the callbacks. Here it is working. And the final code is:
$('.more').click(function() {
$('.c1')
.animate({ left: "-400px" }, 600, function() {
$('.c2').animate({ left: "0px" }, 600);
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "400px" }, 600, function(){
$('.c1').animate({ left: "0px" }, 600);
}
);
});
This reproduce works.
When pressing more: c1 goes to -100px and after that c2 goes to 0px
When pressing less: c2 goes to 100px and after that c1 goes to 0px
$('.more').click(function() {
$('.c1')
.stop()
.animate({ left: "-100px" }, 600, 'linear')
.delay(300, function() {
$('.c2').stop().animate({ left: "0px" }, 600, 'linear');
});
});
$('.less').click(function() {
$('.c2')
.stop()
.animate({ left: "100px" }, 600, 'linear')
.delay(300, function(){
$('.c1').stop().animate({ left: "0px" }, 600, 'linear');
});
});
I just noticed something unusual. This is what I want to accomplish:
I want a div to be shown when I click a link
I want the div to disappear when I click somewhere else in the document
I don't want it to disappear when I click the div itself
Something like this:
http://jsfiddle.net/XPmyF/
JS:
(function() {
var box = $('#box');
$(document).on('click', function() {
if (box.css('display') == 'block') {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.on('click', function(e) {
e.stopPropagation();
});
})();
That fiddle works just fine but when I tested that in Firefox (15.0.1), if you right-click on the div, it dissapears, which is not the behavior I'm looking for. It seems that stopPropagation() works for clicks but not right-clicks in Firefox. Chrome keeps right-clicks from propagating to the document.
How can I fix it?
Thanks
Use the event.which method to detect which button was clicked. Here's an example in jsfiddle.
$(document).on('click', function(event) {
if (event.which == 1 && box.css('display') == 'block') {
box.css('display', 'none');
}
});
Edited to actually work...
Sorry about that, the events didn't work as anticipated. You could handle it with mouse-overs.
(function() {
var box = $('#box');
var clicky = true;
$(document).on('click', function() {
if (box.css('display') == 'block' && clicky) {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.mouseenter(function(e) {
clicky = false;
});
box.mouseout(function(e) {
clicky = true;
});
})();