html:
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
what I want to do is to move the "animated" div to the center using Jquery.
my current js:
$(document).ready(function() {
$("#animate").animate({left: "+=512"}, 2000);
});
and now I'd like to make it to the center instead of just 512 px to the right.
I am assuming that the position of #animate is absolute. To center the element in its parent element just add the half of its parent's width minus the half of its own width to left:
$("#animate").animate({
left: $("#animate").parent().width() / 2 - $("#animate").width() / 2
}, 2000);
I created a demo using jsFiddle.
You can use it this way to center it to the screen,
Jquery
$(document).ready(function() {
$("#animate").animate({left: $(window).width() / 2}, 2000);
});
css
<style type="text/css">
div
{
height: 50px; width: 50px; background-color: Red;position:absolute; top:0; left:0;
}
</style>
html
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
</div>
Asuming you want to center to window, use this code:
$("#myJQUIDialog").parent().position({
my: "center",
at: "center",
of: window,
using: function (pos, ext) {
$(this).animate({ top: pos.top }, 600);
}
});
This center the dialog, and animate at the same time, resulting in a smooth centering
Here it is other example, maybe it should be useful.
I am using 'scroll' to make the effects.
Hope it could help or be useful :)...
<http://jsfiddle.net/p609dm7y/2/>
Related
This is the code I have currently. What I want to do, is when I click a button - Move up- I want the text in area3 to move up by 50px. But right now its moving all the way back up to the top. This is for a h/w assignment and we're doing pretty basic js/jquery if that needs to be said? :) Any help will be appreciated! Thanks!
$("#moveUp").click(function(event){
event.preventDefault();
var scrollPos = $(".area").scrollTop();
var newPos = scrollPos - 50;
$(".area3").scrollTop(newPos);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
blah blah
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
If I'm not wrong, I think this could help you:
$("#moveup").click(function(){
$(".area3").css({"margin-top":"-=50px"});
});
$("#moveUp").click(function(event){
window.scrollTo(0, window.scrollY - 50)
})
window.scrollTo(x, y) is a method which will scroll the screen to given coordinates where x is horizontal and y vertical. The top left corner of the screen is 0, 0. Than window.scrollY gets the current vertical position of the screen, you just need to subtract 50 to scroll 50px up from your current position
if you want just the text in area3 to move you should use some css to correctly implement this behavior with jQuery, using animate() to add some ease with smooth animation to the text.
$("#moveUp").click(function(event){
event.preventDefault();
$('.area3').animate({
position: 'absolute',
bottom: +50
}, 'slow');
})
.area3 {
position: relative;
height: 200px;
}
.area3 span {
position: absolute;
bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
<span>blah blah</span>
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
but if you want the whole window to scroll you can do that as following we using the same approach with different selectors body and html
$("#moveUp").click(function(event){
event.preventDefault();
$('body, html').animate({
scrollTop: -50
}, 500);
})
body, html {
height: 1000px
}
.area3 {
margin-top: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
<span>blah blah</span>
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
if you wanna to do it with window interface you can occur that by changing the above code to
$("#moveUp").click(function(event){
event.preventDefault();
window.scrollTo(0, -50);
})
with this approach using window you can make it moving smoothly like we did above you can't use jQuery animate() API javascript gonna raise an error don't do that.
I am trying to move a yellow square on the right side of the container, towards the left side of the container. The problem is that if it has no absolute position, it will not work.
Also I would like to know how to do the same animation with the second square, but that it starts to move one second after the first square. How can I do it?
http://jsfiddle.net/ohtkmes8/
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, 9000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="coolDiv">cool</div>
<div id="coolDiv2">other text</div>
</div>
Here you go with a solution https://jsfiddle.net/q2kgmvog/
$("#coolDiv").animate({"left":"0px"}, 9000);
#coolDiv{
position: absolute;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="coolDiv">cool</div>
<!--<div id="coolDiv2">other text</div>-->
</div>
Set the position:absolute; to the moving div & right: 0px;.
Animate it to left:0px; using jQuery animation.
Hope this will help you.
I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers
How can I center a DIV both horizontally and vertically immediately when the page loads?
I am currently using the following solution:
HTML:
<div class="container">
<div class="visitorSelect">
<a href="/visitorLog/boeing">
<div class="tile double icon bg-color-blue">
<div class="tile-content">
<i class="icon-plane"></i>
</div>
<div class="brand">
<span class="name">Employee</span>
</div>
</div>
</a>
<a href="/visitorLog/guest">
<div class="tile double icon bg-color-orange">
<div class="tile-content">
<i class="icon-group"></i>
</div>
<div class="brand">
<span class="name">Guest</span>
</div>
</div>
</a>
</div> <!-- visitorSelect -->
</div> <!-- container -->
JavaScript:
<script>
$(document).ready(function()
{
$(window).resize(function()
{
$('.visitorSelect').css(
{
position: 'absolute',
left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
});
});
// call `resize` to center elements
$(window).resize();
});
</script>
When I initially load the page, the DIV to center shows up at the right of the page and slightly below the center of vertical. However, when I resize the page manually it snaps to exactly where it should.
What additional steps do I need to take to cause the centering properly place the element at the time the document loads?
Set the .visitor element to absolute positioning before you calculate the width.
By default static divs will stretch to the full width of the parent; absolute divs will not. This is messing up your first calculation.
You should probably set the position css rule outside of the resize event function, in either CSS or in the ready() function. Here's a fix with the least changes to your code:
$(document).ready(function()
{
$(window).resize(function()
{
$('.visitorSelect').css(
{
position: 'absolute'
});
$('.visitorSelect').css(
{
left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
});
});
// call `resize` to center elements
$(window).resize();
});
Unless this is some kind of modal, or something unusual, I would not do this entirely with script when CSS Margin Auto will work for this. Here is a tutorial http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
Here is an example of the CSS:
div.container{
width:100%;
height:100%;
}
div.visitorSelect {
width:200px;
height:200px;
margin:auto;
}
You should position the div once the page loads:
<script>
$(document).ready(function()
{
$('.visitorSelect').css(
{
position: 'absolute',
left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
});
$(window).resize(function()
{
$('.visitorSelect').css(
{
position: 'absolute',
left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
});
});
// call `resize` to center elements
$(window).resize();
});
</script>
I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.