Tabs met js zonder dat de website naar boven springt.

Status
Niet open voor verdere reacties.
D

dudstone

Gebruiker
Lid geworden
14 nov 2011
Berichten
84
Hoi iedereen,
ik heb een website gescript, met wat javascript tabbladen. Deze werken nu, alleen heb ik een klein vraagje.
Als je op een tabblad klikt springt de pagina naar boven toe. Hoe is dit te verhelpen?
Website: www.excez.com

Javascript tab setup.
[JS]<script>
$(function() {
$(".tabs").tabs(".panes > div#tab", {
/* tabs configuration goes here */
// first configuration property
event: 'click',
// another property
effect: 'fade',
fadeInSpeed:800,
tabs: 'a',

});
});[/JS]

html code.
HTML: 
<li><a href="#">Graphic Art</a></li>
                <li><a href="#">Interactive Art</a></li>
                <li><a href="#">Audiovisual Art</a></li>

hoop dat iemand hier een antwoord op heeft.

groet,

Rick Bongers
 
Een href attribuut met een lege hash (dus: <x href='#'>) zorgt ervoor dat je naar de bovenkant van de pagina springt (een hash met een corresponderende ID zal naar dat element scrollen).


Oplossing is simpel, haal het 'href' attribuut weg! Nog beter, de hele a-tags. Of, als je gelijk goed bezig bent, zet in de href een link naar het correcte document (voor het geval er geen Javascript support is) en return false in je event listener.
 
Laatst bewerkt:
Als ik de gehele a tag weghaal springt hij alsnog naar boven toe.
Het rare is dat hij niet naar top springt maar halverwege de slider.

Hoe en waar zou ik dan een return false neer moeten/ kunnen zetten?
 
Dat is raar.


Maar eh, als ik op de site kijk staat er nogsteeds een href='#':


HTML: 
        <div id="tabs">
        	<ul class="tabs">
            	<li><a href="#">Graphic Art</a></li>
                <li><a href="#">Interactive Art</a></li>
                <li><a href="#">Audiovisual Art</a></li>

            </ul>
        </div>


een andere 'oplossing' is om de href naar de ID tabs te laten gaan:

HTML: 
<li><a href='#tabs'>...</a></li>

dan springt 'ie naar de bovenkant van de tabs toe!
 
Laatst bewerkt:
Ja indd, ik had het even local bekeken. Ik heb voor de duidelijkheid even de pagina opnieuw geupload. Ik heb er nu ook #tabs erin gezet, maar springt nog steeds naar de slider toe :confused:
 
Hm, in dat geval lijkt het erop dat de Javascript hier voor zorgt. Waarschijnlijk staat er op de pagina van de jQuery plugin hoe en waarom dit zo is.
 
Kan dat in de standaard jQuery-1.4.2 zitten, aangezien als ik de rest uitzet behalve de jquery en de tab.js sprint hij ook naar de slider toe?
 
In de settings voor de tab-eigenschappen (op de pagina zelf) staat: "return: false", dan zal ie niet naar de opgegeven ID #tabs springen.
Heb je 't al eens geprobeerd met "return: true"?

Met vriendelijke groet,
CSShunter

PS:
Heb je als eens op de Web Page Analyzer gekeken? Als "Web Page Speed Report" komt uit de bus:
  • maar liefst 62 http-requests om de pagina binnen te krijgen :shocked:,
  • 49 images met een totale waarde van 750kB,
  • 11 scripts van samen 120kB,
  • totale paginagrootte: 890kB.
Mocht iemand een telefoon-modem hebben (56kbps), dan is de pagina binnen na ruim 3 minuten. Da's niet bepaald het snelle werk! Ik zou proberen de paginagrootte wat kleiner te maken. - Nu is in NL de dekkingsgraad van breedband mooi groot, maar als je ook op buitenlanden mikt is de dekkingsgraad een stuk lager en zijn de verbindingen trager.
En oeps, :confused:, er zitten nog een riedeltje html-errors in. De css-validator heeft ook wat opmerkingen.
Nog iets te doen. :)
 
Laatst bewerkt:
Voordat je deze post had gezet heb ik local deze regel al verwijderd, omdat dit simpelweg een testje was voor mij. Maar ook als ik dit heb weggehaald of deze naar true zet, springt hij gewoon naar de slider toe en als ik helemaal boven aan de pagina zit blijft deze gewoon staan.
 
