login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery, maar ook de url veranderen. (Opgelost)

Offline Jelmerholland - 06/04/2010 22:43
Avatar van JelmerhollandPHP beginner Mensen,

is het mogelijk om de url te veranderen zonder dat de pagina gerefreshed wordt?

Want ik heb momenteel deze pagina,
http://www.jdwe...=portfolio
maar nou zou ik graag, dat als je bijvoorbeeld op Lay-Outs drukt, dat dit dan de url wordt:
http://www.jdwe...v=Lay-Outs

Ik gebruik momenteel deze code voor mijn tabbladen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function(){
  2.  
  3. 	var TabContent = $('#SubNav > div.TabContent');
  4. 	TabContent.hide();
  5.  
  6. 	$('#SubNav ul.TabNavigation li a').click(function(){
  7. 		TabContent.hide().filter(this.hash).fadeIn(500);
  8.  
  9. 		$('#SubNav ul.TabNavigation li a').removeClass("active");
  10. 		$(this).addClass("active");
  11.  
  12. 		return false;
  13.  
  14. 	}).filter(':first').click();
  15.  
  16. });


Maar is het dus mogelijk om ook de url aan te passen? Want dan kunnen mensen rechtstreeks naar een bepaalde pagina linken, en dan kan ik beter een back function enzo invoeren. Zodat als je op een gegeven moment 1 item bekijkt (op een losse pagina dmv get) dat je dan op back kan drukken..

Let op, het is niet alleen voor een back functie, maar dus ook zodat ik een betere url krijg! Voor direct links etc!

Ik wil dit per sé in jQuery maken omdat ik er zo mooie effecten overheen kan gooien, met slideIn() en dat soort functies, en het laadt snel.

Jelmer

17 antwoorden

Gesponsorde links
Offline Hopsy - 06/04/2010 23:04 (laatste wijziging 06/04/2010 23:05)
Avatar van Hopsy Nieuw lid jup is mogelijk, dan moet je met httpd + anchors kloten

met jou link gaat het dus niet werken

Edit:
http://blog.reb...ith-jquery/

maar er was een handige jquery plugin ervoor, alleen kan ik hem niet vinden 
Offline vinTage - 06/04/2010 23:20
Avatar van vinTage Nieuw lid
Hopsy schreef:
j
maar er was een handige jquery plugin ervoor


deze "variant" ?
Offline Jelmerholland - 07/04/2010 06:52
Avatar van Jelmerholland PHP beginner Hopsy,

van de link die jij gaf, haal ik dit af:
Citaat:
// don't include return false! you want the URL
// to change to reflect which panel is showing --
// the next step will make it so that all of the anchors
// will be at the top of the page, so the fact that this
// returns true won't cause the page to scroll to the anchor.


