Consider the following piece of HTML:
<div id="outer">
<div id="inner">
<p id="content">
Some content
</p>
</div>
</div>
I can make #inner slide out to the right from the screen using the following jQuery:
$("#slide").animate(
{
'marginLeft':'100%'
},400,
function(){
$(this).slideUp('fast');
$(this).css("margin-right","100%");
$(this).css("margin-left","0");
}
);
However, how can I make that same element, with new content (from AJAX response), slide back in from the left?
I was thinking about resetting the margins (from margin-left:100% to margin-left:0; margin-right:100%) while it was out of view and then use an animation to slide it in from the left:
$("#slide").animate(
{
'marginRight':'0'
},400,
function(){
$(this).slideDown('fast');
}
);
This slides it back into view, but not from the left of the screen. Any ideas? I got the .slideUp() from a different StackExchange question but don't know why it's needed for a horizontal slide.
Simply reset the margin using .css() method:
$(function() {
$("#outer").click(function() {
$(this).animate({
'marginLeft': '100%',
'opacity': 0
}, 200, function() {
//==================================
//call synchronous ajax here or move this block
//to the ajax done callback function
//some ajax change
$(this).css({
"background": "blue"
}).text("came back with new content");
$(this).css({
'marginLeft': '-100%'
});
$(this).animate({
'marginLeft': '0',
'opacity': 1
}, 200);
//=================================
});
});
});
#outer {
width: 100px;
height: 100px;
display: block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<p id="content">Click Me</p>
</div>
</div>
Reset the margin using .css, check it out here: https://jsfiddle.net/gdjypc7w/2/
JS
function getSummary(id) {
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id,
success: function (data) {
// the data
$('#summary').html(data);
}
});
}
$("button").click(function () {
$("#inner").animate({
marginLeft: $("body").width()
}, 1000, function () {
//$("#content").text(getSummary(id); Use your id here to retrieve new data
$("#content").text("New content");
$("#inner").css("margin-left", "-100%");
$("#inner").animate({
marginLeft: "0px"
}, 1000);
});
});
Related
I can carry this task by using .toggle() in version 1.8 of jquery
but am using /jquery/3.2.1/ on my site and the .toggle() is not working properly
in one of my page am using this in my first section
$(document).ready(function(){
$("#slideBtn").click( function(){
$(".slide-div").animate({left : '0'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '100px'},2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click( function(){
$(".slide-div").animate({left:'-820px'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '14px'}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
it works fine but when i have to do the same task by clicking on the same button as it is in my bottom section by clicking it first time it works fine but if i click multiple time it wont work fine so i have issues with this code i need help with this code thank's
Here is the code
$(document).ready(function(){
$("#button").click(function(){
$(".new-box").animate({left : '0'},"slow");
});
$("#button").click(function(){
var left = $(".new-box").css('left');
if(left == '-820'){
$(".new-box").animate({left : '0'},"slow" );
}
else {$("#button").on("click",function(){ $(".new-box").animate({left : '-820px'},"slow");});}
});
});
Here is the example
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if (left == '-820') {
$(".new-box").animate({
left: '0'
}, "slow");
} else {
$("#button").on("click", function() {
$(".new-box").animate({
left: '-820px'
}, "slow");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>
JSFiddle
If you used a debugger on the code, you'd see that left comes back from css with a units value on it (e.g., -810px, not -810). You're also hooking up a click handler within a click handler, which is almost never a good idea.
I wouldn't rely on the return value from css at all; instead, I'd use a flag class (and probably do the animation with CSS, but that's out of scope):
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
There I've added a class initially to the element, and then I use it as a flag for what to do when the click occurs.
Live copy:
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box on-left" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>
When you call $("selector").click(.. twice like you have, you're assigning two click handlers - so both run at the same time (both run on a single click).
You need to check the state within the click button, eg:
var isshown = false;
var isshown = true;
$("#btn").click(function() {
if (isshown) {
// do your animates here, simple hide/show as example
$("#content").hide();
} else {
$("#content").show();
}
isshown = !isshown;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>content</div>
<button id='btn'>click</button>
There are many ways to check this, above is an example.
Above you will find a sketch of what I am trying to achieve. I am working in a 12 column layout. I want the div .row-2 to max out to 10 columns on the right but go all the way to the edge of .main-container on the left.
Below is what I have to work with but keep getting errors.
$('.main-container').once('.row-2').each(function () {
$(window).on('resize', function () {
$('.row-2').each(function () {
self.align($(this));
});
});
});
$(document).ready(function () {
$('.row-2', context).once('.row-2').each(function () {
self.align($(this));
});
});
align: function ($element) {
$element.css({
marginLeft: ''
});
var maxWidth = $element.width();
$element.css({
marginLeft: 'auto'
});
$('.row-2', $element).each(function () {
$(this).css({
maxWidth: maxWidth,
marginLeft: 'auto'
});
});
var offset = $element.offset();
// Use #focus element as wrapping element
offset.left = offset.left - $('.main-container').offset().left;
$element.css({
marginLeft: (offset.left * -1) + 'px'
});
};
.main-container {
max-width:1680px;
width:100%;
height:1000px;
margin:0 auto;
background-color:#cccccc;
}
.row-1, .row-2, .row-3 {
background-color:#f4f4f4;
width:1000px;
margin:0 auto;
height:100px;
margin-bottom:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-container">
<div class="row-1"></div>
<div class="row-2"></div>
<div class="row-3"></div>
</div>
Here, working example please check below link.
I have set .row-2 in same container but take different css for .row-2 and .row-1 & .row-3
and .row-2 take 10 columna same you need please check it
https://jsfiddle.net/DineshV/frp1Luzo/
[Here is image with center same as you said. you know showed center because of you have nor resize window ][Check this img]
https://i.stack.imgur.com/sbhlK.png
I need to set a easeOutBounce for a webpage back-to-top button .
I have below code for .scrollTop but unable to add
{
duration: 2000,
easing: "easeOutBounce"
}
Existing .js:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
});
});
Like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Or, like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate(
{scrollTop: 0},
{
easing: 'easeOutElastic',
duration: 1500
}
);
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Useful sites:
http://easings.net/ (usage examples at bottom)
http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Install just the easings to get around requirement for jQueryUI
Inside a Main Wrapper , I have 5 Divs. The very First div contains 4 Box(box_1, box_2,box_3,box_4) where my click event will occur.
Other 4 divs inside main wrapper , are the content of box_1, box_2, box_3, box_4 respectivly.
All box contain an hyperlink tag with unique Id to Move back to very first div.
For first time, When I click on any menu , corressponding box container appers.
e.g, clicked on redbox > Moved to Box-1 content > Clicked on Back to menu > Moved to 4 Colored box section.
Again clicked on gany box. Lets say , Green box> Moved to Box2 container > Clicked on Back to Menu > Oops !!! My 4 Colored box jut slide out from my screen.
Here is the JS Fiddle lINK. I want the 4 colored div section to stay on the screen.
http://jsfiddle.net/swapnaranjita_nayak/8XcZX/
## HTML ##
<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
<div class="wrapper">
<div class="row">
<div class="box1" id="box_1"></div>
<div class="box2" id="box_2"></div> <div class="clear"></div>
</div>
<div class="row">
<div class="box3" id="box_3"></div>
<div class="box4" id="box_4"></div> <div class="clear"></div>
</div>
</div>
</div><!---End of Container fluid--->
<div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
<h1>Box1 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
<h1>Box2 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
<h1>Box3 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
<h1>Box4 Content</h1>
Back to #Menu
</div>
</div>
css
.container_fluid {
width:100%;
}
.wrapper {
width:1208px;
margin:auto;
}
.row {
padding:3% 3% 3% 3%;
}
.box1 {
height:100px;
width:100px;
background-color:red;
margin-right:2%;
float:left;
}
.box2 {
height:100px;
width:100px;
background-color:green;
margin-right:2%;
float:left;
}
.clear {
clear:both;
}
.box3 {
height:100px;
width:100px;
background-color:black;
margin-right:2%;
float:left;
}
.box4 {
height:100px;
width:100px;
background-color:brown;
margin-right:2%;
float:left;
}
JS
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"+=150%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});
"marginRight":"+=170%"
every time you add 170% or :
"marginLeft":"-=150%"
decrease 150% , this should be set , not increment or decrement the value.
http://jsfiddle.net/prollygeek/8XcZX/1/
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"0%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});
I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help
You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.