Hi all,
Working with a bit of JQuery to remove an element in my design on the click of a button. Simple enough really, except that when I click the button the element disappears but does not take the gap below away with it, thus leaving a space large enough for the element to appear again.
Setting the container element to position:relative in the Chrome Dev tools does the trick but applying the same CSS after the .hide() doesn’t do a thing. This leads me to believe it’s something not clearing in the viewport.
Below is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Lion Inn</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=1"/>
<link rel="stylesheet" type="text/css" href="lioninn.css"/>
<link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var clicked = true;
$("#navigation").show();
$("#toggle-menu").click(function(){
if (clicked == true){
$("#navigation").hide();
$("header").css({position:'relative'});
$("header").css({display:'inline'});
clicked = false;
}
else{
$("#navigation").show();
clicked = true;
}
});
});
</script>
</head>
<body>
<div id="container">
<header class="col col12">
<div class="col col2" style="">
<div id="logo" style="display:none;">The Lion Inn</div>
<img src="images/logo-small.png" alt="" class="swap" id="logo-small" />
<a href="#" id="toggle-menu">Show/Hide Menu</a>
<div id="navigation">
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Restaurant & Menus</a></li>
<li><a href="#" title="">Rooms</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Events</a></li>
<li><a href="#" title="">The Area</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div>
<div class="col col8">
<nav style="display:none;">
<ul>
<li><a href="#" title="">Home</a></li>
<li>~</li>
<li><a href="#" title="">Restaurant & Menus</a></li>
<li>~</li>
<li><a href="#" title="">Gallery</a></li>
<li>~</li>
<li><a href="#" title="">Events</a></li>
<li>~</li>
<li><a href="#" title="">The Area</a></li>
<li>~</li>
<li><a href="#" title="">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="col col4">
<div class="call-to-action">To enquire or book call 01234 567890</div>
<div class="call-to-action" style="display:none;">Join us for the latest information:</div>
</div>
</section>
</div><!-- end container -->
</body>
</html>
If you want to try it out with the styles, here it is:
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
.clear{clear:both;}
/* column width declarations - nm refers to no margin */
.col{float:left; }
.col12{width:100%;}
.col8{width:79%; margin:0.5%;}
.col8nm{width:80%;}
.col6{width:49%; margin:0.5%;}
.col6nm{width:50%;}
.col4{width:24%; margin:0.5%;}
.col4nm{width:25%;}
.col3{width:30.33%; margin:1.5%;}
.col3nm{width:33.33%;}
.col2{width:19%; margin:0.5%;}
.col2nm{width:20%;}
.col1{width:9%; margin:0.5%;}
.col1nm{width:10%;}
@font-face {
font-family: 'Lusitana', serif;
font-weight: normal;
font-style: normal;
}
body{ margin:0;
background-image:url(images/background.png);
background-color:#3b1313;
font-family:Arial, Helvetica;
font-size:1.2rem; line-height:1.2rem; color:#cccccc;}
a:link{color:#faa31b; text-decoration:none;}
a:visited{color:#faa31b; text-decoration:none;}
a:hover{color:#faa31b; text-decoration:underline;}
h1{font-family:'Lusitana', serif; font-size:1.2rem;}
p{line-height:1.2rem;}
#container{margin:5% auto; width:90%; max-width:1280px;}
header{ float:left;
background:#522a2a;
text-shadow: black 0.15em 0.15em 0.2em;
border: 1px solid #3d1414; outline: 2px solid #522a2a;
-moz-box-shadow: 0px 2px 2px 3px black;
-webkit-box-shadow: 0px 2px 2px 3px black;
box-shadow: 0px 2px 2px 3px black;}
nav{font-family:Lusitana;
text-transform:uppercase;
font-size:1.1em;
padding-left:0px;
color:#faa31b;
}
nav ul{margin:0; padding:0;}
nav li{display:inline; margin:0 0.5%; text-shadow: black 0.15em 0.15em 0.2em;}
nav ul li a:link{text-decoration:none; font-size:1em; color:#faa31b; line-height:28px;}
nav ul li a:visited{text-decoration:none; color:#faa31b;}
nav ul li a:hover{border-bottom:1px solid #faa31b; color:#faa31b;}
section{background: rgba(60,19,19,0.5); background-image:url('images/inner-bg.png'); border:2px solid #522a2a; padding:2%; padding-top:8%;}
#logo{
width:165px;
min-width:170px;
height:277px;
position:absolute;
margin-top:-65px;
margin-left:-20px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
color:transparent;
font-size:0px;}
/* mobile - landscape */
@media only screen and (max-width : 481px) {
#toggle-menu, #navigation{display:none;}
}
/* mobile - portrait */
@media only screen and (min-width : 0) and (max-width : 320px) {
.col2, .col4, .col6{width:100%;}
.col4{margin:2% 0;}
.col4 img{display: block;
margin-left: auto;
margin-right: auto; width:100%;}
.col6{margin:5% 2% 0 2%;}
h1{font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase;}
h2{font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase;}
p{font-family:'Arial', sans-serif; font-size:1rem; color:white;}
section{padding:0; border:0;}
#logo-small{display:block; margin-left:auto; margin-right:auto;}
#toggle-menu{display:block; margin:4% 0; font-size:1rem; text-align:center; }
#navigation{display:block; position:relative; width: 98%; height:auto; margin:0; background:; text-align:center;}
#navigation ul{margin:10px 0; padding:0;}
#navigation ul li{list-style-type:none; padding:3%; margin:2%; background:#522a2a; border: 1px solid #3d1414; outline: 2px solid #522a2a;}
#navigation ul li:active, #navigation ul li:hover{background:#3c1313;}
#navigation ul li a:hover{text-decoration:none;}
.call-to-action{margin-top:5%; padding:10px; background:#522a2a; border: 1px solid #3d1414; outline: 2px solid #522a2a;
font-family:'Lusitana', serif; font-size:1.1rem; color:#faa31b; line-height:1.5rem; text-align:center; text-transform:uppercase;}
.cta{border:4px solid #523131; background:#523131;}
.cta p{margin:3%;}
.ctaBut{display:block; font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase; background:#523131; border:2px solid #3d1414; padding:5px; background-image:url('../images/ctaButBG.png'); background-repeat:no-repeat; background-position:right;}
.ctaBut:hover{background:#3d1414; background-image:url('images/ctaButBG.png'); background-repeat:no-repeat; background-position:right; text-decoration:none;}
footer{width:100%; margin-top:3%; text-align:center;}
footer p img{margin:0 3%;}
}
Any thoughts?
Cheers,
Andrew