Moet ik misschien de 'return false;' van regel 12 weghalen, of heb ik dan nog geen direct links? Of gaat ie dan m'n url veranderen en 'm laten refreshen? (kan 't nou niet testen, zit op laptop..)
Offline Martijn - 07/04/2010 20:19
Avatar van Martijn Crew PHP Je kunt ook anchors gebruiken, doe ik ook

index.php#home
index.php#Nieuw Bericht
index.php#Verwijder Iets

Werkt prima. En spaties is niet erg, want je doet toch niets met de anchors 
Offline Jelmerholland - 07/04/2010 20:23 (laatste wijziging 07/04/2010 21:41)
Avatar van Jelmerholland PHP beginner Ik werk nu met de volgende code:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function(){
  2.  
  3. 	$.urlParam = function(name){ //Get Parameter from URL
  4. 		var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
  5. 		return results[1] || 0;
  6. 		}
  7.  
  8. 	var TabContent = $('#SubNav > div.TabContent');
  9. 	TabContent.hide();
  10.  
  11.  
  12. 	$('#SubNav ul.TabNavigation li a').click(function(){
  13. 		$.address.value($(this).attr('href').replace(/^#/, ''));  
  14. 		TabContent.hide().filter('#'+$.urlParam('Sub')).fadeIn(500);
  15.  
  16. 		$('#SubNav ul.TabNavigation li a').removeClass("active");
  17. 		$(this).addClass("active");
  18.  
  19. 		return false;
  20.  
  21. 	}).filter(':first').click();
  22.  
  23. });


Het werkt in principe goed, maar ik krijg nu zo'n url:
"http://jdwebdesign.nl/nieuw/index.php?p=portfolio#/&Sub=Projecten"
Na 'portfolio' staat er ineens een '#/'

Is de replace regel die ik in mijn functie heb staan (regel XX) wel goed?

Of moet ik eerst een replace plug-in downloaden? Want hij staat niet in de api van jquery.. en ik kan er verder niks over vinden.

Enig idee hoe ik dit verder moet uitwerken? Want ik moet eigenlijk wel van die '#/' af 
Offline vinTage - 07/04/2010 21:43
Avatar van vinTage Nieuw lid je kan niet van die # af.
Offline Jelmerholland - 07/04/2010 21:44
Avatar van Jelmerholland PHP beginner Hmm, hoezo niet dan?

Want die wordt er toch in gepropt door 't een of 't ander? Want ik werk niet meer met die 'hash'
Offline vinTage - 07/04/2010 21:47
Avatar van vinTage Nieuw lid Je krijgt die niet weg omdat je met anchors werkt en die beginnen nu eenmaal met een #.
Die # is ook clientside (net zoals js), je kan bv niet $_GET['#'] doen.
Offline Jelmerholland - 07/04/2010 21:51
Avatar van Jelmerholland PHP beginner Maar ik werk niet meer met anchors ;)

Misschien moet ik maar even een stukje html uploaden.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <li>
  2. 	<a href="&Sub=Projecten" rel="address:&Sub=Projecten">Projecten</a>
  3. </li>


Ik gebruik wél de anchor-tag, maar die bedoel jij niet..

Maar zoals je ziet gebruik ik nou een gewone extra &Sub=Projecten, ik haal nou ook, als je klikt, de sub niet geopend moet worden uit de url (alleen bij een klik, moet nog zorgen dat het met een deep-link ook werkt)
Offline vinTage - 07/04/2010 21:54
Avatar van vinTage Nieuw lid
Jelmerhollan schreef:
Ik gebruik wél de anchor-tag, maar die bedoel jij niet..


je gebruikt die WEL, daar zorgt die plugin voor he..
Offline Jelmerholland - 07/04/2010 21:56
Avatar van Jelmerholland PHP beginner Zat net nóg een keer die plugin door te lezen, sorry mijn fout... klopt wat je zegt. maar is die plugin dan niet dusdanig om te bouwen dat ik die '/#' weg kan halen? Want dat zou wel heel mooi zijn eigenlijk (A)
Offline vinTage - 07/04/2010 22:00
Avatar van vinTage Nieuw lid Nee die # kan nog steeds niet weg
Offline Jelmerholland - 07/04/2010 22:06
Avatar van Jelmerholland PHP beginner Scheisse..

Maar dan nog een vraag.

ik maak van (regel 14) ':first' --> '.Flash', dan opent hij netjes als eerste de flash sub.
Maar als ik van (regel 14) ':first' --> ''.'+$.urlParam('Sub')' maak, dan doet hij 't ineens niet goed, als ik dan een deep-link geef :/, enig idee hoe dat kan? Want het is exact het zelfde als de Flash, dus als je in de url 'Sub=Flash' hebt staan, zou die dus in theorie de flash moeten openen als eerste, maar dat doet ie niet 

Voor wat ik op 't moment heb:
http://www.JDwe...=portfolio
Offline vinTage - 07/04/2010 22:08
Avatar van vinTage Nieuw lid Haal eerst je errors eruit voor je gaat vragen svp
Bedankt door: Jelmerholland
Offline Jelmerholland - 07/04/2010 22:42
Avatar van Jelmerholland PHP beginner Oeh, daar had ik nog niet eens op gechecked, goed dat je 't zegt!
Offline vinTage - 07/04/2010 22:54
Avatar van vinTage Nieuw lid Nu niet om te katten he, maar eerlijk gezegd vind ik die "overgangen" behoorlijk kl*te, het neigt weer naar de (ie only en uberoutdated) transitions 
Offline Jelmerholland - 07/04/2010 23:22
Avatar van Jelmerholland PHP beginner Je bedoelt die '.hide()' en '.fadeIn(500)'? Enige suggesties nog misschien? Die errors zal ik zo spoedig mogelijk proberen te verhelpen, maar ik ga nou slapen.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.177s