I want to clone the first-child button from #navCotainer and insert it after the last button.
Now the Problem is: The script kind of inserts the first child 3 times. what do I have to do to get ir right? And also, what am I doing wrong?
of course a link to the fiddle http://jsfiddle.net/ygjDR/ and the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span class="moveNav8 left8">left</span>
<div id="navContainer" style="width: 100%; overflow-y: auto;">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
<script type="text/javascript">
$(document).on('click','.moveNav8', function() {
if($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000, function() {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
});
}
});
</script>
<style type="text/css">
.button {
position: relative; float: left;
width:100px;
height:50px;
background-color:green;
margin-right:10px;
}
.moveNav8 {
position:absolute;
top:100px;
left:0px;
background-color:red;
width:40px;
height:40px;
}
.moveNav8.right8 {
left:100px;
}
</style>
Try this:
http://jsfiddle.net/gtttG/
You need to add a check for $(".button:animated").length === 0.
Animation callback is invoked for every item, appending a button 4 times. Instead execute callback only once after the last animation using deferred pattern:
$(document).on('click', '.moveNav8', function () {
if ($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000).promise().done(function () {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
})
}
});
http://jsfiddle.net/ygjDR/3/
Related
I am trying to move a div to a certain position. The following piece of code works fine:
$('#image1').click(function() {
$('#div1').animate({
'marginTop' : "+=160px"
});
});
However, I would like to animate the div to its original position once the image1 is clicked again. Does anybody have an easy to use idea for this? Thanks
Another way:
function firstClick() {
$('#div1').animate({
'marginTop' : "380px"
});
$(this).one("click", secondClick);
}
function secondClick() {
$('#div1').animate({
'marginTop' : "0px"
});
$(this).one("click", firstClick);
}
$("#image1").one("click", firstClick);
#div1 {
width: 200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">image1</div>
<div id="div1"></div>
You can use a class with css transition for this. Example code -
HTML
<div class="main">
Hello
</div>
CSS
.main {
background: green;
width: 100px;
height:100px;
margin-top:0px;
transition: margin-top 1s;
}
.set_margin {
margin-top:100px;
}
jQuery
$('.main').on('click', function() {
$(this).toggleClass('set_margin'); // toggle class on click event
})
You can implement it like -
$('#image1').click(function() {
$('#div1').toggleClass('set_margin');
});
Fiddle
You can add class to #img! its clicked first time, and remove on the second time, using is as an indicator of dive being clicked.
Example:
$('#image1').click(function() {
if($('#image1').hasClass("clicked")){
$('#div1').animate({
'marginTop' : "-=160px"
});
$('#image1').removeClass("clicked");
}
else{
$('#image1').addClass("clicked");
$('#div1').animate({
'marginTop' : "-=160px"
});
}
});
One more way
var toggle = true;
$('#image1').click(function() {
if (toggle) {
$('#div1').animate({
'marginTop': "+=160px"
});
toggle = false;
} else {
$('#div1').animate({
'marginTop': "-=160px"
});
toggle = true;
}
});
#div1 {
height: 50px;
width: 50px;
background: black;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="image1">Toggle</button>
<div id="div1"></div>
Here and example with codepen live editor
var move = true
$('#image1').click(function() {
if (move) {
$('#div1').animate({
'margin-left': "+=160px"
}, move = false);
} else {
$('#div1').animate({
'margin-left': "0px"
}, move = true);
}
});
#image1 {
width:100px;
height:100px;
background:red;
cursor:pointer
}
#div1 {
width:100px;
height:100px;
background:green;
margin-left:0px;
}
<div id="image1">ClickMe</div>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By using toggleClass we can achieve this animation.
<style type="text/css">
.animation{
margin-top:160px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#image1').click(function(){
$('#div1').toggleClass("animation");
})
})
</script>
Here is JsFiddle link animate
I want to add two arrows to the sides of the "boxes" divs (below) to cycle through the 3 divs.
Working JSFiddle: https://jsfiddle.net/HBHcC/11/
Can someone help me with this?
HTML:
<div class="container">
<div class="boxes">
<div class="one box">
</div>
<div class="two box">
</div>
<div class="three box">
</div>
</div>
</div>
CSS:
.container{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.box {
display:inline-block;
float: left;
width: 100px;
height: 100px;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:blue;
}
.boxes{
width:400px;
}
JS:
$(document).ready(function(){
$('.box').on("click", function() {
// Is this the last div, or is there a next one?
if ($(this).next().length) {
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
}
});
});
After adding arrows to the div, here is a new fiddle that should get you started:
$('.rightarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
https://jsfiddle.net/tx2yg06w/1/
Updated w/arrows moved out of divs:
$(document).ready(function(){
var animSpeed = 200;
$('.rightarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
});
https://jsfiddle.net/b56r0d72/
Errata has given you a good solution. Just wire up his code to the arrows in the snippet below.
Run snippet to view:
<html>
<body>
<style type="text/css">
.leftarrow, .rightarrow {
font-size: 48px;
color: blue;
text-decoration: none;
}
.rightarrow {
color: red;
float: right;
}
.content {
width: 200px;
padding: 4px;
border: 1px gray solid;
}
.box {
height: 200px;
border: 1px green solid;
}
</style>
<div class="content">
<div>
◀
▶
</div>
<div class="box">slide</div>
</div>
</body>
</html>
I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)
I'm trying to simulate an animate effect via jQuery that consists drag and drop as events to be fired. The code I use seems to be fine until the point when I have to swap divs by setting their display to none/block. Whenever I swap to the first div it perfectly executes the animation but when it gets on the 2nd div (after swapped) it doesn't fire the droppable event. I chose to have id selectors for the respective divs to instance the container of the droppable event hence to animate. I'm stuck and are out of any solution after searching numerous results so far. Thank you in advance. Here is my JS fiddle I prepared to easily understand my problem.
<html>
<head>
<style>
#wrapper {
border: 1px solid gray;
height:300px;
margin: 0 auto;
padding: 20px 20px 20px 20px;
position:relative;
text-align:center;
width:600px;
}
p {
display:inline;
font-family:Calibri;
font-size:20px;
color: #0b1207;
text-shadow: #63c9b8 0px 10px 10px;
}
#div1, #div2 {
border: 1px dotted green;
bottom:0;
margin-left:100px;
position: absolute;
}
#div1 {
background-color: orange;
height:200px;
width:300px;
}
#div2 {
background-color: green;
display:none;
height:100px;
width:300px;
}
#btnchange {
background-color:black;
border-radius:10px;
color: #fff;
height:35px;
margin-top:10px;
margin-left:100px;
position:absolute;
width:80px;
}
.example {
border: 1px solid red;
background-color: blue;
height:75px;
margin: 5px auto 0 ;
width:75px;
}
</style>
</head>
<body>
<div id='wrapper'>
<p></p>
<div id='div1'></div>
<div id='div2'></div>
</div>
<button id ='btnchange' type='button'>Change</button>
<div class='example'></div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
<script type="text/javascript">
var id = 1;
var parent = document.getElementById('wrapper');
var makina = parent.children[id].id;
$(function(){
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$('.example').draggable({
containtment: "#" + makina,
cursor: "pointer",
revert: true
});
$('#btnchange').click(function(){
if (id == 1)
{
document.getElementById(makina).style.display = 'none';
id = 2;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
else
{
document.getElementById(makina).style.display = 'none';
id = 1;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
console.log(makina);
});
$("#" + makina).droppable({
drop: function(){
doAnimate(makina);}
});
});
function doAnimate(container)
{
$('#'+ container).animate({height: '+=10px'}, 500, function(){
var message = container.clientHeight;
$(this).html(message);
});
}
</script>
</body>
</html>
http://jsfiddle.net/xoxxbr4t/6/
Your problem is you were only calling droppable once, on only one of the items. Once the .droppable() function is also put inside the change button click, it should work.
put this inside change function:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
example:
http://jsfiddle.net/xoxxbr4t/7/
You aren't binding droppable to your second element. You call this function once:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
Since your "makina" at this point is div1, that's the only thing that gets bound. I made that it's own function:
function setDroppable(makina) {
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
}
And then called it for both divs in your setup:
setDroppable('div1');
setDroppable('div2');
And now it works fine. Here's the updated fiddle
Thanks Michal indeed that was the answer but I think a good programmer would reduce the redundant snippet of code as far as I can tell those are duplicate lines from the $(document).ready() function. However it's a solution. And right after I read your post I decided to post the answer myself as it follows:
//Previous
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
//Current
$("#wrapper").droppable({
drop: function () {
doAnimate(makina);
}
});
Since I'm using nested divs I then realised that I could make the parent div droppable and just animate the child which is active(shown).
I'm using JavaScript to achieve a preview box when hovering over a list. I'll show you my code and then a live website on how it works, then I will say the problem.
HTML
<div id="content">
<div id="theDiv"><h1>Custom </h1></div>
<div id="theDiv1"><h1>Custom One</h1> </div>
<div id="theDiv2"><h1>Custom Two</h1></div>
<div id="theDiv3"><h1>Custom Three</h1></div>
<div id="theDiv4"><h1>Custom Four</h1></div>
<div id="theDiv5"><h1>Custom Five</h1></div>
<div id="theDiv6"><h1>Custom Six</h1></div>
<div id="theDiv7"><h1>Custom Seven</h1></div>
<ul id="nav">
<li><b>Austria ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Switzerland ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Explanation Page ></b> <br/>
<ul>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
</ul>
</div>
CSS
ul {
padding-left:10px;
list-style: none;
width:150px;
}
ul li {
position: relative;
left:10px;
width:148px;
}
li ul {
position: relative;
display:none;
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
line-height:2em;
height:2em;
padding:0 5px;
color:#666;
}
a:hover {color:#999;}
li ul li {width:139px; }
li.on ul { display:block; }
li.off ul{display:none; }
.linkhover:hover {text-decoration:underline; }
.linkxp:hover {text-decoration:underline; }
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 {
padding:10px;
float:right;
margin:0px 50px 0 0;
width:300px;
height:500px;
border:1px solid #000;
display:none;
}
JavaScript
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink1").hover(
function () {
$("#theDiv1").fadeIn();
},
function () {
$("#theDiv1").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink2").hover(
function () {
$("#theDiv2").fadeIn();
},
function () {
$("#theDiv2").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka").hover(
function () {
$("#theDiv3").fadeIn();
},
function () {
$("#theDiv3").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka1").hover(
function () {
$("#theDiv4").fadeIn();
},
function () {
$("#theDiv4").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka2").hover(
function () {
$("#theDiv5").fadeIn();
},
function () {
$("#theDiv5").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb").hover(
function () {
$("#theDiv6").fadeIn();
},
function () {
$("#theDiv6").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb1").hover(
function () {
$("#theDiv7").fadeIn();
},
function () {
$("#theDiv7").fadeOut();
}
);
});
Here is a link to a live view;
http://tubebackgrounds.co.uk/uni/demo/explanation.html#
As you can see, if you hover over the list style too quickly when they are being displayed, the other ones show up. I'm wondering if it is possible to use an if statement so only one
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
can be enabled at once? Or maybe a way to make the fadeIn and fadeOut quicker.
part of the issue is just your css. you have each of your divs (#theDiv, #theDiv1, #theDiv2, etc...) floated next to each other. so when you hide one, the next one will pop up in its place. if you set their display propety to display:block you will set what I am saying. What you really want is those divs to be stacked one on top of another, like a deck of cards, then fade then in and out. To achieve this try adding this css:
#content {
position:relative;
}
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 {
border: 1px solid #000000;
display: none;
height: 500px;
margin: 0 50px 0 0;
padding: 10px;
position: absolute;
right: 0;
width: 300px;
}
now you javascript should work fine. you could make the javascript a bit nicer by using #beerwin suggestion and using a callback. that way the div fading in will only fadin once the previous one has faded out
Use callback function:
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeOut(function(){
$("#theDiv1").fadeIn();
});
});
});