HTML part:
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
<div id="box6" class="box">Div #6</div>
<div> <button class="Animate">left Animation</button></div>
<div> <button class="Animate2">right Animation</button></div>
</div>
Javascript part:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
CSS part:
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
#box6 {
background-color: grey;
}
When the above code is complied and "div's in the pages are clicked" they move towards their left. I want the divs to move to their left when left animation button is clicked in sequence 1-2-3-4-5-1 and move to their right when right animation button is clicked in sequence 1-5-4-3-2-1. I have already posted a similar question on this forum but I accepted the answers by mistake even though they were not exactly what I was looking for. My mistake I was not clear enough in my question. I am sorry if am asking for a big code here. All the help is appreciated. This is the link to http://jsfiddle.net/ykbgT/4151/
This is the desired functionality: http://basic-slider.com/ not so good looking though!!
Take a look at this http://jsfiddle.net/tppiotrowski/VLzN4/1/
I used your existing CSS and HTML and only modified the Javascript. I think your question implied that you did not want the original functionality of clicking on the div, but instead wanted to use the two buttons. Please comment if you want me to re-add in the clicking on the div functionality of advancing the slides.
$(function() {
function createSlider(el_left, el_right, items) {
var index = 0;
el_left.click(function() {
var $this = items.eq(index);
$this.animate({
left: '-50%'
}, 500);
index = (index + 1) % items.length;
var $next = items.eq(index);
$next.css('left', '150%');
$next.animate({
left: '50%'
}, 500);
});
el_right.click(function() {
var $this = items.eq(index);
$this.animate({
left: '150%'
}, 500);
index = (index - 1) % items.length;
var $next = items.eq(index);
$next.css('left', '-50%');
$next.animate({
left: '50%'
}, 500);
});
}
createSlider($('.Animate'), $('.Animate2'), $('.box'));
});
This function takes three jquery objects as arguments. The first is the button you wish to advance to the left. The second is the button you wish to advance to the right. The third is the items you wish to slide.
Related
I have the following functions. I want box 3 to move only after box 1 and box 2 have finished moving. Right now, it's moving right away. I assume I would put all the functions under one .click function but I tried a few times and it still does not work.
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
});
$("button").click(function() {
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
},
});
});
$("button").click(function() {
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
If I understand correctly, I simply smashed the first two click handlers together and moved the animation from the third one into the complete callback on #2.
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
}
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
I have this simple JQuery code that will slide the content from one div to the next. However after the browser being open for some time, eventually, it will get off sync and all of them start flying across the screen at the same time, and end up on top of each other. Any ideas what is wrong on my code?
$(function() {
function sp18() {
div = $('#container .box.selected');
$(div).animate({
left: '-50%'
}, 500, function() {
$(div).css('left', '150%').removeClass("selected");
$(div).appendTo('#container');
});
$(div).next().animate({
left: '0'
}, 500).addClass("selected");
setTimeout(sp18, 200);
}
setTimeout(sp18, 100);
});
#container {
letter-spacing: 0.05em;
text-align: center;
width: 100%;
margin-top: 2px;
width: 100%;
height: 38px;
overflow: hidden;
line-height: 38px;
position: relative;
}
#container .box {
position: absolute;
width: 100%;
text-align: center;
left: 150%;
margin-left: 0;
line-height: 38px;
font-size: 13px;
}
#container .box span {
color: #555
}
#container .box.selected {
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="box selected">slide 1</div>
<div class="box">slide 2</div>
<div class="box">slide 3</div>
<div class="box">slide 4</div>
</div>
Occasionally the screen will look like this when they are out of sync:
You may want to add the setTimeout() inside the latest animate complete() callback function. So, this way you wait for the latest animation to finish before calling again the sp18 function, otherwise, if you don't wait an animation to finish before starting a new one, eventually you will get out of sync:
function sp18()
{
let div = $('#container .box.selected');
$(div).animate({left:'-50%'}, 500, function()
{
$(div).css('left', '150%').removeClass("selected");
$(div).appendTo('#container');
});
$(div).next().animate({left:'0'}, 500, function()
{
setTimeout(sp18, 250);
}).addClass("selected");
}
$(document).ready(function()
{
setTimeout(sp18, 1000);
});
#container {
letter-spacing: 0.05em;
text-align: center;
width:100%;
margin-top:2px;
width: 100%;
height: 38px;
overflow: hidden;
line-height:38px;
position: relative;
}
#container .box {
position: absolute;
width: 100%;
text-align: center;
left: 150%;
margin-left: 0;
line-height:38px;
font-size:13px;
}
#container .box span {
color:#555
}
#container .box.selected {
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="box selected">slide 1</div>
<div class="box">slide 2</div>
<div class="box">slide 3</div>
<div class="box">slide 4</div>
</div>
There is an extra }); at the end of your javascript, removing which makes the code work as expected.
Alternatively you can put everything inside $(document).ready() as follows:
$(document).ready(function() {
function sp18() {
div = $("#container .box.selected");
$(div).animate({left: "-50%"}, 500, function() {
$(div).css("left", "150%").removeClass("selected");
$(div).appendTo("#container");
});
$(div).next().animate({left: "0"}, 500).addClass("selected");
setTimeout(sp18, 8000);
}
setTimeout(sp18, 3000);
});
The codepen demo here: https://codepen.io/anon/pen/JVXJBz
I'm trying to achieve an effect similar to airbnb.com's home page and the how it works button.
I've been able to do the following fiddle: http://jsfiddle.net/n89z4bz3/
However, I'm unable to achieve the slide effect as well as fixing the visible container to the bottom of the slid in upper-container.
My Jquery code is here:
$(document).ready(function(){
var heightVar = 0 - $(window).height();
$('.upper-container').css('top',heightVar+'px');
$('.main-container').css('height', $(window).height()+'px');
$('.click-this').on('click', function(){
$('.upper-container').css('top', '0');
$('.main-container').css('margin-top',$('.upper-container').height()+'px');
});
});
My HTML is setup as follows:
<div class="upper-container">
Hidden container
</div>
<div class="main-container">
Visibile container
<div class="click-this">
Click This to Slide Down
</div>
</div>
Try this
http://jsfiddle.net/n89z4bz3/1/
$(document).ready(function() {
var heightVar = 0 - $(window).height();
$('.main-container').css('height', $(window).height() + 'px');
$('.click-this').on('click', function() {
$('.upper-container').animate({
height: '100px',
paddingTop: '40px'
}, 500);
});
});
.upper-container {
position: reltive;
width: 100%;
padding-top: 0px;
background: red;
height: 0px;
overflow: hidden;
}
.main-container {
background: blue;
position: relative;
}
.click-this {
background: #fff;
color: #333;
padding: 20px;
margin-left: 20px;
width: 300px;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="upper-container">
Hidden container
</div>
<div class="main-container">
Visibile container
<div class="click-this">
Click This to Slide Down
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I want to make a slideshow with javascript, but I only know how to do that with few images inside, but for my web I need to do slideshow in which I can put divs?
I only need two slides, in every slide are 3 divs, and that two slides change in left.
HTML
<div id="container" class="cont2">
<div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
<div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
<div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>
CSS
#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden;
background-color: white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}
#box1 {
background-color: green;
left: -150%;
}
#box2 {
background-color: yellow;
left:50%;
}
#box3 {
background-color: red;
left: 150%;
}
Javascript
$(document).ready(function(){
var refreshId;
var restartAnimation = function() {
clearInterval(refreshId);
refreshId = setInterval( function()
{
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%'
}, 500 );
} else {
$(this).animate({
left: '-150%'
}, 500 );
}
});
},1000);
}
restartAnimation()
});
I've try this but its not working.
JS:
function Divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
CSS:
#parent div {
display:none;
position: absolute;
top: 0;
left: 0;
}
#parent div:first-child {
display:block;
}
div{background:red}
#parent > div{
width:400px;
height:250px;
}
HTML:
<div id="parent">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
here is a Js Fiddle example
i'm trying to move divs(actually they are AlwaysVisibleControls) from center-screen to the top of the page after a few seconds.
This is what i have:
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) {
$('.PanelNotificationBox').click(function () {
$(this).fadeOut('slow', function () {
$(this).remove();
});
});
while (ScrollTopTimeOuts.length != 0) {
clearTimeout(ScrollTopTimeOuts[ScrollTopTimeOuts.length - 1]);
ScrollTopTimeOuts.length--;
}
ScrollTopTimeOuts[ScrollTopTimeOuts.length] = setTimeout(function () {
$('.PanelNotificationBox').animate({ top: 0 }, 'slow');
}, 3000);
}
This works, but the problem is that there can be more than one notification($('.PanelNotificationBox').size()>1). Then they will overlap each other after the animation.
Q: How can i animate elements so that the first element will be on top and the next elements will keep their positions relative to the others?
Edit: After i added the notification-div(s) to a container-div and try to animate that, it won't be animated at all. This is the generated HTML/CSS(note: the outer div is an UpdatePanel):
<div id="ctl00_UpdNotifier"
<div style="top: 0px;" id="ctl00_Notifier1_PnlNotification" class="NotificationContainer">
<div style="left: 292px; top: 398px; display: none; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_InfoMsg2" class="PanelNotificationBox PanelInfo AutoHide" title="click to close notification">
<span>Test-Notification(Info)</span>
</div>
<div style="left: 292px; top: 463px; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_ErrorMsg1" class="PanelNotificationBox PanelError" title="click to close notification">
<span>Test-Notification(RMA-Error)</span>
</div>
</div>
</div>
CSS-File:
.PanelNotificationBox
{
visibility:hidden;
z-index:9999;
width: 50%;
font-weight: bold;
font-size:small;
border: 1px solid;
margin: 10px auto;
padding: 20px 20px 20px 60px;
background-repeat: no-repeat;
background-position: 8px center;
box-shadow: 2px 2px 3px #3A4F63;
border-radius: 4px;
}
.PanelInfo {
color:Black;
background-color: InfoBackground;
background-image: url('../images/info-icon.png');
}
.PanelError {
color:White;
background-color: red;
background-image: url('../images/error-icon.png');
}
I suggest to place all your messages in a div, and set this div on abosule position on the top of the page and animate this div that holds all the messages. I think that you can even just place all your element in this div, and they arrange by him self the one afther the other.
<style type="text/css">
.Containerv {
position:absolute;
left:10px;
top:10px;
width:230px;
}
</style>
<div id="ContainerID" class="Container">
<div>First element</div>
<div>Second element</div>
<div>.... next elements</div>
</div>
and your javascript
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
var ScrollTopTimeOuts = [];
function PageLoaded(sender, args)
{
// keep this to indivitual close messages
$('.PanelNotificationBox').click(function () {
$(this).fadeOut('slow', function () {
$(this).remove();
});
});
clearTimeout(ScrollTopTimeOuts);
ScrollTopTimeOuts = setTimeout(function () {
$('#ContainerID').animate({ top: 0 }, 'slow');
}, 3000);
}
The approaches from #Yoshi and #Aristos had the disadvatage of breaking the AlwaysVisibleControls js-functionality. Thank you anyway :)
I ended with this solution what is working fine(leaving out the timer part):
var first=$('.PanelNotificationBox:first');
$('.PanelNotificationBox').each(function (index) {
$(this).animate({ top: '-=' + first.offset().top }, 'slow');
});