SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation JQuery not removing white space on hide?

    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:

    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 &amp; 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 &amp; 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:

    Code:
    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's a css issue not jquery

    You have floated your header so your section element slides under the nav and is partially hidden. When you hide the nav you see all of its padding.

    Code:
    section {
    	background: rgba(60,19,19,0.5);
    	background-image:url('images/inner-bg.png');
    	border:2px solid #522a2a;
    	padding:2%;
    	padding-top:8%;
    }
    If you add clear:both to the above rule you will clearly see what's going on

    Code:
    section {
    	background: rgba(60,19,19,0.5);
    	background-image:url('images/inner-bg.png');
    	border:2px solid #522a2a;
    	padding:2%;
    	padding-top:8%;
    	clear:both
    }
    You don't really want to apply global rules like that to a section element anyway so use a class instead.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    That's a css issue not jquery

    You have floated your header so your section element slides under the nav and is partially hidden. When you hide the nav you see all of its padding.

    Code:
    section {
    	background: rgba(60,19,19,0.5);
    	background-image:url('images/inner-bg.png');
    	border:2px solid #522a2a;
    	padding:2%;
    	padding-top:8%;
    }
    If you add clear:both to the above rule you will clearly see what's going on

    Code:
    section {
    	background: rgba(60,19,19,0.5);
    	background-image:url('images/inner-bg.png');
    	border:2px solid #522a2a;
    	padding:2%;
    	padding-top:8%;
    	clear:both
    }
    You don't really want to apply global rules like that to a section element anyway so use a class instead.
    Ahh great, thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •