[css javascript] vastzetten javascriptmenu in Firefox èn IE

[livingtale]

Ik ben bezig al mijn paginja’s om te zetten van frames naar gewone pagina’s (mede ook naar aanleiding van jullie pleidooien daarvoor).

Belangrijk daarbij is voor mij dat de linker menubalk èn het uitklapbare bovenmenu zichtbaar blijven als er naar beneden gescrold wordt.

Ik heb daarvoor de volgende css code gevonden
(op http://www.java2s.com/Cod...topfooterandleftbar.htm).

Probleem is dat ik als uitklapbaar menu een js script gebruik (wat me erg bevalt en dat ik niet graag vervang gezien het vele werk) dat niet combineert met de top-bar van die code. Het maakt mijn menu in Firefox onzichtbaar.
Het gebruikt:
<script type='text/javascript'>function Go(){return}</script>
www.livingtale.nl/homebalk2.js
www.livingtale.nl/menu_com2.js

Daarom heb ik de code voor de top-bar verwijderd en gebruik ik alleen nog het left gedeelte en de mainouter:

* html body {
margin: 0;
padding: 0;
}
* html body {
padding-top: 60px;
}
* html,* html body {
overflow-y: hidden;
height: 100%;
margin-top: 0px;
}
#mainouter {
position: relative;
z-index: 2;
padding-top: 60px;
margin-left: 160px;
min-height: 100%;
}
* html #mainouter {
height: 100%;
overflow: auto;
overflow-y: scroll;
position: relative;
z-index: 2;
padding-top: 0px;
}
* html #left {
position: absolute;
height: 100%;
width: 160px;
left: 0;
top: 0px;
overflow: auto;
z-index: 100;
background: #2b005f;
}

(plus de bijbehorende div’s natuurlijk:
<div id="top-bar">
<div id="topbar-inner">
<div id="left">

Het is me gelukt mijn eigen js bovenmenu vast te zetten in zowel IE als Firefox/Chrome.
Alleen: dan scrollt de body onder de menubalk door. Wat desastreus is voor de ankers die ik in de body geplaatst heb. Door van het element
* html,* html body {
overflow-y: hidden;
height: 100%;
margin-top: -23px;
}
de margin-top: -23px; te veranderen in: margin-top: 0px; is het probleem voor IE redelijk netjes verholpen.
Maar dat helpt niet voor Firefox/Chrome.
Na veel experimenteren heb ik het volgende element toegevoegd:
html>body #mainouter {
position: fixed;
height: 100%;
left: 0;
padding: 0;
top: 60px;
overflow: auto;
overflow-y: scroll;
}

Dat helpt wel maar is duidelijk niet een goede code: het resultaat staat niet netjes, maar belangrijker: de bottomscroll functie is altijd uitgeschakeld.
zie bijvoorbeeld: www.livingtale.nl/dagvoorzitters.html

Ik heb verder zitten experimenteren, maar heb niets ontdekt.
Wie weet een oplossing?

[RobIII]

Als je toch je site aan 't herzien bent zou ik, als ik je een advies mag geven, scriptmeuk uit het jaar knoop ook even verherbouwen tot iets dat anno 2011 een beetje door de beugel kan Voor de simpele menustructuur die je hebt kom je al een heel eind met een (ik noem maar wat) suckerfish of iets dergelijks. Daarmee drop je de JS afhankelijkheid (en überhaupt de vre-se-lijke code van dynamicdrive ) en met een beetje server-side code (paar regels PHP) kun je de rest van de menu's wel maken. En als je dat allemaal op orde hebt zou ik pas eens gaan kijken naar het menu "on top" houden.

En dat laatste is ook geen rocket science als je je pagina een beetje slim op zet. I.p.v. een (i)Frame voor je content neem je gewoon een container (een div ofzo) met een overflow:auto erop en klaar.

