Fixed position and %width + not overlapping the footer - javascript

There is a project page of two Grids, a grid that showcase images on the left side (width: 65%) and anther grid that show information about the project on the right side (width 35%).
Here is the link to a Live Preview: http://meeped.co.uk:93/portfolio/ambition-world.html
How to change the information grid that is on the right side to be fixed and scroll with the page? and to stop before hitting the footer.
Note: I have tried to change the position to Fixed, it make it scroll but the grid width keep stretching with the page and overflow the width of the page which is 1030px.
I have tried lot of JavaScript snippets to make it scroll and stop at the footer, but none worked. What would you recommend? without using a plugin.
The HTML of the page is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="../assets/css/core.css">
<link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img src="../assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li>Contact Me</li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
<!--Website Content--><div id="Page">
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">LOAI Design Studio</p>
</div>
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
</div>
</div>
</div>
</div>
<!--Footer Section--><footer>
<div id="footer-sectionA">
<div class="footerContent">
<h3><strong>Want to get started?</strong></h3>
<p>I offer free, no-obligation consultation, will review your project <br> & discuss ways to achieve your goals within your budget & time frame.</p>
<p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&v=1afd868e">Schedule an Appointment Now</a></p>
</div>
</div>
<div id="footer-sectionB">
<div class="footerContent">
<p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.Terms & Conditions.</p>
</div>
</div>
</footer>
</div><!--The End Of The Page-->
<!--Scripts Links-->
<script type="text/javascript" src="../assets/libraries/jquery.js"></script>
<script type="text/javascript" src="../assets/js/slider.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script src="../assets/libraries/modernizr.js"></script>
<!--GoSquared Scripts-->
<script type="text/javascript">
var GoSquared = {acct: "GSN-035800-K"};
(function(w){
function gs(){
w._gstc_lt = +new Date;
var d = document, g = d.createElement("script");
g.type = "text/javascript";
g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
})(window);
</script>
</body>
</html>
The CSS
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.imagesGrid p {
border-top: 1px solid #E8E8E8;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
width: 35%;
margin-top: 28px;
padding-left: 45px;
}
.detailsBox p {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p, h3 {
vertical-align: bottom;
}
.detailsBox a {
vertical-align: middle;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #E8E8E8;
margin: 0;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a{
background-color: #E8E8E8;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover{
color: #FFFFFF;
background-color: #456087;
}
.detailsBox div br {
display: none;
}
.shareButtons a {
margin-left: 3px;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.shareButtons a span {
display: none;
}
Also Here is a JS I am using:
//Scroll-up button//
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600); return false;
});

So, the issue is that, by adding position:fixed; you are positioning the sidebar relative to the viewport (which is the way fixed positioning works). This means that the width of a position:fixed; element will always be relative to the width of the viewport.
The way around this is to introduce a new wrapper element to the sidebar item and position this new element as fixed while the sidebar remains positioned normally.
Here is an example of how to do so... you want to add a wrapper once the user scrolls past (but only if the wrapper doesn't already exist), and remove the wrapper once they scroll back up (but only if it exists).
So, you can include in your JS:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
if ($('.fixie').length == 0) {
$('.detailsBox').wrap('<div class="fixie" />');
}
}
else {
$('.scrollup').fadeOut();
if ($('.fixie').length != 0) {
$('.detailsBox').unwrap('<div class="fixie" />');
}
}
});
Then, in your CSS, you can do the fixed positioning stuff.
.fixie {
width:1030px;
position:fixed;
top:100px; /* or however much you want */
left:50%;
margin-left:-515px;
/* these two lines center the wrapper */
padding:0 20px; /* to match the replaced wrapper */
}
.detailsBox {
float:right;
}
.imagesGrid {
float:left;
}
This should work :)

Related

How to slide right between two HTML pages

Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>

JavaScript menu dropdown problem in Internet Explorer

I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.

how to count how many elements have a certain class

I am using jQuery to try and find which IDs have a certain class name. The reason this is important to me is I am using toggleClass() from jQuery to show and hide certain divs and when a button is selected I want a viewport to display or hide. I have 2 personal goals: One is to find a way to do this in jquery and the other is to understand how to do this in javascript. I understand the javascript will be much more advanced and I am prepared.
How can I use the resetViewport() to count the amount of "selected" classes?
Is there a better way to do this?
In javascript, how can one do this same thing? Even if you tell me specific methods in js thats ok. I am not asking for exact code. I just want to learn.
Just so there is no question I added the code. Lets start by looking at my personal hosted web page called CodeAmend and here is the code
****html***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Player</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>CodePlayer</p>
<nav>
<ul>
<li id="html-button" class="toggle selected no-highlight">HTML</li>
<li id="css-button" class="toggle selected no-highlight">CSS</li>
<li id="js-button" class="toggle selected no-highlight">JS</li>
<li id="result-button" class="toggle selected no-highlight">Result</li>
</ul>
</nav>
<div id="run-button" class="no-select">Run</div>
</div>
<div id="html-container" class="code-container">
<div class="code-label">HTML</div>
<textarea>Code</textarea>
</div>
<div id="css-container" class="code-container">
<div class="code-label">CSS</div>
<textarea>Code</textarea>
</div>
<div id="js-container" class="code-container">
<div class="code-label">JS</div>
<textarea>Code</textarea>
</div>
<div id="result-container" class="code-container">
<div class="code-label">Result</div>
<iframe>Code</iframe>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* here is javascript / jquery *
$("[id^=button]").click(function () {
$(this).toggleClass('selected');
// creates the name of a viewport ID. "view-" + html of button
var viewID = "#view-" + $(this).html();
$(viewID).toggle();
resetViewport(4);
});
function resetViewport(numberOfViewports) {
var viewSize;
switch (numberOfViewports) {
case 1:
viewSize = "400px";
break;
case 2:
viewSize = "198px";
break;
case 3:
viewSize = "131px";
break;
case 4:
viewSize = "98px";
break;
}
$("[id^=view]").css("width", viewSize);
}
here is css
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.clear-fix {
clear: both;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* why does menu margin excape parent without padding on container.. change to 0 and all margen excapes. */
#container {
width: 400px;
height: 456px;
margin: 0 auto;
padding-top: 1px;
background-color: #555;
border-radius: 5px;
}
/* Menu styling */
#menu {
width: 231px;
margin: 10px auto;
}
#menu li {
width: 50px;
height: 30px;
border: 2px solid #58d;
border-radius: 10px;
background-color: #000;
color: #333;
line-height: 30px;
text-align: center;
font-size: .8em;
text-transform: uppercase;
list-style: none;
float: left;
cursor: pointer;
}
#menu li+li {
margin-left: 5px;
}
#menu .selected {
background-color: #fff;
color: #333;
font-weight: bold;
}
[id^="view"] {
width: 98px;
height: 400px;
margin: 1px;
float: left;
background-color: #ddd;
}
jQuery collections and Javascript NodeLists are both array-like, so you can use the .length property to get the number of elements.
jQuery:
resetViewport($(".selected").length);
Plain Javascript:
resetViewport(document.getElementsByClassName("selected").length);

jquery colorbox isn't working with mootools v1.1

I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});

Keeping a header always in view

I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}

Categories