Jawel!
Als je ...
HTML: 
...
<div id="tabs">
   <ul class="tabs">
      <li><a href="#tab">Graphic Art</a></li>
      <li><a href="#tab">Interactive Art</a></li>
      <li><a href="#tab">Audiovisual Art</a></li>
   </ul>
</div
...
in je html hebt staan, en je verwacht dat ie dan naar de <div id="tabs"> springt, tja, dan gaat dat even wild mislukken. ;)

Oftewel ...
HTML: 
...
<li><a href="#tabs">Graphic Art</a></li>
<li><a href="#tabs">Interactive Art</a></li>
<li><a href="#tabs">Audiovisual Art</a></li>
...
... en via het Webdeveloper Toolbar menu "Edit html" springt ie met een enthousiasme waar een kangoeroe jaloers op zou worden! :)

Met vriendelijke groet,
CSShunter
_____
PS: reactie #4 van That Guy was 'm gewoon. Daarna kwam het zetduiveltje langs.
 
Laatst bewerkt:
Ah, het zal eens niet, de aartsvijand van alle programmeurs: typefouten! ;)
 
Na dit aangepast te hebben naar #tabs, heb ik nog een ding geprobeerd en dat is de <a> tag verwijderen. Ik dacht dat de website zo totaal niet zou verspringen, maar hij springt simpelweg opnieuw naar boven!
Ook als ik de #tabs verander in #foot springt hij naar de slider toe..?
 
Hoi dudstone,
't Is merkwaardig! :shocked:
Via de Webdeveloper Toolbar ging het prima, maar nu je de tab > tabs in de echte pagina hebt gezet, doet ie het weer niet.
Kennelijk zet de Webd.Toolbar zoiets er achteraf in, zonder de rest te beïnvloeden, en zorgt je partijtje jQuery-scripts ervoor dat het real time verpest wordt. Hm!

In ieder geval zou het nog return true i.p.v. return:true moeten zijn, zonder de dubbele punt ertussen.
Maar dat helpt ook al niet.
Dan werkt wel de return, maar wordt het hele pane niet weergegeven:
  • daarbij maakt het afsluiten met een puntkomma of een komma niets uit: zowel met return true, (test-1) als met return true; (test-2) mislukt het.
Misschien moet het toch anders in de tabs configuration? (daarvoor heb ik te weinig kaas gegeten van de jQuery tabs)

Maar als het niet van binnenuit kan, dan proberen we het van buiten af! :d
Gewoon nog een javascript er bovenop plakken:
HTML: 
...
<li><a href="#tabs" onclick="scrollTo(0,685)">Graphic Art</a></li>
<li><a href="#tabs" onclick="scrollTo(0,685)">Interactive Art</a></li>
<li><a href="#tabs" onclick="scrollTo(0,685)">Audiovisual Art</a></li>
...
  • Nu kan de hele return-regel geschrapt worden uit de tabs configuration.
Verder is nog nodig:
  • De foute ID-naamgeving "c-area full" moet vervangen worden door "c-area".
  • En met css moet deze een minimale hoogte krijgen, #c-area{min-height:300px;}, omdat het openen van de tabs-inhoud door jQuery even tijd nodig heeft, en er anders geen hoogte genoeg zou zijn om het scrollen in werking te zetten.
En ziedaar:
Met vriendelijke groet,
CSShunter
_____
PS: Ik probeerde ook nog even een moveToTabs-functie met een timeout: werkt ook prachtig, maar dan is alleen naderhand geen beweging meer in het scherm te krijgen; door een of andere interferentie met de jQuery-scripts springt de scrollbalk steeds onmiddellijk weer terug naar de #tabs-hoogte! :eek:
 
Dit is een manier om inderdaad naar content toe te gaan/ blijven. Het werkt nog niet perfect. Als je steeds klikt op een tab springt hij af en toe iets hoger en soms wat lager. Wat is hier de reden van dan?
 
dudstone zei:
Dit is een manier om inderdaad naar content toe te gaan/ blijven. Het werkt nog niet perfect. Als je steeds klikt op een tab springt hij af en toe iets hoger en soms wat lager. Wat is hier de reden van dan?
Klik om te vergroten...

sorry ik heb hier het antwoord al op. Dit komt omdat ik de tijd fade in seconden best hoog heb staan en als deze nog niet klaar is met faden omhoog springt.

