Tabs met js zonder dat de website naar boven springt.

Status
Niet open voor verdere reacties.
Inderdaad deze lettertypes zitten helemaal niet in de map css!

Is er ook een mogelijkheid om een speciale portfolio pagina te maken voor IE? Ik knutsel kndertussen door aan een oplossing voor deze tabbladen
 
Ja, moet kunnen:
  • Je zou voor IE7 en IE8 het tab-script buiten de deur kunnen houden (is in wezen alleen maar voor het infaden): via een "Inverse conditional comment".
  • Met een simpel show/hide-scriptje via een gewoon CC kan je dan de tabs in IE7 en IE8 zonder infaden laten verschijnen.
Of je laat die CC's zitten, kiepert het tab-script er uit, en maakt voor alle browsers een show/hide scriptje, al of niet met een zelfgebakken infader er op (analoog aan zoiets, kan ook gebruikt worden voor een <div> i.p.v. een img).
Dan ben je ook van het script af waar de IE's niet mee overweg kunnen.

Mert vriendelijke groet,
CSShunter
 
Ik heb enorm veel tab scripts geprobeerd met javascript, maar enorm veel weigerden gewoon, omdat het niet samen ging met al mijn andere scripts. Daarom was ik even blij dat deze het wel deed ( in chrome en firefox ).

Of je laat die CC's zitten, kiepert het tab-script er uit, en maakt voor alle browsers een show/hide scriptje, al of niet met een zelfgebakken infader er op (analoog aan zoiets, kan ook gebruikt worden voor een <div> i.p.v. een img).
Dan ben je ook van het script af waar de IE's niet mee overweg kunnen.
Klik om te vergroten...

hoe kan ik deze dan laten werken mbv een link?
 
Hoi dudstone,
De links krijgen een trigger voor het script, maar er moet niet 1 fade-in maar 3 dingen kunnen gebeuren. Daarvoor moet de "onload" functie van het fade-in script wat aangepast worden.

Stap 1
De tabbladen moeten niet standaard uit staan met {display:none}, dan kunnen ze niet gezien worden als javascript uit staat. Ze moeten ook een hoogte hebben, om ze niet door elkaar heen te laten lopen. CSS:
Code: 
div.panes div {
   ...
   display: block;
   height: 500px;
}
Stap 2
De html kan er nu als volgt uitzien:
HTML: 
<div id="tabs">
   <ul class="tabs">
      <li><a href="#tabblad1" onclick="triggerTab('tabblad1'); return false">Graphic Art</a></li>
      <li><a href="#tabblad2" onclick="triggerTab('tabblad2'); return false">Interactive Art</a></li>
      <li><a href="#tabblad3" onclick="triggerTab('tabblad3'); return false">Audiovisual Art</a></li>
   </ul>
</div>
...
<div id="tabblad1">
   <h1 id="graphic"><span>Graphic</span> Art</h1>
   <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" /></a>
   <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" /></a>
   <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" /></a>
</div>
<div id="tabblad2">
   <h1 id="graphic"><span>Interactive</span> Design</h1>
   ...
   enz.
De 3 tabknopjes worden dan de trigger voor het script. Als javascript uit staat, wordt gewoon naar de bladwijzer gegaan = de hoogte waarop het tabblad van keuze zich bevindt.

Stap 3
Het script-werk: eerst wordt de aanroep en de configuratie voor de jQuery-tabtoestand (halverwege de html) eruit gesloopt. :D
De link naar het nieuwe fade-script en het trigger-script komen als allerlaatste voor de </body> te staan, dan hoeft er geen "onload"-functie bij, die mogelijk dwars zou kunnen liggen met een ander script.

Om te beginnen moeten de 3 tabbladen nu niet onder elkaar meer komen, maar op dezelfde hoogte. Dat kan door ze met javascript een {position:absolute} te geven, dan komen ze in principe op dezelfde plaats. Het fade-script werkt namelijk met een negatieve margin-left om de niet getoonde tabbladen buiten beeld te houden.

