I'm trying to get a div to animate to the top of the window with by setting the css top value to 0px and changing it's css property from relative to fixed (it's covering another div that is above it). The properties change but it doesn't animate to the top it just goes in one frame. I'd really like to to ease to the top rather than jump.
Here's a fiddle of it http://jsfiddle.net/sedickinson/d4c9u/
Code below
HTML
<html>
<head>
<style>
#menu{
position: relative ; background-color: black; color: white;
text-align: center; width:100%; z-index: 9
}
#space{height:20px; position: relative; z-index: 5}
</style>
</head>
<body>
<div id="space"> </div>
<div id="menu">blah</div>
<script>
var menu = $("#menu");
menu.css('position','fixed').delay(400);
menu.animate({top: '0px'},1000);
</script>
</body>
</html>
The problem is that before you change the position to fixed the element has no 'top' value set. It's set to auto. You could set it to the offsetTop value first, then change the position to fixed, then animate it, like this:
http://jsfiddle.net/d4c9u/5/
var menu = $("#menu");
menu.css({'top': menu.offset().top, 'position': 'fixed'})
.delay(400).animate({top: '0'},1000);
Basically, you can't animate it from 'auto' to '0'.
http://jsfiddle.net/d4c9u/1/
with those two lines commented out , it works fine.
I changed 1000 to 2000 and you can clearly see it animating.
var menu = $("#menu");
menu.css('position','fixed').delay(400);
//menu.css('top', '0px');
//menu.css('position', 'fixed');
menu.animate({top: '0px'},2000);
http://jsfiddle.net/_mtr/LRa9Q/
Added a parent to #menu and #space and set #menu to position: absolute.
Related
Hi I'm trying to accomplish a crossfade effect for my banner images on my homepage. I'm doing this with jQuery and the fading effect is working fine.
This is my code:
<script>
function bannerImages(){
var $active = $('.banner-test .banner_one');
var $next = ($active.next().length > 0) ? $active.next() :
$('.banner-test img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>
As I said this is working fine however I've got one issue. In order for this to work I need to apply position:absolute to the .banner-test img class. Now I've also got another div within the .banner-test class to display some text on top of the banner image.
The code looks like this :
<div class="banner-test">
<img class="banner_one" src="../image.jpg" alt="" />
<img src="../image2.jpg" alt=""/>
<div id="text">
<p class="text1">Sample Text</p>
</div>
</div>
And the css for the #text :
#text {
position:absolute;
bottom:35px ;
left:10px;
width:70% ;
background-color:#104E8B;
font-size:1em;
color:white;
opacity:0.95;
filter:alpha(opacity=95); /* IE transparency */
}
.text1 {
padding:13px;
margin:0px;
}
.banner-test {
display: block;
position: relative;
}
So if I apply absolute positioning to the image it messes up the layout with the text (everything is pushed to the top of the page).
Can anybody think of a workaround for this?
EDIT
https://jsfiddle.net/ztrez888/1/embedded/result/ this is the fiddle - if position absolute is applied to the .banner-test img the text disappears
You said: (everything is pushed to the top of the page)
Its because your wrapper element .banner-test doesn't have a static height set. so when you apply a absolute position to the images in it .banner-test get shrink to height of the #text .text1.
Either set a height in the css:
.banner-test {
display: block;
position: relative;
height:200px; /* <--put the height of img */
}
or calculate it with jQuery:
$(document).ready(function(){
var arr = $('.banner-test img').map(function(){ // get the heights of imgs in array
return $(this).height();
}).get(),
h = Math.max.apply(Math, arr); // find out the greatest height in it.
$('.banner-test').css('height', h); // set the height here.
// run every 7s
setInterval('cycleImages()', 7000); // then cycle the images.
});
cycleImages() is been called in the setInterval and you have bannerImages() function on the page. I am assuming you have this cycleImages() function.
Updates:
#text {
position: absolute;
bottom: 30px;
left: 10px;
width: 100px;
background-color: #104E8B;
font-size: 1em;
color: white;
opacity: 0.95;
filter: alpha(opacity=95);
/* IE transparency */
z-index: 5; /* <----change these here*/
left: 10%;
top: 0;
}
Updated fiddle
which is positioned 113px from the top, to be on top when users are scrolling the page.
I know there is a similar question, but I am not sure where to put the js code. (Yes I am a newbie)
Old question:
How to "fixed" menu only when it get to the top?
Let me know if you want to see an example.
Best regards
Carsten
Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/
I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.
You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:
.menu {
width: 100%;
margin: 0px 10%;
display: block;
}
.menu.floating {
position: fixed;
top: 0;
left: 10%;
width: 10%;
}
Well, you can put you code in page head like:-
<html>
<head>
<script>
$(document).ready({
$(window).on('scroll', function(){
// instead of 113 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=113){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>
You don't need JS for this just use:
#idOftheDiv
{
position:fixed;
top:113px;
}
in your CSS.
When I apply position: fixed with Javascript my element moves a few pixels down and gets fixed in another position, some pixels down, instead of just staying where is was.
Why is this?
// html
<div id="container">
<div id="myDiv"></div>
</div>
// CSS
#container {
height: 2000px;
}
#myDiv {
margin-top: 50px;
width: 100px;
height: 50px;
background-color: #88a;
}
// Javascript
myDiv.style.position = 'fixed';
I find this behaviour at least in Chrome and FF.
http://jsfiddle.net/bSM8h/
When you apply position:fixed, also do:
pin.addEventListener('click', function () {
myDiv.style.position = 'fixed';
myDiv.style.top = '50px';
myDiv.style.marginTop = '0';
});
http://jsfiddle.net/bSM8h/2/
*edit*
By default browsers do body{padding:5px;} that is why a good idea is to html5boilerplate your css's
*end edit*
For some reason (see explanation here), margin-top also pushed the container with it. Once applied position:fixed, the container sprung back to the top of the page (lost the margin) and was positioned 5px from the top of page.
before position:fixed
after position:fixed
Just add this to your CSS:
body {
margin:0;
padding:0;
}
This will prevent the extra padding added by the browser defaults.
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.
You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony
I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.
You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.
Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)
No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)
Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.
If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>