php - Overfør variable om position på skærmen til et link - Udvikleren.dk

Tags: php javascript jquery

Bruger #17540 @ 13.02.13 14:20

Hej alle sammen

Jeg er i gang med at lave en hjemmeside som består af én enkel lang side, som man scroller op og ned på.

Der er en fixed menu i toppen af vindue der gør det muligt at skifte sprog : jeg har lavet en engelsk knappe der overfører en variable "sprog=engelsk" til siden, som får siden til at tilkalde inholdet af en "engelsk.php" side og placere det det rigtige sted.
Dette gøres med php.

Men når man trykker på knappen reloades siden helt, og jeg hopper derfor helt op på siden, i stedet for at blive der hvor jeg er, og blot se indholdet skifte fra dansk til engelsk.

Jeg vil gerne høre om nogen kan hjælpe mig med at finde en løsning der får knappen til også at overføre en variable om brugerens position på siden.
Jeg har læst lidt om jQuery.ScrollTo eller om window.pageYOffset men jeg ved ikke hvordan jeg implementere disse ting.

Der skal så:
- læses position på siden
- gemme den i en variable
- overføre denne variable i det link, der får sproget til at skifte
- få hjemmesiden til at skifte sprog mens brugeren forbliver samme sted på siden som han/hun var, da han/hun klikkede på knappen.

Jeg er som I kan fornemme ikke rutineret med javascript, og mangler den erfaring der skal til at implementere det jeg læser på internet til en konkrete løsning.

På forhånd mange tak for hjælpen!

10 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #8884 @ 13.02.13 19:22

300

Hej Lucie.

For at finde ud af hvor langt din bruger er scrollet fra toppen kan du bruge dette stykke jQuery:

JScript kode

 $(document).ready(function(){
      var pixelsFraTop = $(document).scrollTop();
 });

Når du ved hvor langt din bruger er fra toppen kan du lave et script der får brugeren til at komme tilbage til den samme placering.

JScript kode

 $(document).ready(function(){
      var pixelsFraTop = $(document).scrollTop();
 
      $('html, body').animate({
           scrollTop: pixelsFraTop,
      }, 1000);
 
 });

Det er lidt svært at fortælle dig præcis du kan bruge denne variabel når jeg ikke ved hvordan du loader indholdet fra den engelske side. (loader du med AJAX eller direkte link etc.)

Men det kan i hvert fald få dig noget af vejen.

Mvh. Andreas Voss.

Bruger #8884 @ 14.02.13 13:19

300

En måde du kan videresende informationen direkte via linket kunne være ved at ændre linket hver gang der scrolles, det kræver at du giver dine knapper et id så de kan identificeres af jQuery.

HTML kode

 <ul>
     <li><a id="danKnap" href="index?lang=english"><img src="image/en.jpg">English</a></li>
     <li><a id="engKnap" href="index?lang=danish"><img src="image/da.jpg">Dansk</a></li>
 </ul>

Så for at ændre dit URL:

JScript kode

 $(document).ready(function(){
     $(document).scroll(function(){
         $('#danKnap').attr('href', 'index.php?lang=danish&fratop='+pixelsFraTop);
         $('#engKnap').attr('href', 'index.php?lang=english&fratop='+pixelsFraTop);
     });
 });

Så kan du hente det ind til en variabel på din næste side ved at bruge lidt javascript og php i din index fil.

HTML kode

 <script type="text/javascript">
 $(document).ready(function(){
     var jumpTo = <?php echo $_GET['fratop']; ?>;
     $('html, body').animate({
          scrollTop: jumpTo,
     }, 1000);
 });
 </script>

Så skulle den gerne scrolle til samme placering. Jeg ved ikke om dette er den mest ideelle løsning, men den skulle gerne virke og så kan du altid selv arbejde videre på at optimere den osv.

Indlæg senest redigeret d. 14.02.2013 13:20 af Bruger #8884

Bruger #17540 @ 14.02.13 11:21

Hej Andreas

Mange tak for dit svar.