Daarna worden tabblad2 en tabblad3 uitgezet, zodat bij start tabblad1 zichtbaar is. Er wordt even onthouden welke nu aan staat.

Bij een klik op een tabje gaat dan de triggerTab() functie in werking. Die scrollt eerst naar de goede hoogte (of blijft daar, als ie er al is), laat het tabblad dat aan staat uitfaden, laat het tabblad van keuze infaden, en onthoudt weer welke nu aan staat voor de volgende ronde.
Het geheel wordt ingepakt in de voorwaarde dat niet op dezelfde tab geklikt wordt: dan hoeft alleen naar de goede hoogte gegaan worden, en kan het uit- en in-fade feestje achterwege blijven.

Klaar is Keesje! :)

D.w.z.:
HTML: 
...
<script type="text/javascript" src="scripts/css-popup-fading.js"></script>

<script type="text/javascript">
// alle tabbladen moeten op dezelfde plaats komen:
	document.getElementById('tabblad1').style.position = 'absolute' ;
	document.getElementById('tabblad2').style.position = 'absolute' ;
	document.getElementById('tabblad3').style.position = 'absolute' ;

// start: alleen tabblad 1 staat aan:
	document.getElementById('tabblad2').style.marginLeft = '-9999px' ;
	document.getElementById('tabblad3').style.marginLeft = '-9999px' ;
	var aanstaande = 'tabblad1';

// triggeren:
function triggerTab(nieuw){
	scrollTo(0,685);         // alvast naar de goede hoogte
	if (nieuw != aanstaande){
		fadeOut(aanstaande); // eerst even de aanstaande tab uitzetten
		fadeIn(nieuw);       // en dan tabblad van keuze laten infaden
		aanstaande=nieuw;    // dat is dan de nieuwe verloofde
	}
}
</script>
</body>
</html>
En daar komt ie dan:
Met vriendelijke groet,
CSShunter
 
Ik zit het even allemaal met mijn mobiel te kijken en het werkt inderdaad fantastisch! Ik zal er morgen meteen aan werken en super bedankt voor de uitleg daar heb ik tenminste wat aan dan alleen de oplossing!
 
Ik heb alles toegepast wat je me hebt gegeven en verteld. Ik heb de pagina gevalideerd en de fouten eruit gehaald. Dan kom ik het volgende tegen:
alles werkt perfect in de browsers. Ik test de website dan in IE8 alleen dan flipt heel de tab script. Als deze nog bezig is met faden en je klikt op een andere tab dan weet hij niet meer wat deze moet doen en blijft deze faden en knipperen!
in google chrome werkt het perfect.
 
Stuivertje wisselen

Sjuut! Altijd weer IE! :mad:


