jQuery scrollto
via php genereer ik een id bij een link. Bij het klikken op de link wordt de pagina herladen terwijl er data weggeschreven wordt.
Code (php)
1
2
3
2
3
<?php
<a href="http://www.test.be/vast.php?weekday=2&starttime=10:15&endtime=10:29&action=available&reference=220:15" id="220:15"><img ... /></a>
?>
<a href="http://www.test.be/vast.php?weekday=2&starttime=10:15&endtime=10:29&action=available&reference=220:15" id="220:15"><img ... /></a>
?>
Nu dacht ik met dit stukje code ervoor te zorgen dat de pagina de focus terug zou zetten op de laatst aangeklikte link:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
<script>
$(document).ready(function (){
$("#220:15").click(function (){
$('html, body').animate({
scrollTop: $("#220:15").offset().top
}, 2000);
});
});
</script>
?>
<script>
$(document).ready(function (){
$("#220:15").click(function (){
$('html, body').animate({
scrollTop: $("#220:15").offset().top
}, 2000);
});
});
</script>
?>
Maar dus niet. Ligt dit aan het feit dat de pagina herladen wordt waardoor de actie 'click' voor het stukje javascript niet in het eerst actieve document zelf plaatsvind maar pas in de nieuwe geopende waar er dan eigenlijk nog geen 'click' gebeurd?
groetjes
Gewijzigd op 22/11/2012 15:16:56 door Bart C
Bart C op 22/11/2012 15:16:28:
... Ligt dit aan het feit dat de pagina herladen wordt waardoor de actie 'click' voor het stukje javascript niet ...
Ja, inderdaad; daar ligt het aan.
Daarvoor was vroeger een oplossing bedacht: live()
ipv.
$("#220:15").click(function (){
doe je:
$("#220:15").live("click", function (){
Dan wordt dat ook uitgevoerd voor elementen die dynamisch zijn geladen.
Tegenwoordig kan dat ook met on() (en off() om het uit te zetten)
Code (php)
1
$("#220:15").on("click", function (){
Uitleg en referentie:
http://api.jquery.com/on/
Video tutorial over dit alles (trouwens, bekijk de rest van de tutorial ook, als je tijd hebt):
https://tutsplus.com/lesson/bind-live-delegate-huh/
dank je voor de interessante link!
Ik krijg het niet werkende. Kan het zijn omdat ik het script via php opbouw?
LINK waarop je klikt en waar er opnieuw naartoe gescrolld moet worden:
Code (php)
1
2
3
2
3
<?php
$link = '<a href="vast.php?weekday='.$i.'&starttime='.$row['StartTime'].'&endtime='.$row['EndTime'].'&action=available&reference='.$reference.'" id="'.$reference.'"><img src="./img/edit.png" /></a>';
?>
$link = '<a href="vast.php?weekday='.$i.'&starttime='.$row['StartTime'].'&endtime='.$row['EndTime'].'&action=available&reference='.$reference.'" id="'.$reference.'"><img src="./img/edit.png" /></a>';
?>
Wanneer je op deze link klikt wordt de pagina opnieuw geladen en worden de gegevens uit de url weggeschreven.
Dan controleer ik ook of de parameter 'reference' aanwezig is:
Nadien wordt deze variabele in deze functie gebruikt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
echo '$(document).ready(function (){
$(\'#'.$reference.'\').live("click", function('.$reference.'){
$(\'html, body\').animate({
scrollTop: $(\'#'.$reference.'\').offset().top
}, 2000);
});
});';
?>
echo '$(document).ready(function (){
$(\'#'.$reference.'\').live("click", function('.$reference.'){
$(\'html, body\').animate({
scrollTop: $(\'#'.$reference.'\').offset().top
}, 2000);
});
});';
?>
Kan dit? Zelfs met live()?
Moet ik $('#referentie') of $('referentie') gebruiken.
Ik verwijs dus niet naar de href maar wel naar de id van de <a>-tag.
Gewijzigd op 22/11/2012 22:01:23 door Bart C
De functie waarin de reactie wordt gegeven, geef je een parameter e. Die bevat informatie over het evenement (muiscoördinaten van de klik, de target, ...). Je mag dat niet overschrijven door een parameter die je zelf in de functie kan gebruiken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
echo '
$(document).ready(function () {
$("#' . $reference . '").live("click", function(e) { // deze paramater e dus niet vervangen door iets anders
// het aangesproken element kan je bereiken met this. this is dus dat element waarop de gebruiker geklikt is
$("html, body").animate({
scrollTop: $(this).offset().top
}, 2000);
});
});';
?>
echo '
$(document).ready(function () {
$("#' . $reference . '").live("click", function(e) { // deze paramater e dus niet vervangen door iets anders
// het aangesproken element kan je bereiken met this. this is dus dat element waarop de gebruiker geklikt is
$("html, body").animate({
scrollTop: $(this).offset().top
}, 2000);
});
});';
?>
En verder ... Wanneer je javascript genereert met php, controleer altijd wat dat geeft in de HTML broncode; dan pas zie je of je gedaan hebt wat moet.
Want het is soms wat verwarrend; welke accolade of haakje hoort bij php, welke bij javascript ... php-concateneren met punt; js-concateneren met + ...
----
Iets anders ... je kan dit ook allemaal bereiken met ouderwetse HTML.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
bla ... bla
...
<a name="mijn_anker"></a>
<p> tekst die hoort bij dit item mijn_anker</p>
...
<a href="#mijn_anker">Scroll naar mijn_anker</a>
...
<a name="mijn_anker"></a>
<p> tekst die hoort bij dit item mijn_anker</p>
...
<a href="#mijn_anker">Scroll naar mijn_anker</a>
Gewijzigd op 23/11/2012 14:15:53 door Kris Peeters
Kris Peeters op 23/11/2012 14:04:13:
Je mag dat niet overschrijven door een parameter die je zelf in de functie kan gebruiken.
Dag Kris,
inderdaad, dat was een foutje van mij. Ik had die laten staan.
Ik zou dit inderdaad kunnen met ouderwetse html maar ik wou eens iets anders proberen. Trouwens, heel interessante website die tutsplus.com! Zal ik zeker benutten.
Ik heb het document even online gezet om te testen
http://www.restaurantterpolder.be/wachtkamer/vast.php
De jquery wordt goed opgebouwd maar het werkt niet.
Is het beter om te werken met #refnr in de url ipv ?reference=refnr?
Gewijzigd op 23/11/2012 14:54:19 door Bart C
Dan gaat het niet meer om een click event, maar moet die animate uitgevoerd worden als de pagina wordt geladen
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
$(document).ready(function (){
$("html, body").animate({
scrollTop: $("#717:45").offset().top
}, 2000
);
});
</script>
$(document).ready(function (){
$("html, body").animate({
scrollTop: $("#717:45").offset().top
}, 2000
);
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
var url = windows.location.pathname;
var hash = url.substring(url.indexOf("#")+1);
$(document).ready(function (){
$("html, body").animate({
scrollTop: $("#"+hash"").offset().top
}, 2000
);
});
</script>
var url = windows.location.pathname;
var hash = url.substring(url.indexOf("#")+1);
$(document).ready(function (){
$("html, body").animate({
scrollTop: $("#"+hash"").offset().top
}, 2000
);
});
</script>
Dit werkt zoals het zou moeten werken maar nu kom ik erachter dat het systeem niet perfect is :p
Als ik een link aanklik die onderaan de pagina dan reload hij hem, indien mogelijk, boven aan de pagina (wat natuurlijk logisch is met die anchors). Dat zorgt ervoor dat de pagina toch nog af en toe verspringt naar een andere locatie.
Een beter systeem zou zijn om via ajax gewoon dat ene element te herladen. Ik moet de inhoud wel opnieuw inladen (andere link inzetten) maar vooral moet er een andere css-klasse aan toegewezen worden.
Gewijzigd op 23/11/2012 16:14:11 door Bart C