Vedr. hvordan jeg loader indholdet ind =

Jeg har et lille stykke php der siger:
<?php
if($_GET['lang']=="dansk"){include("dansk.php");
}
elseif($_GET['lang']=="english"){
include("english.php");
}
else{
include("dansk.php");
}
?>

Og knapperne der sådan ud:
<ul>
<li><a href="index?lang=english"><img src="image/en.jpg">English</a></li>
<li><a href="index?lang=danish"><img src="image/da.jpg">Dansk</a></li>
</ul>

Derfor bliver "english.php" loadet ved klik på den første knappe, og "dansk.php" ved klik på den anden knappe.

Hvordan får jeg så overført variablen "pixelsFraTop" til mit link, således at man forbliver samme sted på siden som man har indlæst med dit script?

Bruger #17540 @ 14.02.13 14:19

Hej Andreas

Tak for dit svar.
Jeg har implementeret dit forslag, og kan se at der bliver overført en position på url'en når jeg klikker på en af knapperne - så langt så godt.

Positionen er til gengæld altid lige med 0.

Min side består til gengæld af én enkel lang side (parallax hjemmeside), og mine knapper er placeret ved hjælp af "position:fixed" i den øverste højre hjørne, så man til enhver tid kan skifte sprog, selvom man har scrollet langt ned på siden.

Kan det være at det er denne "position=fixed" der gør, at positionen altid = 0?

Her kan du se siden (under construction): Link

Bruger #17081 @ 14.02.13 14:21

1.258

JScript kode

 $(document).ready(function(){
     $(document).scroll(function(){
         $('#danKnap').attr('href', 'index.php?lang=danish&fratop='+pixelsFraTop);
         $('#engKnap').attr('href', 'index.php?lang=english&fratop='+pixelsFraTop);
     });
 });

Jeg ville nok lave koden om for, at lave performance lidt bedre, så jQuery (og javascript) ikke skal finde id'et igen og igen for hver gang der scrolles og samtidigt også gøre den uafhængig af id's.

JScript kode

 $(function () {
   var $this = $(window),
       $links = $(".link");
 
   $(document).scroll(function (event) {
     var position = $this.scrollTop();
     $links.each(function(idx, elm) {
       var href = elm.attr("href");
       href = (href.indexOf("&fratop") > 0) 
         ? href.split("&fratop")[0] + "&fratop="+position
         : href + "&fratop="+position;
 
       elm.attr("href",href);
     });
   });
 });

HTML kode

 <script type="text/javascript">
  $(document).ready(function(){
      var jumpTo = <?php echo $_GET['fratop']; ?>;
      $('html, body').animate({
           scrollTop: jumpTo,
      }, 1000);
  });
  </script>

Ville jeg lave om til:

HTML kode

 <?php if (isset($_GET['fratop']) && is_numeric($_GET['fratop'])): ?>
 <script type="text/javascript">
  $(function () {
      $('html, body').animate({
           scrollTop: <?php echo $_GET['fratop']; ?>,
      }, 1000);
  });  
  </script>
 <?php endif ?>

Indlæg senest redigeret d. 14.02.2013 14:22 af Bruger #17081

Bruger #17540 @ 14.02.13 14:59

Hej Dan

Som sagt er jeg ikke ekspert i java-script.
Men jeg kan ikke forstå ud fra det du har skrevet hvordan "fratop" værdien overføres til knappernes links?

Betyder $(".link") at jeg skal tilføje en class "link" til mine sprog links?

Bruger #17081 @ 14.02.13 15:45

1.258

hej Lucie ja, det gør det

Indlæg senest redigeret d. 14.02.2013 15:45 af Bruger #17081

Bruger #13363 @ 14.02.13 16:13

160

(OPS: Langt svar med mulighed for underlige sætninger)

Hej Lucie

jeg ved godt at du efterspørger hvordan du kan få din egen løsning til at virke, men jeg håber at jeg må komme med en anden måde at løse "problemet" på.

