Clicking op een #sectienaam laat de pagina verschuiven?
Weet iemand hoe dit komt en hoe ik dit kan tegenhouden?
Met wat testjes op een website waarmee ik naar verschillende paginas gaat in de index.php.
Krijg ik het volgende probleem, als ik bijvoorbeeld navigation menu heeft home sectie1 sectie sectie3 als links naar de desbetreffende secties.
Wanneer ik een beetje scroll op de website en dan click om naar een andere sectie te gaan dan springt de pagina ipv dat die op dezelfde plek blijft en alleen van page veranderd. Het zit wel in dezelfde pagine alleen dan tijdens het veranderen gaat die schuiven volgens mij?
Regards,
C Stonebakers op 09/12/2013 15:47:31:
Heb je een voorbeeldje online staan?
Jawel, mijn testwebsite Testwebsite
ps. het gebeurd wanneer je kan scrollen dus bij kleine scherm of als je inzoomed en dan veranderd van pagina. Alvast bedankt!
Gewijzigd op 09/12/2013 15:57:35 door Danny T
C Stonebakers op 09/12/2013 16:02:12:
http://makehundreddollarsaday.com/#actie je bedoeld als je hier naar ondere scrollt dat je op de andere pagina komt?
Dat is helaas niet wat ik bedoel, stel ik scroll in wanneer ik op home zit naar 150% en zit helemaal bovenaan de pagina. Dan klik ik op menu en catering en springt hij naar beneden. Als het ware naar dat witte vierkant centerde hij hem dan volgens mij? maar dat weet ik niet precies.
- SanThe - op 09/12/2013 16:02:15:
Je sluit een </div> die niet geopend is.
Waar bedoel je?
<div class="slider-wrapper theme-default">
<div id="slider">
<img src="images/content_slider/eten1.jpg" alt="image 1" />
<img src="images/content_slider/pangsitgoreng.jpg" alt="image 2" />
<img src="images/content_slider/babipangang.jpg" alt="image 3" />
<img src="images/content_slider/tjaptjoy.jpg" alt="image 4" />
<img src="images/content_slider/foeyonghai.jpg" alt="image 11" />
</div>
</div>
</div> <======== Deze dus
<div id="slider">
<div id="dappo_wrapper">
Gewijzigd op 09/12/2013 16:13:13 door - SanThe -
----
Nu; dit is wat je zou kunnen doen:
De navigatie knoppen mogen blijven
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<ul class="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
</ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
</ul>
Wat je dan doet, is een <a name="XXX"></a> toevoegen, net boven de titel naar waar je wil scrollen.
dus
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
...
<a name="actie"></a>
<h2>Actie</h2>
...
<a name="locatie"></a>
<h2>Contact en Locatie</h2>
...
<a name="actie"></a>
<h2>Actie</h2>
...
<a name="locatie"></a>
<h2>Contact en Locatie</h2>
...
Dan gebeurt het scrollen automatisch. Geen javascript nodig; goedkoop en simpel
- SanThe - op 09/12/2013 16:12:42:
<body>
</div> <======== Deze dus
</div> <======== Deze dus
Dank je, ik heb dat weggehaald.
Kris Peeters op 09/12/2013 16:25:31:
Hoe werkt die navigatie? Ik zie het niet.
Wat je dan doet, is een <a name="XXX"></a> toevoegen, net boven de titel naar waar je wil scrollen.
dus
Dan gebeurt het scrollen automatisch. Geen javascript nodig; goedkoop en simpel
Wat je dan doet, is een <a name="XXX"></a> toevoegen, net boven de titel naar waar je wil scrollen.
dus
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
...
<a name="actie"></a>
<h2>Actie</h2>
...
<a name="locatie"></a>
<h2>Contact en Locatie</h2>
...
<a name="actie"></a>
<h2>Actie</h2>
...
<a name="locatie"></a>
<h2>Contact en Locatie</h2>
...
Dan gebeurt het scrollen automatisch. Geen javascript nodig; goedkoop en simpel
Er gebeurd precies hetzelfde als voorheen misschien dat de code je helpt.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
ul class="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
Dit is de navigatie menu en dan gaat hij naar de rest toe doormiddel van dit.
Code (php)
1
2
3
4
5
2
3
4
5
<div class="panel" id="menu">
of
<div class="panel" id="opening">
of
<div class="panel" id="actie">
of
<div class="panel" id="opening">
of
<div class="panel" id="actie">
etc etc. dus volgens mij gaat hij al naar de namen alleen staat er dan id ipv namen.
Ik heb zelf ook wat lopen zoeken op google en volgens mij is dit het ongeveer hetzelfde probleem??
site1
site2
Toevoeging op 09/12/2013 17:48:35:
Ik heb een beetje rondgespeeld met de resolutie op mijn scherm sinds ik zag dat het bij een grotere resolutie niet verschoof omdat ik heel de website zag. Dit betreft 1920 x 1080. Bij een resolutie van 1600 x 900 zag ik het probleem weer wel.. en bij een hele kleine resolutie van 800 x 600 zag ik dat de onderdelen van de website veel te groot waren. Is er een manier om dat te verkleinen wat misschien het probleem zou oplossen?
Gewijzigd op 09/12/2013 17:32:03 door Danny T
- SanThe - op 09/12/2013 17:55:40:
De oplossing van Kris lijkt mij perfect.
Helaas werkte die oplossing niet, misschien dat ik het verkeerd deed want toen ik het probeerde gebeurde er precies hetzelfde. Moet ik die div id weghalen en dan pas die naam erin zetten of die naam voor die div?
EDIT: Ik ga proberen de schermhoogte laten automatisch aanpassen voor elke resolutie.
Dank jullie wel voor jullie hulp.
Gewijzigd op 09/12/2013 18:21:34 door Danny T
Danny T op 09/12/2013 18:01:11:
Helaas werkte die oplossing niet,
O ja, ik zie wat je bedoelt.
(het content venster scrollt wel naar de juiste plek; maar ook de pagina zelf. Dus twee scroll bars die reageren)
Okay, andere tactiek.
Probeer dit eens uit; in een leeg .htm bestand.
Dus, in plaats van een content venster met scroll te maken;
heb ik een gewone pagina, waarbij de navigatie altijd op zijn plaats blijft staan.
Kan je daar mee verder?
Code (php)
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
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
<!doctype html>
<html>
<head>
<style>
.vulling {
/* dit simuleert een pagina met eventueel veel content.
Jij hebt .vulling niet nodig. */
height: 800px;
}
#content {
border: 1px solid #aaaaaa;
width: 840px;
margin-left: 140px;
}
.navigation {
position: fixed;
z-index: 10;
top: 100px;
border: 1px solid #aaaaaa;
}
li {
list-style: none;
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul class="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
</ul>
<div id="content">
<a name="home"></a>
<h2>Home</h2>
<div class="vulling">bla bla </div>
<a name="menu"></a>
<h2>Menu & Catering</h2>
<div class="vulling">bla bla </div>
<a name="opening"></a>
<h2>Openingstijden</h2>
<div class="vulling">bla bla </div>
<a name="actie"></a>
<h2>Actie</h2>
<div class="vulling">bla bla </div>
<a name="locatie"></a>
<h2>Locatie</h2>
<div class="vulling">bla bla </div>
</div>
</body>
</html>
<html>
<head>
<style>
.vulling {
/* dit simuleert een pagina met eventueel veel content.
Jij hebt .vulling niet nodig. */
height: 800px;
}
#content {
border: 1px solid #aaaaaa;
width: 840px;
margin-left: 140px;
}
.navigation {
position: fixed;
z-index: 10;
top: 100px;
border: 1px solid #aaaaaa;
}
li {
list-style: none;
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul class="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu & Catering</a></li>
<li><a href="#opening">Openingstijden</a></li>
<li><a href="#actie">Actie</a></li>
<li><a href="#locatie">Locatie</a></li>
</ul>
<div id="content">
<a name="home"></a>
<h2>Home</h2>
<div class="vulling">bla bla </div>
<a name="menu"></a>
<h2>Menu & Catering</h2>
<div class="vulling">bla bla </div>
<a name="opening"></a>
<h2>Openingstijden</h2>
<div class="vulling">bla bla </div>
<a name="actie"></a>
<h2>Actie</h2>
<div class="vulling">bla bla </div>
<a name="locatie"></a>
<h2>Locatie</h2>
<div class="vulling">bla bla </div>
</div>
</body>
</html>
Gewijzigd op 10/12/2013 09:11:53 door Kris Peeters