Verder: als je code (of CSS of SQL Query's of...) post, gebruik dan a.u.b. code tags

Oh, en als je dan toch bezig bent: probeer van die quirks-mode af te komen; ga naar een html4 strict of voor mijn part html5 of xhtml of ...

[Voor 55% gewijzigd door RobIII op 06-07-2011 14:52]

[livingtale]

Beste RobIII,

Misschien eerst maar even duidelijkheid op een eerdere vraag: professional of hobbyist.
Ik ben geen van beide. Ik heb een klein bedrijfje met weinig inkomsten.
Tien jaar geleden ben ik de site begonnen en beetje bij beetje mij zelf het één en ander geleerd. De site is grotere en groter geworden en is allang te groot geworden om ‘even’ om te zetten. Het omzetten van de belangrijkste pagina’s van frame naar frameloos kost me al dagen werk.
Graag had ik het maken van een site uitbesteed, maar het geld daarvoor heeft mij altijd ontbroken. De site is echter wèl de levenslijn van mijn bedrijf. Dus ik moet roeien met de riemen die ik heb.
Dan je reactie. Drie dingen:
* ik begrijp er geen hout van - je slaat me om de oren met termen die mij niets zeggen
* je geeft geen antwoord op de vraag
* ik heb de toelichting van de code tag bestudeerd, maar begreep niet wat er bedoeld werd
Om toch maar even aan te geven dat ik echt wel wat in mijn mars heb bij het maken van de site: ik heb een online offerte systeem gemaakt dat werkt - iets wat je op geen enkele (vergelijkbare) site ziet (maar ik begrijp dat jij die 'prestatie' maar niks zult vinden)


Ik begrijp dat je vindt dat ik van alles en nog wat moet doen - maar de problemen die jij vindt dat ik heb, heb ik niet.
Ik heb alleen behoefte aan een betere code -binnen de site zoals die is- zodat voor Firefox/Chrome de inhoud van de pagina niet onder de menubalk door scrollt.
Dus: wie kan mij met dit -denk ik- simpele probleem helpen?

[MueR]

livingtale schreef op donderdag 07 juli 2011 @ 12:23:
* ik begrijp er geen hout van - je slaat me om de oren met termen die mij niets zeggen

Gooi voor de grap eens wat van die termen in Google dan?

* je geeft geen antwoord op de vraag

Dat klopt, maar hij geeft wel een hoop waardevolle tips. Om ze te negeren omdat ze je acute probleem niet oplossen is not the way to go.

* ik heb de toelichting van de code tag bestudeerd, maar begreep niet wat er bedoeld werd

Geen code tag:
<html>
<body>
<p>Foo</p>
</body>
</html>
Wel code tag

HTML:

<html>
 <body>
  <p>Foo</p>
 </body>
</html>

Is niet moeilijk, kost niets, kan je gewoon proberen.

Om toch maar even aan te geven dat ik echt wel wat in mijn mars heb bij het maken van de site: ik heb een online offerte systeem gemaakt dat werkt - iets wat je op geen enkele (vergelijkbare) site ziet (maar ik begrijp dat jij die 'prestatie' maar niks zult vinden)

Mag ik hier vraagtekens bij stellen? "Een offerte systeem" is een nogal brede omschrijving voor een formulier wat een mailtje kan sturen of een recordje in een database kan pleuren. De complexiteit van een offertesysteem gaat hem meer zitten in de hoeveelheid relaties die je moet leggen. Mag component X in product A gestopt worden en zo ja, blokkeert dat component Y of heeft ie een requirement voor component Z. Als je basis vakjargon niet kent ben je op z'n best hobbyist. Gezien de reactie die je Rob geeft ben je ook nog eens een eigenwijze hobbyist, want je wil niet luisteren naar ervaren professionals. Dat blijkt wel uit:

Ik begrijp dat je vindt dat ik van alles en nog wat moet doen - maar de problemen die jij vindt dat ik heb, heb ik niet.

Die problemen heb je wel, alleen ben je niet bewust van het feit dat het een probleem is of gaat worden. Javascript driven menu's zijn van 2004, niet zoekmachine, screenreader of mobile friendly en door de mogelijkheden van CSS compleet overbodig.

Ik heb alleen behoefte aan een betere code -binnen de site zoals die is- zodat voor Firefox/Chrome de inhoud van de pagina niet onder de menubalk door scrollt.
Dus: wie kan mij met dit -denk ik- simpele probleem helpen?

Jij voornamelijk, want scriptrequests doen we niet aan. Zo moeilijk moet het niet zijn om op je body wat lege ruimte aan de boven en linkerkant te creëren en daarin je menu en top bar te positioneren.

[mcDavid]

No offence, maar als je het gebruik van de [code] tag al niet begrijpt, dan moet je je misschien helemaal niet bezig houden met HTML.

Bovendien: als je van frames over wilt stappen op een JS-menu, kom je van de regen in de drup. Dan kun je nog beter de versie met frames behouden, die is tenminste nog een béétje navigeerbaar voor zoekmachines.

Waarom installeer je niet gewoon een CMS? Ben je voor ééns en voor altijd van het gezeik af en als je een leuke template zoekt hoef je alleen je bedrijfslogo erin te zetten en hoef je je verder nergens druk om te maken.

-edit-
Gericht antwoord op je vraag zal je hier waarschijnlijk niet krijgen trouwens. Dat zou betekenen dat wij eerst jouw code (of beter gezegd: andermans code die jij gebruikt) moeten gaan uitpluizen en vervolgens een oplossing voor je moeten uitwerken waar we zelf absoluut niet achter staan.

[Voor 20% gewijzigd door mcDavid op 07-07-2011 13:20]