Hierin wordt een andere techniek toegepast.
Nodig is hiervoor, in de css:
Code: 
div.panes div {
   ...
   height:440px;
   background: url(http://www.excez.com/demos/new/images/contentbg.jpg) 50% 0;
   }
Plus een ander infade-script:
Plus:
  • Een aangepast script op de pagina (zie broncode/hieronder).

Nieuwe methode.
Deze keer wordt de "stuivertje wisselen techniek" toegepast:
De inhoud van de 3 tabbladen wordt bovenop elkaar gestapeld met de z-index.
Daarvoor mogen ze niet meer transparant zijn, maar krijgen een herhaling van het bg-image, en ook de exacte hoogte om niet het footer-gedeelte te overlappen.
  • In het begin staat tabblad1 bovenop, de rest is niet te zien maar zit eronder.
  • Bij de oproep van een tabblad wordt snel van laag gewisseld.
  • De bovenste laag wordt de tweede laag, het nieuwe tabblad zit in de eerste laag, maar is nog totaal transparant.
  • Dan vindt het infaden plaats: de bovenste laag met het nieuwe tabblad wordt steeds minder transparant.
  • Uitfaden van het eerste tabblad is dan niet meer nodig: dat gaat vanzelf omdat het nieuwe infadende tabblad er boven staat.
  • Er wordt weer onthouden welke nu aan staat (bovenop staat).
  • De volgende ronde wordt weer van plaats gewisseld.
  • In het nieuwe div-fading.js javascript is een stop ingebouwd: als het tabblad wat aan het infaden is naar de achtergrond wordt gewisseld (als tussentijds een ander tabblad wordt ingeschakeld), dan houdt het infaden op en krijgt het nieuwe tabblad de infade, eroverheen.
Aldus:
HTML: 
<script type="text/javascript">
// <![CDATA[
// alle tabbladen moeten op dezelfde plaats komen:
	document.getElementById('tabblad1').style.position = 'absolute' ;
	document.getElementById('tabblad2').style.position = 'absolute' ;
	document.getElementById('tabblad3').style.position = 'absolute' ;

// start: alleen tabblad 1 staat aan:
	document.getElementById('tabblad1').style.zIndex = '1' ;
	document.getElementById('tabblad2').style.zIndex = '-1' ;
	document.getElementById('tabblad3').style.zIndex = '-1' ;
	var aanstaande = 'tabblad1';

// triggeren:
function triggerTab(nieuw){
	scrollTo(0,685);     // alvast naar de goede hoogte
	if (nieuw != aanstaande){
		// eerst alles uitzetten:
		document.getElementById('tabblad1').style.zIndex = '-1' ;
		document.getElementById('tabblad2').style.zIndex = '-1' ;
		document.getElementById('tabblad3').style.zIndex = '-1' ;
		// dan aanstaande vlug weer aan, maar onderop:
		document.getElementById(aanstaande).style.zIndex = '1' ;
		// de nieuwe in een laag erboven (nog transparant):
		document.getElementById(nieuw).style.zIndex      = '2' ;
		// en de nieuwe op laten komen (oude blijft eronder):
		fadeIn(nieuw);
		aanstaande=nieuw; // dat is dan de nieuwe verloofde
	}
}
// ]]>
</script>
En de stop in div-fading.js, voor elke tussenliggende stap van het infaden:
[JS]...
if (document.getElementById(objId).style.zIndex == '2') { // break if not on top
... ( als wel op top, lekker doorfaden )[/JS]
Zo zou ook in IE8 het willen afmaken van in gang gezette infaders (en uitfaders, in het oude script) acuut moeten stoppen, en zou er geen geknipper meer mogen plaatsvinden.
In IE7 gaat het in elk geval goed (evenals in de rest van de browsers).

Ik ben benieuwd!

Met vriendelijke groet,
CSShunter
 
Ik had graag willen zeggen dat deze het perfect deed, maar ook dit mocht niet zo zijn. In alle browsers werkt het goed maar...
In IE8 duurt het 5 seconden voordat deze klaar is met infaden terwijl dit maar 2 sec is in de andere browsers. Dit duurt gewoon te lang en daardoor zie je ook een flits wil je meteen door naar een gaan andere tab.
 
Hm..., waarschijnlijk doet het IE-alpha-filter er een stuk langer over dan de css opacity-eigenschap.
Maar zo gauw geven we niet op. :)

Wat doet deze: bliksekaters.nl/tests/tabs-nw-8.htm ?

Daar zit een snellere versie van het infade-script in: opacity-stapjes van 5 ipv stapjes van 1, 2 of 3 (dat scheelt zo'n 70% van de handelingen om van 0 naar 100 te komen) en wat langere wachttijd tussen de stapjes (nou ja: 25 msec.).

In IE7 gaat ie prettig soepel, en beter dan de vorige.
Ik ben benieuwd!

Met vriendelijke groet,
CSShunter
 
Beste csshunter!
ik heb nu goed gekeken in IE8 en ik moet eerlijk zeggen: in chrome en ff werkt het gewoon beter. MAAR
als ik bij de vorige (versie 7) snel overklikte naar de volgende, bleef deze hangen. Nu gaat hij nog slomer dan chrome en ff maar dat is geen probleem.
Ook gaat gaat hij rechtstreeks naar de tab die je als laatste hebt aangeklikt, dus geen fouten daar meer in te vinden.

Dus ik zeg: Missie geslaagd! tenzij je nog een manier weet hoe de pagina gewoon totaal niet verspringt (a)

Bedankt voor de hulp zover!
 
Laatst bewerkt:
ik heb denk ik te snel gesproken. Waarom werkt het perfect op jouw website, maar op de mijne gaan ze overal elkaar heen hangen! ben ik nog iets vergeten?
 
csshunter. je geeft ze nu wel een z-index dat ze over elkaar heen gaan staan, maar ik heb geen achtergrond gebruikt voor de divs. Dat wil zeggen dat je erdoorhaan kan kijken. Waarom werkt het op de jouwe wel goed?
 
Oke ik heb het al een gedeelte opgelost:
[JS] // dan aanstaande vlug weer aan, maar onderop:
document.getElementById(aanstaande).style.zIndex = '-1' ;
// de nieuwe in een laag erboven (nog transparant):
document.getElementById(nieuw).style.zIndex = '2' ;
// en de nieuwe op laten komen (oude blijft eronder):
fadeIn(nieuw);
aanstaande=nieuw; // dat is dan de nieuwe verloofde
[/JS]
de -1 stond eerst op 1. Nu word degende die onderop ligt ook gewoon onzichtbaar.

Dan het volgende probleem. Ik heb nu een stuk of 8 stuks toegevoegd bij Interactieve Vormgeving, maar nu past hij de hoogte niet meer aan en loopt ie weer over de footer heen... hoe komt dit dan nu weer?
 
Ja, bij mij doet IE7 het ook slomer dan de rest.
  • Wat nog zou kunnen: een tweede script maken met een snellere overgang, en die dan via een Conditional Comment aan IE7 en IE8 toedienen.
ik heb denk ik te snel gesproken. Waarom werkt het perfect op jouw website, maar op de mijne gaan ze overal elkaar heen hangen! ben ik nog iets vergeten?
...
csshunter. je geeft ze nu wel een z-index dat ze over elkaar heen gaan staan, maar ik heb geen achtergrond gebruikt voor de divs. Dat wil zeggen dat je erdoorheen kan kijken. Waarom werkt het op de jouwe wel goed?
Klik om te vergroten...
Ja, je bent iets vergeten. ;)
Bij mij zijn de div's ondoorzichtig gemaakt in de css, dan kunnen ze wel over elkaar heen (anders, met {z-index:-1}, klapt de niet-aanstaande weg, en gebeurt het infaden vanaf een witte achtergrond).
Het staat in de kleine lettertjes hierboven in reactie nr. #27:
De inhoud van de 3 tabbladen wordt bovenop elkaar gestapeld met de z-index.
Daarvoor mogen ze niet meer transparant zijn, maar krijgen een herhaling van het bg-image, (...)
Klik om te vergroten...
En:
Code: 
div.panes div {
   ...
   height:440px;
   [B]background[/B]: url(http://www.excez.com/demos/new/images/[B]contentbg.jpg[/B]) 50% 0;
   }
=====
Dan deze:
(...) tenzij je nog een manier weet hoe de pagina gewoon totaal niet verspringt (a).
Klik om te vergroten...
Bedoel je dat de pagina dan niet naar de beginhoogte van de 3 tabjes moet gaan als je een tabknopje aanklikt?
Dat kan ook: dan schrap je het regeltje dat 'm naar de tab-top laat gaan uit het script:
[JS]function triggerTab(nieuw){
// scrollTo(0,685); niet verspringen
if (nieuw != aanstaande){
... enz.[/JS]
Je laatste vraag over de hoogte: wordt vervolgd.

Met vriendelijke groet,
CSShunter
 
Dan het volgende probleem. Ik heb nu een stuk of 8 stuks toegevoegd bij Interactieve Vormgeving, maar nu past hij de hoogte niet meer aan en loopt ie weer over de footer heen... hoe komt dit dan nu weer?
Klik om te vergroten...
Dat komt omdat ze allemaal vastgeprikt zijn op dezelfde (korte) hoogte; en de absolute positie van de tabbladen veroorzaakt dat ze gaan overbloezen.

Zo kom je er aan. Maar hoe kom je er af, zal de volgende vraag zijn. ;)
Ik neem een voorschotje op die volgende vraag.

Om dat te bereiken, moet het script aangepast worden.
Eerst precies aangeven wat je wilt dat er gebeurt, en dat dan omzetten in css en verse script-regels. :)

Wat wil je?
  1. De tabblad-ruimte moet net zo hoog worden als het nieuwe tabblad dat wordt aangeklikt.
  2. De footer moet daaronder worden geplaatst.
Realisatie
De tabbladen mogen niet meer dezelfde hoogte hebben. De css waar dat in stond (voor de 3 tabbladen tegelijk) moet dan worden:
Code: 
div.panes div {
   ...
   height:auto;
   }
De grotere tabbladen mogen de container waar ze in zitten, niet oprekken. Ze moeten eventueel afgekapt worden als het nieuwe tabblad kleiner is. Met css:
Code: 
div.panes div {
   ...
   overflow: hidden;
   }
Vraag is nu: hoe hoog is het nieuwe tabblad? Van elk van de tabbladen kan in het begin de hoogte vastgesteld worden:
[JS]// bij start hoogte tabbladen opmeten en onthouden:
var h1= document.getElementById('tabblad1').offsetHeight;
var h2= document.getElementById('tabblad2').offsetHeight;
var h3= document.getElementById('tabblad3').offsetHeight;[/JS]
Wat moet er bij tab-klikken gebeuren?
De nieuwe tabblad-hoogte bladH moet zo groot worden als het tabblad dat aangeroepen wordt:
[JS]// nieuwe tabblad-hoogte vaststellen:
if (nieuw=='tabblad1'){ var bladH = h1 };
if (nieuw=='tabblad2'){ var bladH = h2 };
if (nieuw=='tabblad3'){ var bladH = h3 };[/JS]
Het aan staande oude tabblad moet ook op die hoogte gebracht worden, om eventueel uitsteken er onder te verhinderen. Voor het gemak zetten we ze allemaal tegelijk op de nieuwe hoogte:
[JS]// alle tabbladen op die hoogte zetten :
document.getElementById('tabblad1').style.height = ''+bladH+'px' ;
document.getElementById('tabblad2').style.height = ''+bladH+'px' ;
document.getElementById('tabblad3').style.height = ''+bladH+'px' ;[/JS]
Nu moet de footer nog op de juiste plek komen. Dat gaat niet vanzelf, omdat de tabbladen een absolute positie hebben en geen hoogte in de normal flow van de html hebben. Maar ze zitten in de container <div id="area">, die wel in de normal flow zit. Die moet dus dezelfde hoogte krijgen als het nieuwe tabblad:
[JS]// en ook hun container aanpassen:
document.getElementById('area').style.height = ''+bladH+'px' ;[/JS]
En daarna mag het script verder gaan met het infaden.

Internet Explorer
Tenslotte blijkt IE7 het nodig te hebben om meteen aan het begin de andere tabbladen nog eens expliciet op de hoogte van het eerste tabblad te zetten (bij andere browsers gebeurt dat uit zichzelf). Dan doen we dat:
[JS]// IE7 bij start tot de orde roepen:
document.getElementById('tabblad2').style.height = ''+h1+'px' ;
document.getElementById('tabblad3').style.height = ''+h1+'px' ;
[/JS]
En met een Conditional Comment wordt voor IE8 en lager een snellere infader (deze: div-fading-rapid-lteIE8.js) opgetrommeld (die de gewone kan overrulen):
HTML: 
<script type="text/javascript" src="scripts/div-fading-rapid.js"></script>
<!--[if lte IE 8]>
	<script type="text/javascript" src="scripts/div-fading-rapid-lteIE8.js"></script>
<![endif]-->

Resultaat
Ici, met 8 extra items in het middelste tabblad, en 2 extra items in het derde tabblad:
  • Test: tabs-nw-10.htm
    (zie broncode voor totale aangepaste css en script))
Computers zijn best heel gehoorzaam! :d

Met vriendelijke groet,
CSShunter
__________
PS-1 Bij uitgeschakeld javascript gaat het nog steeds goed: dan komen de tabbladen op de goede hoogte direct onder elkaar.

PS-2: Het is inderdaad de alpha-filtering bij IE7/IE8 die de vertraging veroorzaakt: hoe meer items in een tabblad, hoe langer het infaden duurt. Tabblad Graphic gaat nu mooi snel, tabblad AV gaat iets langzamer, en tabblad Interactive duurt het langst. Daar valt dan niets aan te doen.
Herstel: ook dat zou nog via javascript aangepakt kunnen worden: het infade-tempo voor IE7/IE8 afhankelijk laten worden van de hoogte van een tabblad.
Maar zo blijf je bezig! ;)
 