Bedankt iedereen! Opgelost
 
Opgelost
Klik om te vergroten...
Nog niet helemaal!
Het klopt dat ie soms bij op een tab klikken niet naar de goede hoogte gaat, en de tweede keer op dezelfde tab wel. Waarschijnlijk zit 'm dat in de tijdelijke {display:none} voor alle panes, totdat er eentje door het script geopend wordt. Of zoiets.
Maar als je niet de #c-area van een min-height voorziet, maar de omvattende #content een min-height geeft (waar het script niet aan kan komen)...:
Code: 
#content {
   min-height: 525px;
   }
... dan gaat het bij mij wel steeds goed met de hoogte.

Iets anders is, dat het geheel zich prima laat afspelen in goede browsers: FF, Chrome, Opera, Safari en volgens Netrenderer ook IE9.
Maar! In IE7 (zelf getest) en IE8 (volgens Netrenderer) komt de inhoud van de panes totaal niet tevoorschijn. :(

tabs-ie7.png
  • Zie ook: Netrenderer (in het kleine vakje even 500 invullen om het screenshot omlaag gescrold te krijgen: pracht van een uitvinding!).
  • Het zit 'm niet in de traagheid van de infader (en een te vroeg genomen screenshot), want met IE7 heb ik 'm een kwartiertje open laten staan en toen was er nog niets.
  • In de css zie ik zo gauw ook niet iets dat dit zou kunnen veroorzaken.
  • Als je de gegenereerde output-code van Firefox en IE7 vergelijkt, zijn er verschillen! :shocked:
  • Als je de gegenereerde FF-code in een documentje plakt en met IE7 opent, gaat het wel goed.
Zie er dus naar uit dat IE7 en IE8 niet goed met het tab-script kunnen omgaan (al dan niet in combinatie met het carrousel-script en/of andere op de pagina draaiende scripts). Onprettig!
Er zal in elk geval nog wat gedokterd moeten worden, voordat de patiënt toonbaar is voor alle bezoek.

Succes!
Met vriendelijke groet,
CSShunter
 
Bedankt voor deze comment
Ik heb hem even getest in IE8 en het komt wel tevoorschijnlijn, alleen komt de inhoud over de footer, dus het lijkt mij dat de height totaal niet klopt. Zo zou het in IE7 kunnen zijn dat als de height niet klopt deze niets laat zien? zou zoiets mogelijk zijn?

Ik bekijk de website nu ook even met Netrenderer, maar nu zie ik dat deze meer fouten geeft. Ik heb een speciaal css voor geheel IE, maar blijkbaar pakt IE7 en IE8 dat extra css niet? of pakt Netrenderer deze niet?
 
Laatst bewerkt:
De tabs werken uitstekend in IE8 nu. Ik heb de .panes #tab een display:table gegeven. Hij laat de tabs goed zien en de content loopt nu netjes mee naar onderen.
Dan het volgende:
Ik heb even op mijn andere pc gekeken en hier word het goede lettertype niet goed weergegeven! zowel op IE7 als Chrome! terwijl ik hem aantal weken op alle browsers heb nagekeken en alle werkten op een pc zonder deze lettertype!
 
Laatst bewerkt:
Ik zie in geen enkele browser (FF, Chrome, IE7, Opera of Safari) de Bellerose-letter, en die zou niemand moeten kunnen zien. *)
  • Want in de css-map, waar ie volgens de css in moet zitten, is geen Bellerose te bekennen: niet als ttf, niet als eot en niet als otf. Ik krijg een vriendelijke 404-pagina.
Heb je intussen soms het css-bestand verplaatst?

In IE7 zie ik nog steeds geen plaatjes in de tab-ruimte, en Netrenderer ziet ze ook niet in IE8. **)

Over het speciale IE-only stylesheet: als ik een IE8-screenshot van Netrenderer nameet en vergelijk met een FF-screenshot, doet IE precies wat in het IE-css wordt gevraagd: 5px margin-top voor de "ranking" stipjes-images in de footer. Dus NR pakt 'm wel op.

Met vriendelijke groet,
CSShunter
___
*) Zit deze bij jou misschien nog in je browser-cache, dat je hem wel ziet (of bekijk je 'm lokaal)?
**) We hebben 't toch over dezelfde pagina? Ik bekijk: http://www.excez.com/demos/new/portfolio.php
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan