I have animated ng-view. I'm using slideup animation, which requires absolute position of elements and also overflow-x: hidden to clip the content. In one sub-page I have to use scrollTo element functionality, but it doesn't work if both 2 values are specified.
Here is a main ng-view class which is required for correct animations
.wrapper {
position: absolute !important;
left: 0;
top: 0;
height: 100%;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
And structure:
<div class="wrapper ng-view-div">
<nav>
<ul>
<li><a href du-smooth-scroll="section-1" du-scrollspy>Section 1</a></li>
<li><a href du-smooth-scroll="section-2" du-scrollspy>Section 2</a></li>
<li><a href du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li>
</ul>
</nav>
<section id="section-1" style="background-color: red">
C
</section>
<section id="section-2" style="background-color: blue">
C
</section>
<section id="section-3" style="background-color: green">
C
</section>
</div>
I prepared plnkr to easily show how it looks like for now. Is there any other way to achieve scroll working but with this two values ?
Here, height:100% in the wrapper CSS class creates an issue. Please use the wrapper CSS class below.
.wrapper {
position: absolute !important;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
Related
I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I have a script in PHP where i'm defining the menus and navbars of the website. I have a top menu that when you scroll down the page, it gets fixed to the top of the page. I want to have a second menu on the left "glued" to the top menu. The way I have done it, it goes well when the top menu reaches the top of the page, it gets fixed with the left menu like I want. The problem is that if the top menu doesnt reach the top of the page (like if it's just a little bit of scroll), the left menu doesnt get stick to the top menu.
The top menu is the one that has "Inicio", "Instrucciones" etc. The left menu is the one that has "Nueva cata", "Nueva cerveza", etc.
This is the page at the beginning (0 scroll).
This is the page after the top menu reaches the top of the page (>200 scroll).
This is the page before the top menu reaches the top of the page (0 < scroll < 200).
As you can see in the third page, the left menu goes down with the scroll instead of going up with the top menu.
This is HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
This is CSS:
#menu_izq {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 252px;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba{
background-color: #503522;
width: 100%;
z-index: 1;
}
This is my JQuery:
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
$("#menu_izq").css('position','fixed').css('top', '35');
} else {
$('#menu_arriba').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$("#menu_izq").css('top', '250');
}
});
I know the problem is in the JQuery method but i don't get to write what I want. Thank you very much.
----- EDIT
The way I'm doing my website is with a menus.php where I write the top and left menu like this
<?php function izquierda() { ?>
<nav id="menu_izq" class="sidenav">
<div></div>
<p>Nueva Cata</p>
<p>Nueva Cerveza</p>
<p>Mis catas</p>
<p>Mis cervezas</p>
<p>Mis amigos</p>
</nav>
<?php } ?>
<?php function arriba() { ?>
<nav class="navbar navbar-expand-lg navbar-light bg-light"
id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<p>Inicio</p>
<a href="instrucciones.php" class="navbar-brand"><p>Instrucciones</p>
</a>
<p>Contacto</p>
<p>FaQ</p>
<div class="navbar-brand" style="width: 450px;"></div>
<a href="ajax/logout.php" class="navbar-brand"><p><i class="fas fa-sign-
out-alt"></i> Salir</p></a>
</nav>
So in the actual pages of the website, i just write:
<?php echo banner(); ?>
<?php echo arriba(); ?>
<?php echo izquierda(); ?>
<div class="main">
// HERE GOES THE CONTENT OF THE PAGE
</div>
I edit this to make you know that the reason of menu_izq is position: fixed is because like that, it shows the content of the page to the right of the left menu, and in position: sticky||relative, the content is shown at the end of the menu. I need to find a solution without changing (I think) the position: fixed of the menu_izq (left menu).
Looks like you are using Bootstrap. Currently, your left nav is initially set to position: fixed, I recommend using position: relative to your left nav initially so that positioning your nav elements can be relative to the height of the background image. Using Bootstrap, this solution wraps the left nav & the content in a flex container so that the content can be positioned relative to this container easily, since later on the navs are going to get position: fixed.
Basically on the script, just detect if the top of the scroll bar's Y position is already past the height of the background image element. If it is, assign the fixed position to the nav elements and adjust the content's position as needed relative to the container wrapping the left nav & the content. Check the CSS properties involving .navs-are-fixed to see how the navs are assigned the fixed position.
$(window).scroll(function() {
// innerHeight is used to include any padding
var bgImgHeight = $('.some-bg-img').innerHeight();
// if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to your nav elements
if ($(window).scrollTop() >= bgImgHeight) {
$('body').addClass("navs-are-fixed");
} else {
$('body').removeClass("navs-are-fixed");
}
});
#menu_izq {
height: 100%;
width: 200px;
position: relative;
left: 0;
top: 0;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba {
background-color: #503522;
width: 100%;
z-index: 1;
position: relative;
top: 0;
}
body {
background-color: #ffc75a !important;
height: 300vh; /* sample arbitrary value to force body scrolling */
}
.some-bg-img {
background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.navs-are-fixed #menu_arriba {
position: fixed;
}
.navs-are-fixed #menu_izq {
position: fixed;
top: 72px; /* the height of your top nav */
}
.navs-are-fixed .some-sample-content {
position: absolute;
top: 72px; /* the height of your top nav */
left: 200px; /* the width of your left nav */
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<body>
<div class="some-bg-img"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<div class="d-flex h-100 w-100 position-absolute">
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
<div class="some-sample-content">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</div>
</body>
If you really must keep your fixed positioning on your left nav, then you are going to have to compute it's top value based on on the height of both the banner & the top nav, such that if the top of scroll bar's Y position is past the height of the banner, the top value of the left nav will be equal to the height of the top nav - so you push it down so that they don't overlap. If the top of the scroll bar's Y position is not past the height of the banner, the top value of the left nav is going to be equal to the difference of the height of the banner & the top nav minus the top of the scroll bar's Y position.
$(window).scroll(function() {
// innerHeight is used to include any padding
var bgImgHeight = $('.some-bg-img').innerHeight();
var topNavHeight = $('#menu_arriba').innerHeight();
var leftNavInitialCssTop = bgImgHeight + topNavHeight;
// if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to the top nav
if ($(window).scrollTop() >= bgImgHeight) {
$('body').addClass("navs-are-fixed");
$("#menu_izq").css("top", topNavHeight);
} else {
$('body').removeClass("navs-are-fixed");
$("#menu_izq").css("top", leftNavInitialCssTop - $(window).scrollTop())
}
});
#menu_izq {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 252px;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba {
background-color: #503522;
width: 100%;
z-index: 1;
top: 0;
}
body {
background-color: #ffc75a !important;
height: 400vh; /* sample arbitrary value to force body scrolling */
}
.some-bg-img {
background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
height: 179px;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.navs-are-fixed #menu_arriba {
position: fixed;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="some-bg-img"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
You should be able to have that working with just CSS and no javascript using position: sticky attribute.
Make both elements position: sticky, the top nav should have a top: 0 property and the side nav should have a top: x property where x is the height of the top nav.
That should be enough and you should be able to remove the js code.
Read more about sticky position here https://developer.mozilla.org/en-US/docs/Web/CSS/position
why you want to do this? you can move the top menu and side menu and text container together in one container to be relative with each other, set the text box container fixed height in percent and set its overflow-y to auto. make the whole container animatable like the top menu. this will solve your problem.
The side and top sliding <nav> elements cannot interact correctly with the page content. Especially the lateral <nav> with vertical sliding according to many changing rules - sit, follow, slide against, stick apart. It's too much at once.
Workaround 1 - smooth - top sliding, side fixed (anchors corrected)
I'm afraid this is not the solution to your dreams. Works smooth and easy as it avoids the crush point.
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
} else {
$('#menu_arriba').css('position','relative'); /* fixed */
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
}});
*{ box-sizing: border-box}
body{
margin: 0;
text-align: center;
z-index: -1;
}
#pilar{ /* added fix */
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
#menu_izq {
background: 0; /* fixed */
width: 200px; /* padding-top: 200px; removed */
position: fixed;
top: 200px; /* fixed */
left: 0;
bottom: 0;
z-index: 0; /* fixed */
}
#menu_arriba{
background: #503522;
width: 100%;
position: relative; /* added fix */
z-index: 1; /* added fix */
}
p{ margin: 100px 100px 100px 250px; z-index: -1 }
a{ display: inline-block; width: 150px; border: 1px solid white; text- align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px; z-index: 1; z-index: 9;}
<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div> <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div> <!-- needed or redundancy? -->
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i>Salir
</nav>
<nav class="sidenav" id="menu_izq">
Nueva Cata
Nueva Cerveza
Mis catas
Mis cervezas
Mis amigos
</nav><p>... </p><p> ...</p>
Workaround 1.1 - smooth with a nice view
only changes
#menu_arriba{
background: 0;
width: 100%;
position: relative; /* added fix */
z-index: 0 /* added fix */
}
#hole{
background: #503522;
height: 100%;
margin-left: 200px;
width: auto;
}
<div id="pilar"></div> <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div id="hole">
<div class="navbar-brand" ></div>
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i> Salir
</div></nav>
Workaround 2 - dirty - hide or cover up side effects
If you still insist - not so smooth, slightly bouncy menu. Your dreams are also not coming true, but there are no visible holes. Here you have it:
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
$('#menu_izq').css('position','fixed').css('top','0');
} else {
$('#menu_arriba').css('position','initial');
$('#menu_izq').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$('#menu_izq').css('position','initial').css('top', '200');
}});
*{ box-sizing: border-box}
body{
margin: 0;
text-align: center;
}
#menu_izq {
background: 0;
height: auto;
width: 200px;
padding-top: 100px;
}
#menu_arriba{
background: #503522;
width: 100%;
z-index: 1
}
#pilar{
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
p { margin: 100px 300px; position: relative; bottom: 400px}
a{ display: inline-block; width: 150px; border: 1px solid white; text-align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px;}
<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div> <!-- what for it is? needed? -->
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i>Salir
</nav>
<nav class="sidenav" id="menu_izq">
Nueva Cata
Nueva Cerveza
Mis catas
Mis cervezas
Mis amigos
</nav><p>... </p><p> ...</p>
There are other minor shortcomings in your code.
<p> .... </p> may not be a crime, but neither is it good. <p> has its own characteristics and is not a stiffener or pillar - I fixed it with css.
Above you have whole code I used - as a hint and explanation. Resize elements to your needs and taste. Hope you like it
cheers
First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.
z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>
For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/
I'm having a problem trying to get both a fixed top navigation and a sticky footer to work, without hiding the footer 40px off the bottom. The jquery script i'm using is meant to fix this, but it doesn't. I can't use bootstrap or anything similar. So this is my only option.
The HTML
<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li><span>Digital Media</span></li>
<li><span>Web Development</span></li>
<li><span>Journalism</span></li>
<li class="last"><span>Information & Communications</span></li>
</ul>
</li>
</ul>
<div id="wrapper">
<header role="banner" id="banner">
<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>header1</h1>
<h2>header 2</h2>
</div>
</div>
</div>
</header>
<div class="content">
<main role="main" id="skipnav">
<p>Intro paragraph</p>
</main>
</div>
</div>
<footer class="footer" id="footer">
<div class="container2">
<p>footer</p>
</div>
</footer>
</div>
The Jquery script -
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
Css can be found here
The full website can be found here
Thanks in advance.
you can do using css only no need to use jquery
#footer {
bottom: 0;
position: fixed;
}
nav {
top : 0;
position: fixed;
}
You need to place footer inside wrapper and use position fixed for the footer instead of position absolute; Furthermore, the only reason to use jQuery to calculate the padding is if your footer does not have fixed height (now you use height: 40px). You also need to give to your wrapper padding top = height of your header.
Try this:
#footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: auto;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
/* padding: calculated 0 calculated; */
#container {
position: relative;
width: 100%;
height: 100%;
}
Few things to change:
body was having padding-top:40px; which is making the body to overflow. So remove that padding from body.
and #wrapper need to be:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
remove that jquery part and padding-bottom line from wrapper.
and make footer to be position: fixed;
I have my HTML & CSS below.
I have a div with a span inside. Everything is lined up under the default home.
I want when I move the mouse over About(id=Hover2) it moves the div (id=divHolder) to the correct background position listed below. Also if I click About.
The correct background position of that div is active.
Thanks!
HTML:
<div id="nav">
<div id="divHolder">
<span id="highlight"></span>
</div>
<ul class="clearfix">
<li><a id="Hover1" href="Default.aspx">Home</a> </li>
<li><a id="Hover2" href="About.aspx">About</a> </li>
<li><a id="Hover3" href="">Profile</a> </li>
<li><a id="Hover4" href="">News</a> </li>
<li><a id="Hover5" href="">Contact</a> </li>
</ul>
</div>
CSS:
#divHolder {
height: 62px;
left: 0;
overflow: hidden;
position: absolute;
top: 17px;
width: 505px;
}
#highlight {
background: url("/Styles/background-highlight.png") repeat scroll 0 0 transparent;
display: block;
height: 62px;
left: 0;
position: absolute;
top: 0;
width: 124px;
}
#divHolder.Hover1 {background-position:0px 0px}
#divHolder.Hover2 {background-position:0px 80px}
#divHolder.Hover3 {background-position:0px 160px}
#divHolder.Hover4 {background-position:0px 240px}
#divHolder.Hover5 {background-position:0px 320px}
I got this working for you here:
http://jsfiddle.net/xgkHH/
This is the jQuery I had to use:
$("#nav li").on("mouseenter",function() {
classtoadd = $(this).children("a").attr("id");
$("#highlight").addClass(classtoadd);
});
$("#nav li").on("mouseleave",function() {
// remove all classes.
$("#highlight").removeClass();
});
I didn't have to change your HTML at all, but here's what I did to your CSS:
#highlight.Hover1 {background-position:0px 0px;}
#highlight.Hover2 {background-position:0px 80px;}
#highlight.Hover3 {background-position:0px 160px;}
#highlight.Hover4 {background-position:0px 240px;}
#highlight.Hover5 {background-position:0px 320px;}
Just make sure you can actually hover the element. Using your code, it looks like the span covers some of the links which prevented hovering.
$('#Hover2').hover(
function(){
$('#divHolder').addClass('Hover2');
},
function(){
$('#divHolder').removeClass('Hover2');
}
);
$('#Hover2').on('click', function(){
$('#divHolder').addClass('Hover2');//or whatever you want to do on click
});