Jak! Dat had ik inderdaad nog niet gezien. :confused:

Had FF en IE7 getest, en die deden het allebei goed. Normaal gesproken doet Chrome altijd hetzelfde als Firefox, als er geen html- en css-errors in zitten, want ze volgen allebei keurig de standaarden.

Maar ja, hier hebben we te maken met een oerwoud aan scripts, een html-structuur met ondoorzichtig in elkaar gekokerde div's (met een aantal keer dezelfde ID's en een ratjetoe aan vaak overbodige classes), plus een css die vanwege dit soort dingen ook niet makkelijk te duiden is.
Op deze manier kan er wel eens iets mis gaan. :rolleyes:

Er zit dan maar 1 ding op: de knoop ontwarren door met een schone lei te beginnen en het tab-gedeelte opnieuw te bouwen.
hoop dat dit dan ook snel te verhelpen is
Klik om te vergroten...
Vermoedelijk niet, dus.
Maar zo gauw geven we ook niet op!

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Zo, schone lei en ipv:
HTML: 
<div id="content">
   <!-- SUBMENU -->
   <div id="submenu">
      <!-- BOX -->
      <div class="box">
         <div id="tabs">
            <ul class="tabs">
               <li><a href="#tabblad1" onclick="triggerTab('tabblad1'); return false">Graphic Art</a></li>
               <li><a href="#tabblad2" onclick="triggerTab('tabblad2'); return false">Interactive Art</a></li>
               <li><a href="#tabblad3" onclick="triggerTab('tabblad3'); return false">Audiovisual Art</a></li>
            </ul>
         </div>
         <!-- /BOX -->
      </div>
      <!-- SUBMENU -->
   </div>

   <!-- AREA -->
   <div id="area">
      <!-- BOX -->
      <div class="box">
         <!-- C-AREA -->
            <div id="c-area">
               <!-- TAB -->
               <div class="panes">
                     <div id="tabblad1">
                        <h1 id="graphic"><span>Graphic</span> Art</h1>
                        <!-- COL -->
                        <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" alt="" /></a>
                        <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" alt="" /></a>
                        <a href="#" class="col"><img src="http://www.excez.com/demos/new/images/portfolio/graphic1.png" class="showcase" alt="" /></a>
                        <!-- /COL -->
                     </div>
                     <!-- /TAB -->
                     <!-- TAB -->
                     <div id="tabblad2">
                        <h1 id="graphic"><span>Interactive</span> Design</h1>
                        <!-- COL -->
                        <a href="#" class="col"><img src="images/interactive.png" class="showcase" alt="" /></a>
