Naar beneden scrollen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 3 volgende »

Matthijs P

Matthijs P

10/06/2014 20:09:52
Quote Anchor link
Hallo,

Ik ben met de webite bezig en ik wil alle dingen op 1 pagina hebben.
Ik heb een menu en nu wil ik als ik op een menu balk klik dat hij naar beneden scrolt ik heb al vanalles geprobeerd maar het lukt maar niet.

Groetjes,

Matthijs
 
PHP hulp

PHP hulp

28/03/2024 12:23:26
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 20:14:45
Quote Anchor link
En wat heb je geprobeerd? Wel handig om te vertellen, lijkt me.
 
Matthijs P

Matthijs P

10/06/2014 20:17:42
Quote Anchor link
$(document).ready(function() {

$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;

});
});
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 20:21:10
Quote Anchor link
En je hebt ook die elementen in HTML aangemaakt die je aanroept, en de jQuery library aangeroepen? Laat je volledige voorbeeld eens zien?
Gewijzigd op 10/06/2014 20:21:24 door - Ariën -
 
Matthijs P

Matthijs P

10/06/2014 20:58:28
Quote Anchor link
<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>
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 21:03:46
Quote Anchor link
En je HTML? Heb je geen voorbeeld in JSfiddle?
 
Matthijs P

Matthijs P

10/06/2014 21:05:34
Quote Anchor link
nee?
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 21:09:37
Quote Anchor link
Ik heb hem aangemaakt in http://jsfiddle.net/SGbT5/, alleen ben ik wel benieuwd naar je HTML.
Gewijzigd op 10/06/2014 21:18:47 door - Ariën -
 
Matthijs P

Matthijs P

10/06/2014 21:24:51
Quote Anchor link
<!DOCTYPE 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>

dit is mijn head
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 21:31:51
Quote Anchor link
Maar de body? Daar draait het allemaal om. Je wilt toch elementen hebben die animeren en iets kunnen laten scrollen? Dus geef graag even de volledige relevante code. Zet deze graag in het vervolg tussen [code] en [/code], om het beter leesbaarder te maken.
Gewijzigd op 10/06/2014 21:32:04 door - Ariën -
 
Matthijs P

Matthijs P

10/06/2014 21:35:06
Quote Anchor link
<!DOCTYPE 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>

<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>
<body>
<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 idclass="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>



<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>

<div class="">
</div>
<br/>
<br/>



<div class="tekstovermij">

<p class="wit">


</div>
</div>
</div>

</body>
</html>

dit is alles
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 21:37:02
Quote Anchor link
Kan je dit tussen [code] en [/code] -tags plaatsen, zoals ik net vroeg? Dat maakt de boel beter leesbaarder.
 
Matthijs P

Matthijs P

10/06/2014 21:38:37
Quote Anchor link
<!DOCTYPE>
<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">

is trouwens de header de andere was verkeerd
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 21:40:20
Quote Anchor link
Beste Mathijs,

De code-tags zijn bedoeld om je scripts op het forum in een leesbaar wit vlak te plaatsen met regelnummering erbij.
Ik zou het op prijs stellen dat je deze tags voortaan om script in het forum heen plaatst.

Gebruik deze tags om je script heen, als je ze op het forum plaatst, en alles wordt duidelijker leesbaarder. je kan je bestaande berichten aanpassen door op Afbeelding te klikken.
Gewijzigd op 10/06/2014 21:41:30 door - Ariën -
 
Matthijs P

Matthijs P

10/06/2014 21:52:19
Quote Anchor link
oh sorry ik dacht dat je het over het script zelf had.
Mijn exucces daarvoor

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE>
<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>

<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>
<body>
<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 idclass="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>



<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>

<div class="">
</div>
<br/>
<br/>



<div class="tekstovermij">

<p class="wit">


</div>
</div>
</div>

</body>
</html>


hopelijk is dit beter
 
Joakim Broden

Joakim Broden

10/06/2014 21:58:10
Quote Anchor link
<div idclass="portfolioindex" id="midden">

idclass bestaat niet, dit moet class zijn.

Tevens je HTML is echt belabberd, ga eens even goed HTML leren ;-)

- Je sluit veel element niet af.
- Ene keer gebruik je ' en andere keer "
- header hoort in de body
- id's gebruik je dubbel, mag maar 1 keer voor komen per pagina
- volgens mij veel overbodige elementen en classes
- ene keer nederlandse class namen andere keer weer engels

pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);

gaat sowieso verkeerd. Je wilt dat hij scrollt naar de hoogte van het element? Ik denk eerder naar de position van het element.

$("div.portfolioindex").position().top; komt meer in de buurt

Zo kan ik nog wel even door gaan. Fix je HTML om fouten te voorkomen
Gewijzigd op 10/06/2014 22:02:30 door Joakim Broden
 
Obelix Idefix

Obelix Idefix

10/06/2014 22:00:36
Quote Anchor link
Matthijs P op 10/06/2014 21:52:19:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2

<div idclass="portfolioindex" id="midden">

Klopt dat idclass?

Verder een tip: spring je code in, zodat je bv. kunt zien welke <div> bij </div> hoort.

Verder kan er toch maar 1x een id op een pagina voorkomen? Zie meerdere keren id="midden" staan.
Gewijzigd op 10/06/2014 22:01:56 door Obelix Idefix
 
- Ariën  -
Beheerder

- Ariën -

10/06/2014 22:01:13
Quote Anchor link
Je HTML is niet correct opgebouwd. Ik zie zomaar halverwege ergens een <body>-tag voorbijkomen, de code is niet uitgelijnd met TAB, en ik zie een </div>-tag teveel.

Zorg eerst dat je HTML-code gewoon valid is.
 
Matthijs P

Matthijs P

11/06/2014 14:13:28
Quote Anchor link
het meeste komt omdat ik somige dingen heb weg gehaald die ik liever niet op dit forum plaats
 
Eschwin Moerkerken

Eschwin Moerkerken

11/06/2014 15:35:17
Quote Anchor link
Ik laat je een klein voorbeeldje zien hoe je code netjes hoort te indenten:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

<body>
  <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>
</body>


Daarnaast heb ik een vraag, waarom gebruik je een <span> element binnen een anchor <a> element ? Je kan hem ook weg laten en er een display:inline-block; aan meegeven (aan de anchor) in de css.

Verder is je html niet helemaal zoals het hoort maar oefening baart kunst en zo ben ik ook begonnen een aantal jaar geleden, wat helemaal niet erg is!

Je javascript klopt ook niet helemaal bovenaan, je sluit ze niet goed af en dergelijke, ik heb helaas geen tijd om al je code te verbeteren, sorry.

Zoek eens een aantal voorbeelden op van w3schools of kijk her en der eens in de broncode als je op een website komt waarvan je vind dat die er interessant uit ziet. Daarbij moet je wel op letten dat sommige websites automatisch worden aangevuld door opensource CMS systemen en de broncode er dan niet echt bepaald netjes uit ziet!

Heel veel succes ermee !
Gewijzigd op 11/06/2014 15:43:06 door Eschwin Moerkerken
 
Matthijs P

Matthijs P

11/06/2014 16:29:12
Quote Anchor link
Mijn html script hoeft niet geordend te zijn als hij het maar doet vind ik zelf :D
 

Pagina: 1 2 3 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.