Hoi ptb,
Juist ja: de pagina's staan bol van de javascripts!
Wat er gebeurt is het volgende.
In het menu van de cleanpage.html staat:
HTML:
<ul id="menu">
<li class="about"><a href="Index.html" title="About Pattoziac">About Us</a></li>
<li class="portfolio"><a href="#portfolio" title="Things I created">Projects</a></li>
<li class="social"><a href="#social" title="Places I hang out">Social</a></li>
<li class="contact"><a href="#contact" title="Get in touch!">Contact</a></li>
</ul>
- De eerste link zou naar de startpagina moeten gaan, maar door het slider-script wordt hiervan "het eerste slider-item op de cleanpage" gemaakt. Daar staat de slider bij opening van de cleanpage.html al op > dus er gebeurt niets.
- De andere 3 links uit het menu zijn bladwijzers op de pagina cleanpage zelf. Door het slider-script wordt dan naar het 2e, 3e en 4e slider-item op de clean-page gegaan. Maar die zijn er niet!
- Dus de begin-tekst schuift wel keurig naar links buiten beeld ... maar er komt "cleanspace" voor in de plaats: niets!
- Als je nogmaals op About Us klikt, ga je niet naar de AboutUs op de homepage, maar schuift de begin-tekst van de cleanpage weer terug.
Er moeten dus een paar dingen gebeuren:
1. Op cleanpage.html moet het slider-script worden uitgeschakeld
Dat is eenvoudig het schrappen uit de <head> van de aanroep van het script:
HTML:
...
<script type="text/javascript" src="./style/js/jquery.coda-slider-2.0.js"></script>
...
Eigenlijk moet je ook voor deze pagina een aangepaste versie van het
patto.web44.net/style/js/custom.js maken, waarin de CODA-SLIDER niet opgestart wordt. Zonder dat werkt 't schrappen ook wel, maar geeft de javascript-console een foutmelding wegens het ontbreken van het coda-slider-script.
2. Op de cleanpage.html moeten de menu-links veranderen (1)
Je zou zeggen naar de bladwijzers op de homepage:
HTML:
<ul id="menu">
<li class="about"><a href="http://patto.web44.net/" title="About Pattoziac">About Us</a></li>
<li class="portfolio"><a href="http://patto.web44.net/#portfolio" title="Things I created">Projects</a></li>
<li class="social"><a href="http://patto.web44.net/#social" title="Places I hang out">Social</a></li>
<li class="contact"><a href="http://patto.web44.net/#contact" title="Get in touch!">Contact</a></li>
</ul>
De eerste link gaat dan goed.
Maar de rest blijft hangen op dezelfde begin-tekst op de homepage... :shocked:
Probeer maar:
[url]http://patto.web44.net/#portfolio[/URL], enz.
Hoezo?
3. De bladwijzers op de homepage moeten aangepast worden
De bladwijzers #portfolio, #social en #contact (en ook #about, maar dat hindert niet) ... bestaan niet als javascript aan staat.
Die zijn er alleen voor om naar het goede item te springen (ipv schuiven) als javascript uit staat:
HTML:
...
<noscript><div id="about"></div></noscript>
...
<noscript><div id="portfolio"></div></noscript>
...
<noscript><div id="social"></div></noscript>
...
<noscript><div id="contact"></div></noscript>
...
Haal je hier het <noscript> uit, dan gaat het wel goed als je vanaf de pagina cleanpage.html binnenkomt.
- Maar ... dan schakel je tegelijkertijd het hele slideren op de homepage uit!
- De bladwijzers #portfolio, #social en #contact mogen dus niet gebruikt worden.
- Maar er kunnen wel andere, nieuwe bladwijzers aangemaakt worden: waar het slider-script niet op reageert.
De slider-items beginnen allemaal met een <div class="panel-wrapper">, en voor de 2e, 3e en 4e keer kan dat bv. worden:
HTML:
...
<div id="pf" class="panel-wrapper"><!-- extra portfolio-bladwijzer -->
...
<div id="sc" class="panel-wrapper"><!-- extra social-bladwijzer -->
...
<div id="ct" class="panel-wrapper"><!-- extra contact-bladwijzer -->
...
Hiermee is de homepage bedrijfsklaar, maar de nieuwe bladwijzers moeten nog wel in het menu van de cleanpage komen.
4. Op de cleanpage.html moeten de menu-links veranderen (2)
Nu dus naar de nieuwe bladwijzers op de homepage:
HTML:
<ul id="menu">
<li class="about"><a href="http://patto.web44.net/" title="About Pattoziac">About Us</a></li>
<li class="portfolio"><a href="http://patto.web44.net/#pf" title="Things I created">Projects</a></li>
<li class="social"><a href="http://patto.web44.net/#sc" title="Places I hang out">Social</a></li>
<li class="contact"><a href="http://patto.web44.net/#ct" title="Get in touch!">Contact</a></li>
</ul>
======
Heerlijk, al die zelfdenkende scripts: zie maar dat je er van af komt! :d
Test van het bovenstaande:
Een prettige gratis bonus is dat het nu ook mogelijk is om een directe link naar een item op de homepage door te geven (bv. in een e-mail, of op een andere site, enz.).
- Anders moest je het verhaal vertellen "Ga naar patto.web44.net, en klik dan in het menu op Portfolio".
- Nu zegt je: "Ga naar patto.web44.net/#pf".
- In het voorbeeld: "Ga naar ptb-homepage-nw.htm#pf"
Met vriendelijke groet,
CSShunter
_________
PS-1: de link "Click to go back" zou ik er uit halen. Als het menu goed in elkaar steekt, is die overbodig (en het kan alleen maar fout gaan met die slider ...).
PS-2: in mijn (oudere) Firefox-3.6.27 doet de slider het niet zoals 't hoort (hij maakt een klein hupsje, en springt dan naar z'n item ipv schuiven: alsof de slider er niet is). In IE7, Chrome, Opera en Safari slidert ie mooi.
PS-3: de site is qua breedte geschikt voor een resolutie van 800*600px, maar niet qua hoogte: dan komt er geen scrollbar. Op 1024*768px gaat het net goed, maar alleen op max. vensterformaat.
PS-4: de index.html in de root (zoals de link bij het logo!) doet het niet, alleen Index.html met hoofdletter. Dat is waarschijnlijk een foefje van 000webhost.com om mensen op hun 404-pagina te krijgen en reclame voor zichzelf (en hun Premium-pakket) te maken.
Dat is niet gebruikelijk, en daar hou ik niet zo van...
