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/
Related
I'm trying to setup jquery scrolltop with previous and next button, so that the user can scroll within a scrollable div.
I came across this post LINK and was trying to setup for my application, but it doesn't seems to scroll to the top of the next/previous div.
Could anyone point out where the problem is and perhaps a solution to it? Any input would be appreciated, thanks.
CSS:
.image_holder {
display: block;
height: 100%;
}
.section{
position: relative;
height: 80vh;
background: rgba(255, 226, 57, 0.0);
overflow-y: scroll;
margin: 0 auto;
border: #000000 solid thin;
}
HTML:
<div class="page_scroller">
<ul >
<li class="list-unstyled col-lg-6 bg-primary">Up</li>
<li class="list-unstyled col-lg-6 bg-primary">Down</li>
</ul>
</div>
<div class="section" >
<div id="highlight-1" class="current image_holder">A</div>
<div id="highlight-2" class="image_holder ">B</div>
<div id="highlight-3" class="image_holder ">C</div>
<div id="highlight-4" class="image_holder ">D</div>
</div>
Jquery:
var scrollTo = function(element) {
console.log(element);
$('.section').animate({
scrollTop: element.offset().top
}, 500);
}
$('.next').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $next = $current.next().first();
if ($next.length!=0) {
$current.removeClass('current')
$next.addClass('current');
scrollTo($next);
}
});
$('.prev').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $prev = $current.prev().first();
if ($prev.length!=0) {
$current.removeClass('current')
$prev.addClass('current');
scrollTo($prev);
}
});
My JSFiddle
I think it's actually working as intended: it scrolls to the section, but it scrolls based on the top edge of the viewport, not based on the overflowed div.
Try replacing
$('.section').animate({
scrollTop: element.offset().top
}, 500);
with
$('.section').animate({
scrollTop: element.position().top
}, 500);
I currently have:
<div class="splash-wrapper">
</div>
<div class="wrapper">
</div>
<input type="button" runat="server" id="btnAccept" class="btn-input" value="ACCEPT" />
$(document).ready(function() {
$('.wrapper').hide();
$('#btnAccept').click(function(e) {
$(".splash-wrapper").hide("slide", { direction: "right"}, 200);
$(".wrapper").show().show("slide", { direction: "right" }, 200);
$('#btnAccept').hide();
});
});
demo
I'm having an issue adding sliding effect to the show method. I want the wrapper div to slide in right behind the splash-wrapper div, but right now the wrapper div slide in from the bottom.
You're calling the show method on the wrapper twice, that's why there's no animation for it.
$(".wrapper").show().show("slide", { direction: "right" }, 200);
-------
See here: https://jsfiddle.net/1q09d72b/6/
And if you want them to be on the same row, there are many ways to do it, here's one using absolute positioning and hidden visibility instead of display: none: https://jsfiddle.net/1q09d72b/8/
$(document).ready(function() {
$('.wrapper').css('visibility', 'hidden');
$('#btnAccept').click(function(e) {
e.preventDefault();
$(".splash-wrapper").hide("slide", {
direction: "right"
}, 200);
$(".wrapper").css('visibility', 'visible').show("slide", {
direction: "right"
}, 200);
$('#btnAccept').hide();
});
});
.wrapper {
background: red;
height: 50px;
width: 50px;
}
.splash-wrapper {
background: green;
height: 50px;
width: 50px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="splash-wrapper">
</div>
<div class="wrapper">
</div>
<input type="button" runat="server" id="btnAccept" class="btn-input" value="ACCEPT" />
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
please see this link
html
<div id="getitnow">btn 1</div>
<div id="getitnow">btn 2</div>
<div id="getitnow">btn 3</div>
<div id="getitnow">btn 4</div>
<div id="slideout">
<div id="containclickme">
</div>
</div>
css
#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
float:right;
}
#getitnow {
padding:10px;
border:1px solid #ccc;
width:100px;
}
script
$(function () {
// cache the sliding object in a var
var slideout = $('#slideout');
// click-me not clickme
$("#getitnow").toggle(function () {
// use cached object instead of searching
slideout.animate({
right: '0px'
}, {
queue: false,
duration: 500
});
}, function () {
// use cached object instead of searching
slideout.animate({
right: '-300px'
}, {
queue: false,
duration: 500
});
});
});
I am trying to get the slide out div to work no matter which button you click.
How ever it only slides out when you click the first button?
What am i doing wrong?
Use classes:
<div class="getitnow"></div>
cause we're not allowed to have multiple ID in the DOM.
and this is all you need:
LIVE DEMO
var $slideout = $('#slideout');
$(".getitnow").click(function () {
var inView = parseInt($slideout.css('right'), 10) < 0;
$slideout.stop().animate({ right: (inView ? 0 : -300) }, 500);
});
Use class instead of id,same id's cannot be used in the page.
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.