index pagina op zelfde pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

27/07/2020 11:20:55
Quote Anchor link
Hi,

Ik zou een indexpagina willen maken in interne linken (#).
Opzet links een div met de index en rechts de tekst.

Als er geklikt wordt op een index link zou de tekstlink moeten verspringen naar de juiste plaats. Dit zonder iframe.
Iemand een idee hoe dit kan?

Jan
 
PHP hulp

PHP hulp

12/12/2024 15:10:27
 
- Ariën  -
Beheerder

- Ariën -

27/07/2020 11:42:13
Quote Anchor link
Met AJAX kan je dat doen.

Er is zelfs een speciale add-on voor:
https://www.jqueryscript.net/loading/Content-URL-Hash-Hashy.html
Gewijzigd op 27/07/2020 12:06:45 door - Ariën -
 
Jan R

Jan R

27/07/2020 13:48:35
Quote Anchor link
De bedoeling is niet om een nieuw bestand te laden. Gewoon scrollen naar het anker in div 2 bij het klikken op de link in div 1
 
- Ariën  -
Beheerder

- Ariën -

27/07/2020 13:52:15
 
Jan R

Jan R

27/07/2020 14:12:08
Quote Anchor link
Je bracht me wel in de juiste richting:) Bedankt.

function scroll2(divname) {
var elmnt = document.getElementById(divname);
elmnt.scrollIntoView();
}
zie https://www.w3schools.com/jsref/met_element_scrollintoview.asp
 

27/07/2020 15:46:41
 
Rob Doemaarwat

Rob Doemaarwat

27/07/2020 16:11:13
Quote Anchor link
Eh, misschien misschien het exacte doel een beetje, maar volgens mij kan dit prima zoner welke plugin dan ook:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<a href='#tekst'>Klik hier om naar de tekst te gaan</a>
yada yada yada<br>
yada yada yada<br>
yada yada yada<br>
<div id='tekst'>De tekst</div>

Live voorbeeld: Ga naar de header van deze pagina
Gewijzigd op 27/07/2020 16:12:25 door Rob Doemaarwat
 
Ozzie PHP

Ozzie PHP

27/07/2020 16:15:21
Quote Anchor link
Voor de goede orde ... je bedoelt neem ik aan toch niet gewoon dit?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<div id="link1">Hoofdstuk 1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae justo odio. Vivamus id ex ultricies, posuere dui eu, ultricies ipsum. Maecenas et sem massa. Nam tempor, nisl nec laoreet efficitur, tellus sem tincidunt lacus, eu luctus augue enim quis mi. Pellentesque euismod laoreet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eget facilisis purus. Mauris maximus felis non sapien condimentum ullamcorper. Nullam quis purus non risus pulvinar tincidunt. Sed vehicula urna quam, ac tristique sapien bibendum id. Proin ultricies dui quis risus dictum tristique. Curabitur placerat bibendum sapien, sit amet venenatis massa consectetur at. Quisque purus tellus, laoreet vitae rutrum eget, vehicula vel orci. Sed suscipit, purus eleifend ultrices tincidunt, lorem mi hendrerit mauris, venenatis pretium augue diam eu justo. Aenean metus tellus, laoreet vel nibh vitae, ornare scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec et mattis nunc. Suspendisse eget lorem id leo dapibus pulvinar et aliquet lectus. Vestibulum et mauris id dui facilisis mollis quis at enim. Integer eu dapibus odio, a scelerisque turpis. Mauris tellus sem, molestie vel dapibus nec, malesuada sit amet nunc. Nunc iaculis, lorem in fermentum tristique, ipsum mi efficitur quam, suscipit varius tellus lacus eget nulla. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis maximus tortor sed tortor interdum pharetra. Mauris volutpat, lorem non sodales sagittis, enim nibh congue arcu, quis fermentum risus enim non tortor. Nunc sagittis, massa ac sagittis elementum, velit eros scelerisque lacus, non venenatis nulla metus eget nisi. In hac habitasse platea dictumst. Fusce nec finibus dui. Sed bibendum tempor leo, id gravida erat. Proin suscipit dignissim quam at molestie. Ut rutrum massa dolor, ut ornare metus sagittis rutrum.</p>

