do you know how to move the div.move from left to right 1px per second? And stop the move of the div when the div arrives to .stop div?
https://jsfiddle.net/z2mjvbss/4/
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
</div>
</div>
<button id="go">
go
</button>
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "+=5000px",
height: "toggle"
}, 5000, function() {
});
Change your JS code to following
$( "#go" ).click(function() {
var stop = $(".stop").offset().left;
$( ".move" ).animate({
opacity: 0.25,
left: stop-($(".stop").width()+$(this).width()),
height: "toggle"
}, 5000, function() {}
);
});
And your CSS to this
.content {
width: 500px;
height: 500px;
margin: 10px;
border: 10px solid green;
background:yellow;
overflow-x:scroll;
padding:10px;
position: relative;
}
.stop{
float:right;
background:brown;
}
.move{
left:0;
background:brown;
height:100%;
width:10px;
opacity:0.2;
position: absolute;
}
Fiddle
Here's the modified fiddle
https://jsfiddle.net/z2mjvbss/6/
You can stop it at a particular location by modifying the final value of left.
Code for backup
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "200px",
}, 5000, function() {
});
});
You can try this......
HTML
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
move
</div>
</div>
<button id="go">
go
</button>
CSS
.content{float:left; width:100%;background:#FFFFFF;}
.move{float:left;width:100px;background:black;color:white;}
.stop{float:right;width:100px;background:red;}
JS
$("#go").on("click",function(){
goOnePixelRight();
});
function goOnePixelRight(){
var top=$(".move").offset().top;
var left=$(".move").offset().left;
$(".move").offset({top:top,left:left+1});
if(parseInt($(".move").offset().left)!=parseInt($(".stop").offset().left)){
setTimeout("goOnePixelRight();",1000);
}
}
You can achieve it using requestanimationframe. The below article explains it more with an example. Here it moves 7px , but you can change it to 1px.
https://link.medium.com/JrgbH9gdf8
Related
I have looked through same questions on this topic but somehow suggested solutions do not work for me :/
Problem is that divs get moved from #box1 to #box2 only once. If detach() used then divs are clickable in #box2 but get rearranged when clicked. If remove()used divs are not clickable in #box2 at all (event listener gone?). I have a feeling that the process of moving the divs is somehow not really complete and I ether have duplicates around in DOM or moved divs disappear entirely and do not react to clicks.
I tried detach(), remove() and appendTo() in various combinations and the best I can get is in the fiddle below
http://jsfiddle.net/uoz3t914/13/
$('#box1 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).remove().appendTo('#box2');
});
$('#box2 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
In your case you have to use the Event Delegation
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
You attach the event to the parent, that propagate it to the children, and then any time that you attach the event, put an off() to detach it.
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2{
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="box1">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2">
</div>
You can move them between the boxes with:
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2 {
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1">
<div class="item" id="i1"></div>
<div class="item" id="i2"></div>
<div class="item" id="i3"></div>
</div>
<div id="box2"></div>
This uses .on()'s event delegation syntax to handle the elements, and a ternary operator to determine which box the element exists in.
Use this html:
<div id="wrapper">
<div id ="box1" class="container">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2" class="container">
</div>
</div>
and this javascript
$('.item').on('click', function(){
var index = $("#wrapper > .container").index($(this).parent()),
maxIndex = $('#wrapper > .container').length,
nextIndex = (index + 1) < maxIndex ? (index + 1) : 0;
$(this).appendTo($('#wrapper > .container').eq(nextIndex));
});
in your fiddle to move boxes between any number of containers
You may also add Box3, Box4 (with class .container) etc. into the "#wrapper div", you may do it dynamycally
I have been trying to add focus function to my specific input i.e want to show a div on focus with class as : .search_by_name but it's not working so if you people please take a look at my code that what I am doing wrong please?
Here is code as :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
background: #474747;
display: none;
width: 297px;
margin-left: 179px;
margin-top: 15px;
height: 15px;
position: absolute;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.arrow-up_search_by_business_name {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #474747;
position: relative;
top: -8px;
left: 20px;
}
.search_by_business_name_text {
background: #99cc33;
font-family: Arial;
font-style: italic;
color: #fff;
padding: 7px;
font-size: 14px;
text-align: left;
padding-left: 15px;
margin-top: -4px;
}
</style>
<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">
<div class="search_by_business_name">
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>
Please have a look at live version as : http://huntedhunter.com/waseem_jobs/pacific_site/index.html
As I explained in the comments, you should not use .next() as the element you are looking for is not the next sibling of the target element.
Also .focus() takes only one function as argument, you need to use .blur() to hide the element
$("#search_by_business_name_input").focus(function () {
$(".search_by_business_name").show();
}).blur(function () {
$(".search_by_business_name").hide();
});
The script should be inside the <body> tag.
In your page the script is after </body></html>
<script>
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
</script>
</body>
</html>
Edit:
Of course it does not work.
Have you read the documentation for $.next()?
.next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Replace this:
$( this ).next( ".search_by_business_name" ).css( "display", "block" );
With:
$( ".search_by_business_name" ).css( "display", "block" );
Edit2:
Wrap your code in $.ready:
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
You should put
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( ".search_by_business_name" ).show();
});
</script>
at the bottom of body element, because when excute this code,
$("#search_by_business_name_input" ) = []
or
you can write it like this
$(document).on("focus", "#search_by_business_name_input", function(){
$( ".search_by_business_name" ).show();
})
I'm trying to reproduce this and it's not working:
http://www.templatemonster.com/demo/44543.html
Here is my result: http://webs-it.com/callstar/
What I want is to navigate through the menu like the example I posted. I'm kinda new to javascript and I didn't manage to make it work.
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#block1 {
float:left;
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#block2 {
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#logo {
margin:0 auto;
width:502px;
height:259px;
margin-top:144px;
}
</style>
</head>
<body>
<div id="continut">
<div id="header">
<div id="social">
<img src="images/social/facebook.png" name="facebook" alt="."> <img src="images/social/ytube.png" name="ytube" alt="."> <img src="images/social/en.png" name="en" alt="."> <img src="images/social/cz.png" name="cz" alt=".">
</div>
</div>
<div id="block1">test test</div>
<div id="block2">test test</div>
<div id="logo" >
<img src="images/logo/logo_homepg.png">
</div>
<div id="meniu">
<img src="images/meniu/about.png" id="go1" name="about" alt="."><img src="images/meniu/photo.png" name="foto" id="go2" alt="."><img src="images/meniu/video.png" id="go3" name="video" alt="."><img src="images/meniu/ref.png" name="ref" id="go4" alt="."><img src="images/meniu/contact.png" name="contact" id="go5" alt=".">
</div>
</div>
<div id="footer"></div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate({ margin: "100px 1558px" }, { queue: false, duration: 700 });
});
</script>
</body>
That was a fun challenge.
I created a similar effect for you here.
Check out the jsFiddle DEMO
P.S: All, HTML, CSS, and Javascript is new.
HTML
<div id="container">
<div id="content">
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
</div>
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
CSS
*{margin:0; padding:0; font-family: Helvetica}
#container{
width:100%;
height:600px;
overflow:hidden;
float:left;
background: url(http://webs-it.com/callstar/images/covers/electric_guitar2.jpg) center no-repeat;
}
p {
font-size:25px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color:#666;
margin-top:22%;
}
#content {
width:100%;
height:200px;
margin: 50px auto 0;
position:relative;
overflow:hidden;
}
#content > div {
display:block;
width:400px;
height:200px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;,
top:40px
}
#nav {
list-style:none;
display:table;
margin:0 auto;
position:relative;
}
#nav li {
display:table-cell;
align:cen
display:inline-block;
padding:20px
}
#nav a {color:#fff; text-decoration:none;}
JS
$(function() {
var content = $('#content'),
contentHeight = content.height(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.height(100);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide down animation once
if (count === 0) {
content.animate({'height': contentHeight }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
Let me know if you have any questions.
I have a horizontally centered div #box1 that has margin: 5px auto that has to slide to the left and off the screen, while #box2 slides into the screen from the right, when the button .class is clicked on. I've seen how its done for absolutely positioned divs, now how do you do it if its not?
HTML Structure
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
Failed attempt
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({
left: '150%',
}, 'slow' );
});
Is this the effect you're looking for: jsFiddle example.
jQuery:
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({ left: '-500px' }, 'slow');
$("#box2").animate({ left: '0px' }, 'slow');
});
CSS:
#box1, #box2 {
margin: 5px auto;
border: 1px solid #999;
position:relative;
}
#box2 {
left:500px;
}
#container {
overflow:hidden;
}
HTML:
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
If you want to slide out a dive you could use jQuery UI hide methods
$(".button").click(function() {
$("#box1").hide('slide', {
direction: "left"
}, 2000);
});
and you can do the same to slide in
$("#box2").show('slide', {
direction: "left"
}, 1000)
Try
$(".button").click(function() {
$("#box1").animate({
marginLeft: '-150%',
}, 'slow' );
});
If you needed to, it wouldn't be difficult to absolutely position the element in the same spot it was before animation.
var elm = $("#box1");
var position = elm.position();
var cssObj = {
'position' : 'absolute',
'top' : position .top,
'left' : position.left
}
elm.css(cssObj);
This might work for you.
$(".button a").click(function() {
var $docWidth = $(window).width();
var $boxOffset = $('#box1').offset();
$("#box1").css('marginLeft', $boxOffset.left);
$("#box1").animate({
marginLeft: $docWidth
}, 'slow');
});
CSS:
#container: { overflow: hidden; }
http://jsfiddle.net/dZUXJ/
I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.
Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});
You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/
this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);