... enz.
... nu zoiets:
HTML: 
<div id="content">
   <div id="tabChoice">
      <ul>
         <li><a id="choice1" href="#tabblad1" onclick="triggerTab('tabblad1'); return false"><span>Graphic Art</span></a></li>
         <li><a id="choice2" href="#tabblad2" onclick="triggerTab('tabblad2'); return false"><span>Interactive Art</span></a></li>
         <li><a id="choice3" href="#tabblad3" onclick="triggerTab('tabblad3'); return false"><span>Audiovisual Art</span></a></li>
      </ul>
   </div>

   <div id="tabbladContainer">
      <div id="tabblad1">
         <h2><span>Graphic Art</span></h2>
         <a href="#"><img src="images/graphic1.png" alt="" /></a>
         <a href="#"><img src="images/graphic1.png" alt="" /></a>
         <a href="#"><img src="images/graphic1.png" alt="" /></a>
      </div>
	
      <div id="tabblad2">
         <h2><span>Interactive Design</span></h2>
         <a href="#"><img src="images/interactive.png" alt="" /></a>
... enz.
met bijbehorende css om de opmaak te regelen.

Daarbij kwam ik er op uit dat het ingesloten Bellerose-lettertype het bar slecht doet:

bellerose-in-browsers.png

Dan zie ik liever een standaard Arial dan een zwaar haperende Bellerose. ;)

Ik zou voor een aantal opschriften images van de Bellerose gebruiken, en verder een gewoon lettertype. Zo heb ik de tabs voorzien van een css-sprite, waarin meteen de hover-varianten zitten:

bellerose-sprite.png

Daarmee kan je voor de dag komen, en dat geeft tenminste in alle browsers hetzelfde resultaat.
De basis-versie is nog zonder script-toestanden voor de tabs:
Nu *) kan het tenminste niet aan de html of de css liggen als er iets raars gebeurt bij het scripten. :)

Met vriendelijke groet,
CSShunter
___________
*) D.w.z. ik heb me wild gezocht waarom een hover over de tabs niet werkte in Chrome; bleek te liggen aan fouten in het algemene stylesheet. Daarin aantal dingen gecorrigeerd, en toen werkte het wel.
Een must: om de haverklap de css-validator ter hand nemen, dat scheelt onaangename verrassingen.
 
Beste Csshunter Je hebt dan nu wel een schone code, maar alsnog werkt het niet met Javascript wat eigenlijk wel de bedoeling zou zijn. Nu staat het onder elkaar en springt hij naar de betreffende tab toe.
 
Maar dat hoef je mij niet te vertellen! :P

Het staat er ook bij: "De basis-versie is nog zonder script-toestanden voor de tabs".

En in m'n vorige post heb ik al de verklaring gegeven waarom een goede basis een absolute voorwaarde is om iets te kunnen bereiken, zeker als het om een veelheid aan script-toestanden gaat:
"... hier hebben we te maken met een oerwoud aan scripts, een html-structuur met ondoorzichtig in elkaar gekokerde div's (met een aantal keer dezelfde ID's en een ratjetoe aan vaak overbodige classes), plus een css die vanwege dit soort dingen ook niet makkelijk te duiden is. Op deze manier kan er wel eens iets mis gaan. Er zit dan maar 1 ding op: de knoop ontwarren door met een schone lei te beginnen en het tab-gedeelte opnieuw te bouwen."

Ik had ook kunnen zeggen: "Op deze manier is er geen beginnen aan. Maar eerst maar eens een goede pagina-structuur en bruikbare css. Daarna kunnen we verder praten over scripten enzo, en waarom mijn script het in Chrome niet doet. Of analyseer zelf even waar het fout gaat in Chrome; als je er niet uit komt, kunnen we zien of ik nog iets kan betekenen."

Intussen heb ik het vuile opschoonwerk voor je opgeknapt (uurtarief? :D), en nu mopper je dat het script er nog niet in zit. Rupsje Nooitgenoeg?

Daar was ik dus allang mee bezig, maar je schijnt te vergeten dat ik geen contract met je heb voor de levering van diensten, maar gewoon één van de vele vrijwilligers ben die in hun vrije tijd tips geven in dit forum.
Dat is tenminste de bedoeling; in mijn 11 versies tot dusverre en de op maat gemaakte scripts ben ik al heel ver gegaan vind ik. Mijn uren had ik ook in iets anders kunnen stoppen.

Dat wou ik maar even gezegd hebben. :)
Met vriendelijke groet,
CSShunter
__________
PS: Behalve de uren maakwerk zit in het begrijpelijk uitleggen in de reacties ook de nodige tijd. Iets maken en over de balk gooien vind ik niet de bedoeling van het forum: er moet ook iets te leren zijn. Vaak is het maken eerder en sneller klaar dat het schrijven van een reactie met waar nodig illustraties.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan