pagina stukje naar beneden plaatsen

Status
Niet open voor verdere reacties.
F

fsasfsas

Gebruiker
Lid geworden
11 sep 2006
Berichten
429
Dag

Ik weet wat ik wil maar ik weet niet hoe het heet dus ik kan er ook niet goed naar zoeken. Hopelijk kan ik het wel goed omschrijven. Ik ben een website aan het maken met een sticky navbar en daaronder sticky breadcrumbs. Bij het opbouwen van een pagina valt de top van die pagina daar natuurlijk onder. Dit is af te vangen door elke pagina te beginnen met een leeg stukje (kan dat eleganter?). Echter: vanuit de index wordt met een verwijzing naar een plek in een bepaalde pagina gegaan. Op dat moment valt dus de tekst waar naar verwezen wordt een stukje onder de sticky dingen en is niet te lezen. Ik kan dat oplossen door steeds net onder de anchors diezelfde lege ruimte te scheppen maar als je dan te totale pagina beziet is er telkens uiteraard dat stuk lege ruimte zichtbaar her en der. Hoe kan ik dat oplossen?

Ik wil dus graag dat de pagina pas begint onder het sticky deel. Ook als ik vanuit een andere pagina niet naar de top maar middenin verwijs.
hopelijk kan iemand me helpen of heeft iemand een verwijzing.

groetjes, Anjo
 
Dit is af te vangen door elke pagina te beginnen met een leeg stukje (kan dat eleganter?).
Klik om te vergroten...
De div of section waar de tekst in staat kan je bovenaan een padding-top geven.

... met een verwijzing naar een plek in een bepaalde pagina gegaan .... stuk lege ruimte zichtbaar ...
Klik om te vergroten...
Als je de anchor wat hoger zet dus ergens in het tekstblok erboven?

Niet getest maar misschien kan je hiermee verder.
Met scrollBy scroll je een eindje verder.
Code: 
<script>
function ScrollTo(hash) {
  location.hash = "#" + hash;
  window.scrollBy(0,30);
}
</script>

Menu
<a href="javascript:void(0)" onclick="ScrollTo('tekst3')">Naar tekst 3</a>

Anchor
<h2 id="tekst3">Dit is tekst 3</h2>
 
Laatst bewerkt:
bron zei:
De div of section waar de tekst in staat kan je bovenaan een padding-top geven.
Klik om te vergroten...
Padding top. niet aan gedacht wel zitten pieren met margin maar dat hielp niet afdoende

bron zei:
Als je de anchor wat hoger zet dus ergens in het tekstblok erboven?
Klik om te vergroten...
Heb ik ook zitten proberen maar mede omdat het responsive is, is het niet altijd dezelfde hoeveelheid tekst die ik de anchor dan omhoog zou moeten zetten. (Extra complicatie is ook nog dat in veel van de bovenstaande blokken tekst (niet alle) een toggle button zit waarmee een deel van de tekst gecollapsed kan worden. maar misschien zit dat niet in de weg. Niet geprobeerd omdat sowieso de afstand al schermafhankelijk kan zijn omdat de tekst dat is.)

bron zei:
Met scrollBy scroll je een eindje verder.
Klik om te vergroten...
o hemel, ik heb totaal geen verstand van javascript. Wordt tijd dat ik dat eens leer/probeer.
Als ik het goed heb: het gedeelte tussen de script tags moet ik in de header zetten? Dan die <a href.... op de plek van waar ik naar een andere pagina met een anchor wil verwijzen. Het anchor gewoon waar die tekst staat waar ik naar toe wil (zoals gebruikelijk). Door het script zorgt dan dat een click op de verwijzing <a href.... me naar het anchor brengt en dat er meteen ook gescrolled wordt met een bepaalde hoeveelheid (0,30... zoek ik wel op). Als ik dan naar boven laat scrollen, zou ik mooi die sticky navbar kunnen omzeilen.
Heb ik dat zo goed begrepen?

Erg bedankt voor je antwoord!

groetjes, Anjo
 
De script versie kan verder worden uitgewerkt maar je komt dan dezelfde problemen tegen als bij de anchor in een hoger tekstblok. Het is de responsive breedte die de hoogte van de tekst variabel maakt. Daardoor zal window.scrollBy(0,30) niet goed werken.

Een mogelijke andere oplossing is dat iedere anchor met bijbehorende content in een eigen div staat. Iedere div geef je dan een padding-top. Hiermee heb je denk ik ook het gedoe van de responsive tekst en de collapsables opgelost.

Je had het over navbar... Bootstrap?
 
Laatst bewerkt:
yep, bootstrap. Scrollby kreeg ik inderdaad niet goed werkend. Ik ga morgen je andere voorstel (anchor in eigen div en die padding-top geven) proberen.
Ben een behoorlijke leek. Probeer het al doende te leren.

Dank je wel!

groetjes, Anjo
 
Klaarblijkelijk doe ik toch iets fout. Ik heb het getest op twee eenvoudige bestanden. Ik heb een simpel bestand test.php en daarin staat een verwijzing naar een anchor in test1.php. Als volgt:
in test.php staat:
HTML: 
<a href="https://www.bladie.com/test1.php#barlink">Jump test1</a>
in test1.php staat in de header:
HTML: 
<style>
.anchor { padding-top: 100px; }
</style>
en in de body:
HTML: 
<div class="anchor" <a  id="barlink"></a>bladiebla enz</div>
Als ik vanuit test naar test1 spring met de ref, gaat het prima. Als ik echter test1.php zelf bekijk, zit ik nog steeds midden in de scheiding tussen de teksten met de witruimte boven dat anchor. Enig idee wat ik fout doe?

groetjes, Anjo
 
Kan je hiermee verder? Test 't even in een testbestand met een navbar-fixed-top menu.
Code: 
<div class="block">
<a id="text1" class="anchor"></a>
TEXT 1<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>

<div class="block">
<a id="text2" class="anchor"></a>
TEXT 2<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>

<div class="block">
<a id="text3" class="anchor"></a>
TEXT 3<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>

body {
  /* scroll naar beneden bij eerste tekstblok */
  padding-top: 50px;
}
.anchor {
  /* scroll naar beneden bij anchor */
  padding-top: 50px;
  margin-top: -50px;
  width: 1px; /*Opera*/
  display: hidden;
}
.block {
  /* beetje witruimte onderaan tekstblokken */
  padding-bottom: 15px;
}
Suc6. Have fun.
 
Dag

Ik heb het gestest zonder fixed menu maar in principe kun je dan zien of het blokje tekst dan helemaal aan de top staat of een beetje lager zodat er ruimte is foor het fixed menu.

Je code werkt (dank!) maar het vreemde is nu dat het alleen maar werkt met een style tag. Niet als ik het in de css zet. Ben ik nou dom? Ik dacht altijd dat dat hetzelfde was.

Ik heb nu een bron.php waar in staat:

HTML: 
<html>
<head>
    <link href="css/bron.css" rel="stylesheet" type = "text/css" />
</head>
<body>

<a href="https://www.bladie.com/bron1.php#text1">Jump bron1</a>

Dan heb ik een bron1.php waar het anchor in staat (ik heb er mijn naam ingezet omdat ik dacht dat er wellicht ergens iets interfereerde met de naam anchor):

HTML: 
<head>

<style>
body {
  /* scroll naar beneden bij eerste tekstblok */
  padding-top: 50px;
}
.anchor-anjo {
  /* scroll naar beneden bij anchor */
  padding-top: 50px;
  margin-top: -50px;
  width: 1px; /*Opera*/
  display: hidden;
}
.block {
  /* beetje witruimte onderaan tekstblokken */
  padding-bottom: 15px;
}
</style>

</head>

<body>
en dan even verderop (waar ik dus naar wil verwijzen vanuit bron.php
HTML: 
<div class="block">
<a id="text1" class="anchor-anjo"></a>

TEXT 1<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>

</div>

In dit document staan dus die style tags.
Dit werkt! waarvoor uiteraard mijn grote dank.
Als ik die style dingen echter in een bestand bron.css plaats waar ik naar verwijs in bron.php dan werkt het niet. Er staat niks anders in die css file en ik laad ook nergens anders iets. Zie ik iets heel eenvoudigs over het hoofd?
 
oeps, excuseer. Door alle tumult vergeten dat de style file ook bij bron1 geladen dient te worden. Sorry! Ga meteen even opnieuw proberen

groetjes, Anjo
 
Dag

Dat was inderdaad het domme probleem. Ik heb zo zitten heen-en-weren met diverse commando's dat ergens in dat proces de link naar de stylesheet mis gegaan is. Ik heb het nu werkend, im de omgeving waar het ook in hoort. Er is dus geen interferentie met andere dingen. Ik heb overigens de padding-top voor de body weggelaten want dat zat de rest van het design in de weg en is nog niet nodig. De pagina waar ik naar verwijs begint met een plaatje. Als ik merk dat het toch een probleem is, kan ik 'm altijd nog specifieker maken.

met veel dank voor je hulp

groetjes, Anjo
 
Heel graag gedaan! Succes met je bootstrap website :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan