I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.
it is basically like a setup wizard that you see while installing a software.
so here is the mark up:
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
</div>
and here is the JQuery for both buttons:
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.
you can also have a glance at this fiddle
Thank You
You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;
HTML: Change id to class for previous and next buttons
<div id="container">
<div id="box1" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
<div id="box2" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
</div>
jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.
$('.nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('.prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
JSFiddle Demo
you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}
JSFiddle link
You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version.
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
background-color: white;
height: 500px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box2 {
left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt1">Next</button>
<button id="prv1">Previous</button>
</div>
</div>
Related
I am trying to display a message at the bottom when someone click on checkbox.
<style>
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
}
</style>
<div class="col-md-12" id="compare" style="stick; display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">
My message
</span>
</div>
</div>
<script>
function showProductsCompare() {
document.getElementById('compare').style.display = "block";
}
</script>
until now, all it's correct, the message appear on the page when the code is inserted
but I tried to make a sticky message like this page https://www.homedepot.com/s/french%2520door%2520refrigerators?NCNI-5 (click on the checkbox.
I don't find example or to make that.
Thank you.
This will do the work:
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
buttom: 0;
}
You will need to give the div a class of "stick":
<div class="col-md-12 stick" id="compare" style="stick; display:none;">
I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it here?
$(".mybox").on('click', function() {
$(this).css('background', 'red');
$(this).detach();
$(this).appendTo("#two");
var p = $("#two");
var position = p.position();
TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});
#one {
width: 200px;
height: 200px;
float: left;
background: rgba(255,40,100,0.5);;
}
#two {
margin-left: 300px;
width: 200px;
height: 200px;
background: rgba(0,240,10,0.5);
}
.mybox {
float:left;
width: 50px;
height: 50px;
background: rgb(255,0,0);
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="content" class="mybox">
1
</div>
<div id="content" class="mybox">
2
</div>
<div id="content" class="mybox">
3
</div>
<div id="content" class="mybox">
4
</div>
<div id="content" class="mybox">
5
</div>
</div>
<div id="two">
</div>
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
I am trying to create a push animation, where one element 'pushes' the other.
I have 4 divs in a parent div 2 are boxes that I want the push animation happening on, and 2 'button' divs. The wrapper div doesn't have a set height.
The problem is, the second box div gets placed under the first box div. How can I get them to be right and left of each other, not one on top of the other.
Also, I need a bit of help with the animation. How can I get one box div to 'push' the other?
This is what I mean by 'push' effect:
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#leftBox').animate({
left: '-200px'
});
$('#rightBox').animate({
left: '-200px'
});
});
$('#rightBtn').click(function() {
$('#leftBox').animate({
left: '200px'
});
$('#rightBox').animate({
left: '200px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
}
#leftBox,
#rightBox {
width: 400px;
height: 100px;
display: inline-block;
position: relative;
}
#rightBox {
left: 400px;
}
#leftBtn,
#rightBtn {
width: 200px;
height: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div><div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
You can use display:inline-block on #leftBox & #rightBox to place them side by side. For animation, wrap them with another div(#wrapper) & change the position of #wrapper on click .
Example:
JSFiddle
HTML:
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
</div>
JS:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
I want to make a grid 3x3, but problem is that the height on some of the cells will expand with content.
Apart from those height marked with the red arrows, the rest is fixed px.
I made a 3x3 grid with divs to test:
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>
#container {
width: 300px;
margin: 0px auto;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
}
But as soon as I change one height they jump out of place.
Any idea?
It looks to me like you want columns.
A structure like this:
<div class="column-thing">
<div class="left-thing">
<div>A</div>
<div>C</div>
</div>
<div class="right-thing">
<div>B<br>B</div>
<div>D</div>
</div>
</div>
And some absolute positioning:
.column-thing {
position: relative;
}
.left-thing {
left: 0;
position: absolute;
right: 50%;
}
.right-thing {
left: 50%;
position: absolute;
right: 0;
}
Voilà.
You can also use lists (ul/ol, li) (without javascript)
<ul class="list">
<li>
<ul>
<li><div>1<br/>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>
</li>
...
</ul>
http://jsfiddle.net/xKjNG/
If you want to ensure that there's three divs in each row, you need to ensure that there's actually a div enclosing each set of three divs...
Try this:
<style>
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
outline: 1px solid black;
}
.clear_float {
clear: both;
}
</style>
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div><div class = "clear_float"></div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div><div class = "clear_float"></div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div><div class = "clear_float"></div>
</div>
I'm taking it that the content shouldn't be table based which is why you don't want to use a table.
But an idea would be to use a faux table:
<div class="table">
<div class="tr">
<div class="td">
</div>
<div class="td">
</div>
</div>
</div>
Then on .table add CSS display:table and on .td add CSS display:table-cell.
The naming convention helps work with the code because you'll be used to working with a table's tags structure.
I made a quick example (needed more work than I thought it would): http://jsfiddle.net/cyv6y/1/
needs tidying up a bit but the concept works.