Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 12 van 12

Onderwerp: pagina stukje naar beneden plaatsen

  1. #1
    Vraag is opgelost

    pagina stukje naar beneden plaatsen

    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

  2. #2
    Mega Senior bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Dit is af te vangen door elke pagina te beginnen met een leeg stukje (kan dat eleganter?).
    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 ...
    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 aangepast door bron : 13 augustus 2017 om 18:16
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc. Bron

  3. #3
    Quote Origineel gepost door bron Bekijk Bericht
    De div of section waar de tekst in staat kan je bovenaan een padding-top geven.
    Padding top. niet aan gedacht wel zitten pieren met margin maar dat hielp niet afdoende

    Quote Origineel gepost door bron Bekijk Bericht
    Als je de anchor wat hoger zet dus ergens in het tekstblok erboven?
    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.)

    Quote Origineel gepost door bron Bekijk Bericht
    Met scrollBy scroll je een eindje verder.
    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

  4. #4
    Mega Senior bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    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 aangepast door bron : 13 augustus 2017 om 22:13
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc. Bron

  5. #5
    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

  6. #6
    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 Code:
    1
    
    <a href="https://www.bladie.com/test1.php#barlink">Jump test1</a>
    in test1.php staat in de header:
    HTML Code:
    1
    2
    3
    
    <style>
    .anchor { padding-top: 100px; }
    </style>
    en in de body:
    HTML Code:
    1
    
    <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

  7. #7
    Mega Senior bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    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.
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc. Bron

  8. #8
    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 Code:
    1
    2
    3
    4
    5
    6
    7
    
    <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 Code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <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 Code:
    1
    2
    3
    4
    5
    6
    
    <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?

  9. #9
    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

  10. #10
    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

  11. #11
    Mega Senior bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Heel graag gedaan! Succes met je bootstrap website
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc. Bron

  12. #12
    dank je wel!

    groetjes, Anjo

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren
Aanbiedingen