<div id="link2">Hoofdstuk 2</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae justo odio. Vivamus id ex ultricies, posuere dui eu, ultricies ipsum. Maecenas et sem massa. Nam tempor, nisl nec laoreet efficitur, tellus sem tincidunt lacus, eu luctus augue enim quis mi. Pellentesque euismod laoreet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eget facilisis purus. Mauris maximus felis non sapien condimentum ullamcorper. Nullam quis purus non risus pulvinar tincidunt. Sed vehicula urna quam, ac tristique sapien bibendum id. Proin ultricies dui quis risus dictum tristique. Curabitur placerat bibendum sapien, sit amet venenatis massa consectetur at. Quisque purus tellus, laoreet vitae rutrum eget, vehicula vel orci. Sed suscipit, purus eleifend ultrices tincidunt, lorem mi hendrerit mauris, venenatis pretium augue diam eu justo. Aenean metus tellus, laoreet vel nibh vitae, ornare scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec et mattis nunc. Suspendisse eget lorem id leo dapibus pulvinar et aliquet lectus. Vestibulum et mauris id dui facilisis mollis quis at enim. Integer eu dapibus odio, a scelerisque turpis. Mauris tellus sem, molestie vel dapibus nec, malesuada sit amet nunc. Nunc iaculis, lorem in fermentum tristique, ipsum mi efficitur quam, suscipit varius tellus lacus eget nulla. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis maximus tortor sed tortor interdum pharetra. Mauris volutpat, lorem non sodales sagittis, enim nibh congue arcu, quis fermentum risus enim non tortor. Nunc sagittis, massa ac sagittis elementum, velit eros scelerisque lacus, non venenatis nulla metus eget nisi. In hac habitasse platea dictumst. Fusce nec finibus dui. Sed bibendum tempor leo, id gravida erat. Proin suscipit dignissim quam at molestie. Ut rutrum massa dolor, ut ornare metus sagittis rutrum.</p>

<a href="#link1">Hoofstuk 1</a><br>
<a href="#link2">Hoofstuk 2</a>


Toevoeging op 27/07/2020 16:16:30:

Oh, Rob had al min of meer hetzelfde gepost zie ik :)
 
Thomas van den Heuvel

Thomas van den Heuvel

27/07/2020 16:49:05
Quote Anchor link
Is dit niet gewoon een single page application?

Misschien ook wel handig als de bookmark in de URL automatisch verandert.

> live voorbeeld
Gewijzigd op 27/07/2020 17:47:22 door Thomas van den Heuvel
 
Jan R

Jan R

27/07/2020 18:32:41
Quote Anchor link
Ad Fundum op 27/07/2020 15:46:41:

Wie zei dat er iets niet ging met jquery?

Mijn opzet is dus gelukt met de hulp van - Ariën -
https://www.janr.be/sc_post-gent/handleiding.php

De oplossing van Thomas, ozzie en rob worden geblokkeerd door de tag detail als die gesloten is. Via javascript kan ik die desgewenst ook openen.


Allen bedankt om mee te denken.

De url aanpassing ga ik eens bekijken.

Jan
 
Adoptive Solution

Adoptive Solution

27/07/2020 19:17:19
Quote Anchor link
Bedankt voor het meedenken :

Warning: Cannot modify header information - headers already sent by (output started at /customers/4/b/9/janr.be/httpd.www/sc_post-gent/handleiding.php:3) in /customers/4/b/9/janr.be/httpd.www/sc_post-gent/functies.php on line 148 Warning: Cannot modify header information - headers already sent by (output started at /customers/4/b/9/janr.be/httpd.www/sc_post-gent/handleiding.php:3) in /customers/4/b/9/janr.be/httpd.www/sc_post-gent/functies.php on line 149
 
Jan R

Jan R

27/07/2020 23:21:29
Quote Anchor link
Adoptive Solution op 27/07/2020 19:17:19:
Bedankt voor het meedenken :

Warning: Cannot modify header information - headers already sent by (output started at /customers/4/b/9/janr.be/httpd.www/sc_post-gent/handleiding.php:3) in /customers/4/b/9/janr.be/httpd.www/sc_post-gent/functies.php on line 148 Warning: Cannot modify header information - headers already sent by (output started at /customers/4/b/9/janr.be/httpd.www/sc_post-gent/handleiding.php:3) in /customers/4/b/9/janr.be/httpd.www/sc_post-gent/functies.php on line 149

?????????
Bij mij is het OK
 
- Ariën  -
Beheerder

- Ariën -

28/07/2020 00:09:48
Quote Anchor link
Hier bij mij gaat het ook niet goed...
https://www.janr.be/sc_post-gent/handleiding.php
Gewijzigd op 28/07/2020 00:10:11 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

28/07/2020 00:21:14
Quote Anchor link
Krijg ook alleen maar foutmeldingen.

Tijd om eens wat errorlogs door te gaan spitten.
 
- Ariën  -
Beheerder

- Ariën -

28/07/2020 00:30:24
Quote Anchor link
Handleiding.php, regel 3.
 
Jan R

Jan R

28/07/2020 08:08:49
Quote Anchor link
Gevonden.
Omdat bij mij al een paar gegevens in cookies stonden liep alles mooi door. Echter bij deze pagina en zelfs nog andere was er deze foutmelding.
Bij oproep van de index wordt automatisch het recentste toernooi geselecteerd of de selectie opgevraagd vanuit een koekje. Wat hier dus niet gebeurde gezien jullie nog niet recent keken naar deze site.

Sorry.
Jan
 



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.