Jquery Ghost div maakt height andere div's onmogelijk

Status
Niet open voor verdere reacties.
B

Balfer

Gebruiker
Lid geworden
1 apr 2011
Berichten
23
Ik probeer een responsive webdesign te maken waarbij bij een klik op een menu item de site scrolled.

De menubar word fixed wanneer deze de top bereikt en om de volgende div de resterende ruimte te laten vullen gebruik ik een ghost div, deze maakt het onmogelijk de andere divs de juist hoogte te geven.

Kan iemand mij verder helpen?

html

Code: 
[HTML]
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<title>test</title>


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iecss.css" />
  <![endif]-->

<link rel="stylesheet" type="text/css" href="date/jquery.datetimepicker.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   


<link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 1030px)' href='css/1024.css' />

<link rel='stylesheet' media='screen and (min-width: 1190px) and (max-width: 1290px)' href='css/medium.css' />


<link rel='stylesheet' media='screen and (min-width: 1300px) and (max-width: 1400px)' href='css/big.css' />

<link rel='stylesheet' media='screen and (min-width: 1050px) and (max-width: 1205px)' href='css/1220.css' />


<link rel='stylesheet' media='screen and (min-width: 1360px) and (max-width: 1370px)' href='css/1366.css' />


<link rel='stylesheet' media='screen and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)' href='css/ipad.css' />

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/main.js"></script>


</head>
<body>



<div id="header"></div>

<div class="menubar">

<div class="linksmenu"></div>

<div class="rechtsmenu">

<div class="menu">

<li><a href="#header">test1</li>

<li><a href="#first">test2</li>



<li><a href="#second">test3</a></li>

<li><a href="#derde">test4</a></li>

<li><a href="#vierde">test5</a></li>

<li><a href="#vijfde">test6</a></li>

<li><a href="#zesde">test7</a></li>

</div>

</div>

</div>

<div class="ghost"></div>

<div id="first"></div>

<div id="second"></div>

<div id="derde"></div>

<div id="vierde"></div>

<div id="vijfde"></div>

<div id="zesde"></div>

</body>
</html>


css

Code: 
html, body{

margin: 0px;

padding:  0px;

width: 100%;

height: 100%;



}



.holder{

background-color: #ffffff;
width: 100%;
height: 2500px;

}

#header{
background-color: #ffffff;
width: 100%;
height: 400px;
}



/*  Menubar */

.menubar, .ghost{
background-color: #000000;
width: 100%;
height: 100px;	
position: absolute;

}

.ghost{	
background-color: #000000;	
z-index: 10;
}

.menubar{
background-color: #000000;	
z-index: 1000;
}

.linksmenu{
width: 20%;
height: 100px;	
float: left;
}

.logo{}


.rechtsmenu{
width: 80%;
height: 100px;	
float: left;
}

.menu{
width: 80%;
height: 20px;
padding-top: 39px;	
padding-left: 100px;
border: 0px none;
}

@font-face {
        font-family: 'Roboto-Regular-webfont';
		src: url('../fonts/Roboto-Regular-webfont.eot'),
		     url('../fonts/Roboto-Regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
             url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'); /* Pretty Modern Browsers */
}

.menu li {
float: left;
padding-left: 20px;
font-family: 'Roboto-Regular-webfont';
font-size: 20px; 
display: block;
list-style-type: none;
color: #ffffff;	
outline-width: 0;
}

.menu li  a:link{
float: left;
font-family: 'Roboto-Regular-webfont';
font-size: 20px; 
display: block;
text-decoration: none;
list-style-type: none;
color: #ffffff;	
outline-width: 0;
}

.menu li  a:visited{
float: left;
font-family: 'Roboto-Regular-webfont';
font-size: 20px; 
display: block;
text-decoration: none;
list-style-type: none;
color: #ffffff;	
outline-width: 0;
}

.menu li a:hover{
float: left;
font-family: 'Roboto-Regular-webfont';
font-size: 20px; 
display: block;
text-decoration: none;
list-style-type: none;
color: #FF8000;	
outline-width: 0;
}


/* Einde menubar */



.fixed {
	clear: both;
    position: fixed;
    top:0; left:0;
    width: 100%; }
	
	
#first{
background-color: #FE9A2E;
width: 100%;
font-size: 12px;	
color: #ffff00;	
}


#second{
background-color: #ffffff;
width: 100%;
font-size: 12px;	
color: #ffff00;
}

.one{
background-color: #FE9A2E;
width: 100%;	
}

.two{
background-color: #81BEF7;
width: 100%;	
}

#derde{
background-color: #81BEF7;
width: 100%;
font-size: 12px;	
color: #ffff00;
}

#vierde{
background-color: #ffffff;
width: 100%;
font-size: 12px;	
color: #ffff00;
}


#vijfde{
background-color: #74DF00;
width: 100%;
font-size: 12px;	
color: #ffff00;
}


#zesde{
background-color: #ffffff;
width: 100%;
font-size: 12px;	
color: #ffff00;
}


jquery

Code: 
$(window).scroll(function(){
  var menubar = $('.menubar'),
      scroll = $(window).scrollTop();

  if (scroll >= 400) menubar.addClass('fixed');
  else menubar.removeClass('fixed');
});


$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).height();
    $('#first').css('min-height', windowHeight);
  };
  setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});


$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height();
    $('#second').css('min-height', windowHeight);
	  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});

$(document).ready(function() {
var divHeight = $('.first').height()/2; 
$('.one').css('min-height', divHeight );
});

$(document).ready(function() {
var divHeight = $('.first').height()/2; 
$('.two').css('min-height', divHeight );
});


$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height();
    $('#derde').css('height', windowHeight - 100);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});


$(document).ready(function(){
  function setHeight() {
    var windowHeight = $(window).height();
    $('#vierde').css('min-height', windowHeight - 100);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});



$(document).ready(function(){
  function setHeight() {
    var windowHeight = $(window).height();
    $('#vijfde').css('min-height', windowHeight);
	$('#vijfde').css('paddingTop', 100);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});



$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height();
    $('#zesde').css('min-height', windowHeight);
	$('#zesde').css('paddingTop', 100);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});




$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 100, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
 
Antwoord na 6 dagen nu toch zelf gevonden JQuery moet zijn

JQuery

Code: 
$(window).scroll(function(){
  var menubar = $('.menubar'),
      scroll = $(window).scrollTop();

  if (scroll >= 400) menubar.addClass('fixed');
  else menubar.removeClass('fixed');
});


$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).height();
    $('#first').css('min-height', windowHeight);
  };
  setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});


$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height() - 100;
    $('#second').css('min-height', windowHeight);
	  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});

$(document).ready(function() {
var divHeight = $('.first').height()/2; 
$('.one').css('min-height', divHeight );
});

$(document).ready(function() {
var divHeight = $('.first').height()/2; 
$('.two').css('min-height', divHeight );
});


$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height() - 100;
    $('#derde').css('height', windowHeight);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});


$(document).ready(function(){
  function setHeight() {
    var windowHeight = $(window).height() - 100;
    $('#vierde').css('min-height', windowHeight);
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});



$(document).ready(function(){
  function setHeight() {
    var windowHeight = $(window).height() - 100;
    $('#vijfde').css('min-height', windowHeight);
	 };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});



$(document).ready(function() {
  function setHeight() {
    var windowHeight = $(window).height() - 100;
    $('#zesde').css('min-height', windowHeight);
	
  };
 setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});




$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 1500, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
 
In de code heb ik een aantal dingen aangepast en html5 compliant gemaakt.

html
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<!-- volgende 3 regels werken niet in recente IE en/of Edge!! -->
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iecss.css" />
      <![endif]-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="date/jquery.datetimepicker.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media='screen and (min-width: 768px) and (max-width: 1030px)'  href='css/1024.css'>
<link rel="stylesheet" media='screen and (min-width: 1190px) and (max-width: 1290px)' href='css/medium.css'>
<link rel="stylesheet" media='screen and (min-width: 1300px) and (max-width: 1400px)' href='css/big.css'>
<link rel="stylesheet" media='screen and (min-width: 1050px) and (max-width: 1205px)' href='css/1220.css'>
<link rel="stylesheet" media='screen and (min-width: 1360px) and (max-width: 1370px)' href='css/1366.css'>
<link rel="stylesheet" media='screen and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)' href='css/ipad.css'>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Ubuntu'>
</head>
<body>
<div id="header"></div>
<div class="menubar">
   <div class="linksmenu">
   </div>
   <div class="rechtsmenu">
      <div class="menu">
         <li><a href="#header">test1</li>
         <li><a href="#first">test2</li>
         <li><a href="#second">test3</a></li>
         <li><a href="#derde">test4</a></li>
         <li><a href="#vierde">test5</a></li>
         <li><a href="#vijfde">test6</a></li>
         <li><a href="#zesde">test7</a></li>
      </div>
   </div>
</div>
<div class="ghost"></div>
<div id="first"></div>
<div id="second"></div>
<div id="derde"></div>
<div id="vierde"></div>
<div id="vijfde"></div>
<div id="zesde"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

css
Code: 
html, body {
	height: 100%;
}
body {
	margin: 0;
}
.holder{
	background-color: #ffffff;
	width: 100%;
	height: 2500px;
}
#header{
	background-color: #ffffff;
	width: 100%;
	height: 400px;
}
/*  Menubar */
.menubar,
.ghost{
	background-color: #000000;
	width: 100%;
	height: 100px;	
	position: absolute;
}
.ghost{	
	background-color: #000000;	
	z-index: 10;
}
.menubar{
	background-color: #000000;	
	z-index: 1000;
}
.linksmenu{
	width: 20%;
	height: 100px;	
	float: left;
}
.logo{
}
.rechtsmenu{
	width: 80%;
	height: 100px;	
	float: left;
}
.menu{
	width: 80%;
	height: 20px;
	padding-top: 39px;	
	padding-left: 100px;
	border: 0px none;
}
@font-face {
	font-family: 'Roboto-Regular-webfont';
	src: url('../fonts/Roboto-Regular-webfont.eot'),
		 url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
		 url('../fonts/Roboto-Regular-webfont.ttf') format('truetype');
}
.menu li {
	float: left;
	padding-left: 20px;
	font-family: 'Roboto-Regular-webfont';
	font-size: 20px; 
	display: block;
	list-style-type: none;
	color: #ffffff;	
	outline-width: 0;
}
.menu li  a:link{
	float: left;
	font-family: 'Roboto-Regular-webfont';
	font-size: 20px; 
	display: block;
	text-decoration: none;
	list-style-type: none;
	color: #ffffff;	
	outline-width: 0;
}
.menu li  a:visited{
	float: left;
	font-family: 'Roboto-Regular-webfont';
	font-size: 20px; 
	display: block;
	text-decoration: none;
	list-style-type: none;
	color: #ffffff;	
	outline-width: 0;
}
.menu li a:hover{
	float: left;
	font-family: 'Roboto-Regular-webfont';
	font-size: 20px; 
	display: block;
	text-decoration: none;
	list-style-type: none;
	color: #FF8000;	
	outline-width: 0;
}
/* Einde menubar */
.fixed {
	clear: both;
	position: fixed;
	top:0; left:0;
	width: 100%;
}
#first{
	background-color: #FE9A2E;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;	
}
#second{
	background-color: #ffffff;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;
}
.one{
	background-color: #FE9A2E;
	width: 100%;	
}
.two{
	background-color: #81BEF7;
	width: 100%;	
}
#derde{
	background-color: #81BEF7;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;
}
#vierde{
	background-color: #ffffff;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;
}
#vijfde{
	background-color: #74DF00;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;
}
#zesde{
	background-color: #ffffff;
	width: 100%;
	font-size: 12px;	
	color: #ffff00;
}

js
Code: 
$(window).scroll(function(){
	var menubar = $('.menubar');
	var scroll  = $(window).scrollTop();
	if (scroll >= 400) {
		menubar.addClass('fixed');
	} else {
		menubar.removeClass('fixed');
	}
});


$(document).ready(function() {
	function setHeight() {
		windowHeight = $(window).height();
		$('#first').css('min-height', windowHeight);
		$('#second').css('min-height', windowHeight);
		$('#derde').css('height', windowHeight - 100);
		$('#vierde').css('min-height', windowHeight - 100);
		$('#vijfde').css('min-height', windowHeight);
		$('#vijfde').css('paddingTop', 100);
		$('#zesde').css('min-height', windowHeight);
		$('#zesde').css('paddingTop', 100);
	}
	setHeight();
	$(window).resize(function() {
		setHeight();
	});
	var divHeight = $('.first').height()/2; 
	$('.one').css('min-height', divHeight );
	$('.two').css('min-height', divHeight );
	$('a[href^="#"]').on('click',function (e) {
		e.preventDefault();
		var target = this.hash;
		var $target = $(target);
		$('html, body').stop().animate({
			'scrollTop': $target.offset().top
		}, 100, 'swing', function () {
			window.location.hash = target;
		});
	});
});

Werkt het hiermee?

Noot: de <link meida> kloppen niet. Deze horen netjes op elkaar aan te sluiten

Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan