I'm making a toggle sidebar where onClick of button showmenu funtion is not working. I'm trying to change the style of the sidenav from display:none to display:block but when I click the button nothing happens. I've tried with an alert and that works but not with the style.
Please help me find out where is the problem?
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(sidenav.style.display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Your function working. Only change this line. Add style on nav tag style="display: none" and set default display: none or block.
<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">
You need to remove the display:none from the CSS classes.
But really, you're taking the wrong approach here. Your CSS and JavaScript should be separated from your HTML.
See the comments inline below:
// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript
// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");
btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);
// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);
function showMenu() {
// Just toggle the usage of the pre-made hidden class
sideNav.classList.toggle("hidden");
overDiv.classList.toggle("hidden");
console.log("function showMenu called");
}
function noDisponible(event){
// Make sure it was the right type of sideNave item
if(event.target.classList.contains("noDisponible")){
// Do work here
console.log("function noDisponible called");
} else if(event.target.classList.contains("logout")){
// Do logout here
logout();
}
}
function overlay(event){
// Do work here
console.log("function overlay called");
}
function logout(event){
console.log("function logout called");
}
.hidden { display:none; }
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button type="button" id="menu-div"></button>
<nav class="sidenav hidden" id="sidenav">
<a class="item noDisponible">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png">
</a>
<a class="item noDisponible" href='mapa.html'>
<label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
<img class="icon" src="images/iconos/mapas.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png">
</a>
<a class="item logout" id="logout">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png">
</a>
</nav>
</header>
<div id="overlay" class="overlay hidden">OVERLAY HERE</div>
<div id="content"></div>
Set the style of sidenav programatically outside of the function:
let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";
function showmenu() {
let overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if (sidenav.style.display == "block") {
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color: #ffffff;
left: 0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay {
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png" />
</a>
<a class="item" href='mapa.html'>
<label class="menu-txt">Mapas</label>
<img class="icon" src="images/iconos/mapas.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png" />
</a>
<a class="item" id="logout" onclick="logout();">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png" />
</a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()">Overlay</div>
<div id="content">Content</div>
You need to use window.getComputedStyle to get the css properties instead of element.style.
Element.style only gives the inline styles provided but window.getComputedStyle will give you the final styles provided to the element. element.style will give you the inline styles only and that's why to make it work, you need to add inline style display: none as suggested by #BCM.
You can read more here
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (window.getComputedStyle(sidenav).display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(window.getComputedStyle(sidenav).display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Also, for writing this type of code, you should be following #Scott Marcus's approach. It is much better and cleaner.
Related
I am currently working on a college project for a clothing website, so what I want is that when the user hovers over a product image on the main feed, the product image keeps changing between 3-4 images of that product with a few milliseconds of transition.
this is my HTML code
<div class="imagebox">
<img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 ">
</div>
this is the CSS
.imagebox{
display: inline-block;}
.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}
Is there a way to do that using CSS or JS?
I've implemented an example by JS, I hope this will be helpful.
let intervalId;
let i = 0;
document.querySelectorAll('.product-images').forEach((poroduct) => {
const productImages = poroduct.querySelectorAll('img');
poroduct.addEventListener('mouseenter', function() {
fadeImg(productImages);
intervalId = setInterval(() => fadeImg(productImages), 1500);
});
poroduct.addEventListener('mouseleave', function() {
clearInterval(intervalId);
productImages[i].classList.remove('active');
productImages[0].classList.add('active');
i = 0;
});
});
function fadeImg(productImages) {
productImages[i].classList.remove('active');
i = (i + 1) % 4;
productImages[i].classList.add('active');
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
opacity: 0;
transition: opacity 500ms;
}
.imagebox img.active {
opacity: 1;
}
<div class="container">
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
<img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
<img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
<img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
<img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
<img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
<img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
<img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
</a>
</div>
</div>
Hello , i Have some basic code to change the background for my app
i need to save the path of selected image for this img src of
this div id="productImage" When the USER 1 Select any image From
the list to local storage and get the current selected image after
reload the page form local storage For example> local storage data
key background-path:background/image1.png
Thanks for help
function Selectbk() {
$('.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('empty.png');
$('#productImage').attr('src', src);
});
}
ul.chat-gallery {
list-style-type: none;
display: inline;
width: auto;
position: relative;
left: -0%;
}
ul.chat-gallery img {
max-width: 60px;
position: relative;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%">
<a class="cancel" href="#"></a>
<div class="popup">
<h2>Do you like To Switch Background?</h2>
<div class="content">
<ul class="chat-gallery">
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a>
</li>
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a>
</li>
</ul>
</div>
</div>
You could use $().data instead of localStorage:
function Selectbk() {
$('.thumbnail').click(function() {
var src = $(this).find('img').attr('src').replace('empty.png');
$('#productImage').attr('src', src);
$('#productImage').data('src', src);
});
}
$("button").click(function() {
console.log($('#productImage').data('src'));
});
ul.chat-gallery {
list-style-type: none;
display: inline;
width: auto;
position: relative;
left: -0%;
}
ul.chat-gallery img {
max-width: 60px;
position: relative;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="cancel" href="#"></a>
<button>get src</button>
<div class="popup">
<h2>Do you like To Switch Background?</h2>
<div class="content">
<ul class="chat-gallery">
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a>
</li>
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a>
</li>
</ul>
</div>
</div>
<img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%">
I have a sidebar which is position:fixed; and overflow:auto; - this causes the scroll to happen within the fixed element.
Now when the sidebar is turned on, that element does not move, its just static on the page.
What i want to achieve: I would like to fix .super-image-thumb inside the scroll element, so when the scroll happens, the thumbnails at the top are fixed.
I have tried a javascript fix as well but its still not working. Any recommendations?
jQuery(function($) {
function fixDiv() {
var $cache = $('.super-image-thumb');
if ($('.sliding-panel-content').scrollTop() > 100)
$cache.css({
'position': 'fixed',
'top': '10px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
});
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
-webkit-transform: translateY(-115%);
-ms-transform: translateY(-115%);
transform: translateY(-115%);
transition: all .25s linear;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.sliding-panel-content.is-visible {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>
Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/
function fixDiv() {
$('.super-image-thumb').css({
'top': $('.sliding-panel-content').scrollTop()+'px'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
Javascript for that will only make the things more complicated.
It is all about CSS, the position: fixed or absolute is always based on the first ancestor with position: relative, so you should play with it.
I would remove the jQuery code and add this CSS:
.slide-content {
position:relative;
}
.super-image-thumb {
position:fixed;
background: #FFF;
top:0;
width:100%;
z-index: 2;
}
.main-image-container {
position:absolute;
top:85px;
z-index: 0;
}
As in the jsfiddle
It looks like transitions and position: fixed does not work together in all browser, when you remove them, code works fine. Some solution for this you can find in css3 transform reverts position: fixed
I created snippet without transitions and also I removed JS part (I think is not needed), and propose CSS-only solution. It is not finished to the end, it needs some more aligments - but you can do it yourself - the way for solving your problem is clear, I think.
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.super-image-thumb {
position: fixed;
top: 10px;
}
.main-image-container {
margin-top: 100px; // should be same as thumb height
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>
My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.
You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');
I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!
I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}