Løsningen du efterspørger (Og de løsninger folk kommer med) er lidt omvendt af hvad javascript og ajax er til for at løse, i hvert fald i nogle henseender.
Ideen er super god og godt fundet på. Men jeg ville gribe det an på en anden måde.

I stedet for at du har et link, eller en knap, der heletiden holder styr på hvor siden er positioneret når der bliver trykket på den, kunne man nøjes med at linket, med hjælp fra javascript, ændre sproget på den side man befinder sig på og så sætter en cookie der holder styr på sproget, til at være det valgte sprog bag om ryggen på brugeren ved hjælp af ajax. Dette betyder at der ikke behøves at laves en opdatering af siden når brugeren trykker på linket, så siden bliver stående på samme position, men med nysproget tekst.

Jeg ved ikke om du har styr på brugen af cookies og sessions. Men hvis du har så kunne du bruge en cookie til at huske hvilket sprog den besøgende har valgt.

Jeg håber ikke at mit forslag er alt for forvirrende og at du kan bruge det til noget.

Indlæg senest redigeret d. 14.02.2013 16:22 af Bruger #13363

Bruger #17540 @ 14.02.13 16:17

Til Dan:

Nå. Det virker ikke hos mig, men mon ikke jeg har skrevet et eller andet forkert eller skrevet det det forkerte sted.
Der er i hvert fald ikke tegn på at der bliver overført en position værdi til mine links når jeg klikker på dem...

Se hvordan min kode nu ser ud

HTML kode

 <head>
     <?php if (isset($_GET['fratop']) && is_numeric($_GET['fratop'])): ?>
      <script type="text/javascript">
       $(function () {
           $('html, body').animate({
                scrollTop: <?php echo $_GET['fratop']; ?>,
           }, 1000);
       });  
       </script>
      <?php endif ?>
 </head>

og så derefter på mine knapper

HTML kode

 <ul>
      <li><a class="link" href="index_fleresproget.php?lang=english" alt="english"><img src="img/en.jpg" alt="english">English</a></li>
      <li><a class="link" href="index_fleresproget.php?lang=dansk" alt="dansk"><img src="img/da.jpg" alt="dansk">Dansk</a></li>
 </ul>

Og min java-script

JScript kode

 $(function () {
    var $this = $(window),
        $links = $(".link");
  
    $(document).scroll(function (event) {
      var position = $this.scrollTop();
      $links.each(function(idx, elm) {
        var href = elm.attr("href");
        href = (href.indexOf("&fratop") > 0) 
          ? href.split("&fratop")[0] + "&fratop="+position
          : href + "&fratop="+position;
  
        elm.attr("href",href);
      });
    });
  });

Er der noget jeg har misforstået?

Til Tommy

Hej Tommy Hansen

Tak for dit forslag.
Jeg kender ikke noget til cookie og Ajax (har prøvet at google Ajax lidt og det så skræmmende ud)

Måske kan jeg finde ud af det med cookie - jeg mener at jeg prøvet det før, men kan ikke rigtig huske det.

Men hvis du kunne hjælpe mig med hvad det er jeg skal lede efter når jeg googler Ajax? Fordi jeg er på bare bund. Jeg ved ikke en gang om det er en sprog eller en function, om det hører til java-script på et eller andet måde eller overhovedet ikke, og hvordan det implementeres i min eksisterende html/php side.

Indlæg senest redigeret d. 14.02.2013 16:31 af Bruger #17540

Bruger #13363 @ 16.02.13 17:51

160

Cookies er ikke så svært igen.
Du kan læse lidt om det her

Ang. ajax så er det heller ikke så vanskeligt med hjælp fra jQuery.
Jeg kan desværre ikke komme med noget konkret eksempel på hvordan det kan laves, da jeg ikke er hjemme i øjeblikket (Derfor også den lidt langsomme svartid). Men jeg kan godt prøve at komme med et inden for et par dage.

Hvordan ser de filer du har de forskellige sprog i ud?

Overfør variable om position på skærmen til et link

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler