- Ariën -
11-06-2014 16:30
gewijzigd op 11-06-2014 16:31
Matthijs P op 11/06/2014 16:29:12
Rare instelling...... met een 'houtje-touwtje'-constructie is de kans op fouten maken veel groter.
Link gekopieerd
Oke bedankt voor de tip,
Link gekopieerd
Fatsoeneer eerst je script maar eens even aan de hand van de gegeven tips in deze thread.
Link gekopieerd
Ik heb dit gedaan:
<html>
<head>
<title>Matthijs</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
</script>
</head>
<body>
<header class="menu">
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub' id="bottom"><a href='#'><span>Portfolio</span></a></li>
<li><a href='' onclick="overmij"><span>Over mij</span></a></li>
<li><a href='' onclick="downloads"><span>downloads</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</header>
<div class="container">
<div class="top" id="midden">
<h1 class="wit ">Hiya!</h1>
<p class="ondertitel">Welkom op mijn site!</p>
<a href=""><img id="mac" src="images/mac.png" width="600" height="300"></a>
</div>
<div class="portfolioindex" id="midden">
<br/>
<h1 class="algemeen">Portfolio</h1>
<p class="ondertitel">Lees en bekijk hier al mijn projecten!</p>
</div>
<div id="box1">
<div id="overlay1">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box2">
<div id="overlay2">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box3">
<div id="overlay3">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>
<br/>
<br/>
</div>
<div class="tekstovermij">
<p class="wit">
</div>
</div>
</body>
</html>
Link gekopieerd
- Een 'id' hoort tevens uniek te zijn. Ik zie <span id="plus"> meerdere keren voorbij komen.
Link gekopieerd
Doctype was er tevens wel, niet gekopieerd :S
Link gekopieerd
Je vergat een ID met portfolia in je a-tag (anchor).
Mogelijk dat dit dan werkt? In ieder geval moet je dan een debug-alert zien.
$(document).ready(function() {
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").position().top;
alert(pHeight+' is de hoogte.'); // stukje debug.
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
Link gekopieerd
Beste matthijs,
Ik heb je code even onder de loep genomen omdat ik je er graag mee wil helpen, maar wat jij doet in je Jquery is eerst de hoogte berekenen van het element waar je naartoe wil scrollen, maar wat je wilt weten is de hoogte vanaf bovenaan het document, dus je moet de positie bepalen van dat element.
Verder heb ik alle Id's weggehaald welke er meerdere keren in stonden en veranderd in classes. Dit zou je dan moeten aanpassen in je CSS bestandje door simpelweg de hekjes te veranderen in puntjes.
Ook heb ik dingen uit gecommentarieerd welke niet nodig zijn in de html tenzij niet anders kan, en volgens mij kun je zo'n <br /> best met css oplossen in jouw geval !
Hier uiteindelijk je code, welke ik heb getest in laatste versie van chrome:
<!DOCTYPE html>
<html>
<head>
<title>Matthijs</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('a.selector').click(function(e){
e.preventDefault();
pHeight = $("div.portfolioindex").position();
$('body,html').animate({scrollTop: pHeight.top}, 2500);
return false;
});
});
</script>
</head>
<body>
<header id="navigation">
<ul class="navbar">
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub bottom'><a class="selector" href=''>Portfolio</a></li>
<li><a href='' onclick="overmij">Over mij</a></li>
<li><a href='' onclick="downloads">downloads</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</header>
<div class="container">
<div class="top midden">
<h1 class="wit">Hiya!</h1>
<p class="ondertitel">Welkom op mijn site!</p>
<a href=""><img class="mac" src="images/mac.png" width="600" height="300"></a>
</div>
<div class="portfolioindex midden">
<!-- <br/> -->
<h1 class="algemeen">Portfolio</h1>
<p class="ondertitel">Lees en bekijk hier al mijn projecten!</p>
</div>
<div id="box1">
<div id="overlay1">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box2">
<div id="overlay2">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box3">
<div id="overlay3">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div class="Overmij">
<h1 class="wit midden">Over mij</h1>
<p class="ondertitel midden">Kom hier meer over mij te weten!</p>
<!-- <br/> -->
<!-- <br/> -->
</div>
<div class="tekstovermij">
<p class="wit">
lorem ipsum
</p>
</div>
</div>
</body>
</html>
http://jsbin.com/zudis/1/watch
Link gekopieerd
Moet het per se met jQuery of JavaScript? Het kan namelijk ook met HTML.
<header>
<ul class="navbar">
<li><a href="#top">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#overmij">Over mij</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<div id="portfolio">
<h2>Portfolio</h2>
</div>
<div id="overmij">
<h2>Over mij</h2>
</div>
Nog even een CSS3-animatie eroverheen als je het scrollen wat visueel effect wilt meegeven en klaar.
Link gekopieerd
Vergeet je geen <a name="..."> tag?
Link gekopieerd
