I'm currently having difficulty getting the footer of my website to work properly. I think it's because of my fixed positioned header and container divs but I need them to be fixed to stay on top when scrolling. I'm not sure how to take this into account for the footer to appear at the bottom when the container div is empty.
HTML:-
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">
</div>
</div>
<script>
$(document).ready(function() {
$('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );
});
</script>
<div id="navbar">
<div id ="navbarContent">
</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
CSS:-
#container{
width:960px;
margin:auto;
overflow:hidden;
}
#wrapper{
min-height:100%;
position:relative;
}
#navbar{
width:100%;
height:40px;
margin:auto;
background-color:#4e8885;
position:fixed;
top:120px;
padding:0px;
}
#header{
width:100%;
height:120px;
margin:auto;
background-color:#8bbcba;
position:fixed;
top:0px;
}
#footer{
width:100%;
min-height:20px;
margin:auto;
background-color:#8bbcba;
position:absolute;
bottom:0;
left:0;
}
In your example using fixed heights, it's not necessary to dynamically calculate the margins. You should just be able to set the margins of container to match the totals of your headers and footer for margin-top and margin-bottom respectively. See this jsFiddle: http://jsfiddle.net/9Jdrr/
If you need to dynamically calculate it, you should be able to do it based on this arrangement.
Related
I want to prevent scrolling other DIV of scrolling DIV.
HTML:
<div id="body">
<div class="long">
<div class="half-height" style="background-color:blue"></div>
<div class="half-height" style="background-color:yellow"></div>
</div>
<div id="left-side" class="side">
<div class="long">
<div class="half-height" style="background-color:red"></div>
<div class="half-height" style="background-color:green"></div>
</div>
</div>
<div>
<div id="right-side" class="side">
<div class="half-height" style="background-color:black"></div>
<div class="half-height" style="background-color:white"></div>
</div>
</div>
CSS:
#body {
height:300px;
width:300px;
background-color:white;
overflow:auto;
position:relative;
}
.long {
height:500px;
}
.half-height {
height:50%;
}
.side {
height:100%;
position:absolute;
width:30%;
background-color:white;
top:0;
overflow:auto;
}
#left-side {
left:0;
}
#right-side {
right:0;
}
Left-side DIV have to scrollable without body scrolling.
(When left-side's scrollbar touch to end, body start to scroll, I want to fix this)
When I wheel scroll in right-side DIV, body is not to be scrolled
Here's my fiddle https://jsfiddle.net/vuju6pgb/
You can add a css on the mouseenter event to set the overflow to hidden and switch it back go auto on the mouseleave event.
$("#left-side").mouseenter(function(){
$("#body").css("overflow", "hidden");
}).mouseleave(function(){
$("#body").css("overflow", "auto");
});
You can do the same with #body and body as well.
Here is the updated fiddle https://jsfiddle.net/vuju6pgb/4/
I'm trying to create a parallax effect on a div but it jumps the the top of the page as i start scrolling. The top value is changes to 0 immediately
HTML
<div class="container">
<div class="top">
</div>
<div class="middle">
</div>
<div class="slider" id="rowSlider">
</div>
<div class="content">
</div>
</div>
JS
function parallax(){
var prlx_lyr_1 = document.getElementById('rowSlider');
prlx_lyr_1.style.top = -(window.pageYOffset / 2)+'px';
}
window.addEventListener("scroll", parallax, false);
CSS
.container{width:100%;}
.top{position:fixed; top:0; left:0; width:100%; z-index:1; background:#000; height:50px;}
.middle{width:100%; height:150px; background:red; width:100%; position:relative; z-index:2; margin-top:50px;}
.slider{width:100%; position:fixed; height:200px; background:orange; left:0; top:200px; z-index:3;}
.content{width:100%; position:relative; z-index:4; height:200px; background:blue; margin-top:400px;}
JSFIDDLE DEMO
Thanks to dann:
Initial position for .slider is 200px. solution is:
prlx_lyr_1.style.top = (200-(window.pageYOffset / 2))+'px';
https://jsfiddle.net/rd9kot8p/3/
Hi is it possible to fix the logo position when #body is riched. Basically I would like to do something like this to have logo which is in the middle of the front page and when scroll down the logo to move as well and to get smaller until rich the #body then it has to stack on top like fixed menu.
Here is a fiddle [http://jsfiddle.net/jaQFZ/200/][1]
Code is like:
HTML
<html>
<body>
<header>
<div data-0="top:40px;" data-600="top:1100px;width:50px;" id="logo"> Logo </div>
</header>
<section id="body"> Body </section>
</body>
</html>
CSS
body, html{
height:100% !importatn;
}
header{
position:relative;
height:100%;
background:#c00;
}
#logo{
position:absolute;
margin:0 auto;
border:1px solid;
width:100px;
height:100px;
margin-left:50%;
}
#body{
background:#ccc;
height:500px;
}
JS
skrollr.init()
Thanks for any help.
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.
LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)
<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/
http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...