[CSS] display:none werkt niet icm :hover.. :? - Softwareontwikkeling

zaterdag 16 augustus 2003 02:30

Acties:

Verwijderd

Topicstarter

ik had het idee een soort van 'sidebar' neer te planten op mijn website. deze is 200px breed, staat aan de rechterkant van het scherm, 10px van de 'rand' af, en kan in sommige gevallen _over de tekst heen vallen_. om deze reden wil ik dat deze sidebar tijdelijk verdwijnt zolang ik mijn muiscursor erboven houd. dit zou mogelijk moeten zijn dmv 'display: none', maar dat blijkt in dit geval niet te werken. heel af en toe verdwijnt de sidebar (en slechts eenmalig), in de meeste gevallen 'knippert' de sidebar continu.

code:

div.sidebar {
    background: url(sdb_alpha1.png) transparent;
    color: #fff;
    position: fixed;
    top: 10px;
    left: auto;
    width: 200px;
    right: 10px;
    padding: 5px;
    border: 1px dashed #333;
}

div.sidebar:hover {
    display: none;
}

(url is http://sacaya.dynup.net/index.php btw, stylesheet: http://sacaya.dynup.net/sacaya_dstyle.css )

ik test alles in mozilla 1.4 (linux 2.4.20);

hoe krijg ik dit aan de praat? hoe zorg ik dat de sidebar wegblijft zolang ik mijn muis erboven houd?

zaterdag 16 augustus 2003 02:37

Acties:

crisp

Devver

Pixelated

je bent dan wel erg Mozilla-only bezig als je het zo doet, want IE ondersteund de hover pseudo-class alleen voor links, en Opera sinds kort ook alleen nog maar voor links.
Ik zou toch maar eens naar javascript gaan kijken in deze...

Intentionally left blank

zaterdag 16 augustus 2003 10:41

Acties:

Verwijderd

Topicstarter

internet explorer ondersteund voor zover ik weet al helemaal geen divs met fixed position... hij zal de sidebar waarschijnlijk gewoon onder de no-epatents banner plakken. (wat mij betreft hoeft de site ook helemaal niet goed te werken in internet explorer... ik wil me enkel richten op linux / unix gebruikers..). opera heb ik zojuist even getest, en deze doet exact hetzelfde als mozilla: de sidebar gaat 'knipperen'.

als opera sinds kort enkel hovers ondersteund voor links, moet er dus een andere oplossing komen.
is het bijvoorbeeld mogelijk dit met een link te doen (en _zonder_ javascript)? (klik op de link en de sidebar verdwijnt.. of misschien :hover gebruiken voor die link ipv de sidebar zelf.. muisje boven de link houden zodat de sidebar verdwijnt ?)

zaterdag 16 augustus 2003 11:07

Acties:

Johnny

ondergewaardeerde internetguru

Ik denk dat je beter onmouseover="this.style.visibility='hidden'" kunt gebruiken, dat werkt in alle browsers. De reden dat display: none maar 1x werkt is omdat je het element niet meer weergeeft, je beweegt je muis over een element dat er niet meer is. met visibility maak je het slechts onzichtbaar, maar blijft het wel op die plaats staan.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 16 augustus 2003 11:26

Acties:

Verwijderd

Topicstarter

deze methode zorgt er inderdaad wel voor dat de sidebar verdwijnt (en helaas ook niet meer terugkomt..). ik heb ook een 'onmouseout' toegevoegd in de hoop dat de sidebar dan weer terugkomt zodra ik mijn muiscursor daar weer weghaal, maar dat lijkt niet te werken. is het mogelijk om bijvoorbeeld in de main content ergens een of twee links te zetten die ervoor zorgen dat ik de sidebar weg en weer tevoorschijn kan toveren? (de link dus een _ander_ object laten verbergen?) (document.?.style.visibility='hidden/visible') ??

zaterdag 16 augustus 2003 11:53

Acties:

Johnny

ondergewaardeerde internetguru

code:

function hide()
{
document.getElementById('naamvandiv').style.visibility='visible';
}
function show()
{
document.getElementById('naamvandiv').style.visibility='hidden';
}

<div id="naamvandiv"></div>

Edit: Aanhalingstekens vergeten, zonder die denkt hij dat het een variable is.

Je kunt ook beter de links <a href="javascript:show()"></a> doen, dan werken ze ook als je als je ze activeert met de enter toets.

[ Voor 41% gewijzigd door Johnny op 16-08-2003 13:11 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 16 augustus 2003 12:39

Acties:

Verwijderd

Topicstarter

call me a noob, maar wat is hier fout aan?

code:

<head><script language="text/javascript">
    function show() {
        document.getElementById('sidebar').style.visibility=visible;
    }
    function hide() {
        document.getElementById('sidebar').style.visibility=hidden;
    }
</script></head>

code:

1 2	<a class="ftlnk" onclick="show()">show the sidebar</a> / <a class="ftlnk" onclick="hide()">hide the sidebar</a><br>

code:

<div id="sidebar">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.<br>
    </p>
</div>

[ Voor 16% gewijzigd door Verwijderd op 16-08-2003 12:58 ]

zaterdag 16 augustus 2003 13:00

Acties:

Guillome

test

="visible" en ="hidden"

En IExplorer ondersteund natuurlijk wel divs met fixed posities
<div style="position:absolute; top:400px; left:200px;">hoi</div>
Werkt gewoon

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zaterdag 16 augustus 2003 13:10

Acties:

Verwijderd

Topicstarter

XLerator schreef op 16 August 2003 @ 13:00:
="visible" en ="hidden"

nog steeds niets..

... ik kan klikken wat ik wil, maar verdwijnen, ho maar..

ik heb het nu even geprobeerd met buttons (<input type="button" value="show the sidebar" onclick="...), maar ook dit werkt niet..

[ Voor 29% gewijzigd door Verwijderd op 16-08-2003 13:11 ]

zaterdag 16 augustus 2003 13:16

Acties:

Johnny

ondergewaardeerde internetguru

language="text/javascript" bestaat niet, het moet type="text/javascript" zijn, of language="javascript"

Deze werkt:

code:

<script type="text/javascript">
    function show() {
        document.getElementById('sidebar').style.visibility="visible";
    }
    function hide() {
        document.getElementById('sidebar').style.visibility="hidden";
    }
</script>


<a class="ftlnk" href="javascript:show()">show the sidebar</a>
<a class="ftlnk" href="javascript:hide()">hide the sidebar</a><br>

<div id="sidebar">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.<br>
    </p>
</div>

[ Voor 35% gewijzigd door Johnny op 16-08-2003 13:17 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 16 augustus 2003 13:22

Acties:

Guillome

test

Alert erbij zetten werkt ook, dan kan je zien of hij überhaupt de functie wel uitvoerd

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zaterdag 16 augustus 2003 13:24

Acties:

Rickets

Finger and a shift

XLerator schreef op 16 augustus 2003 @ 13:00:
="visible" en ="hidden"
En IExplorer ondersteund natuurlijk wel divs met fixed posities
<div style="position:absolute; top:400px; left:200px;">hoi</div>
Werkt gewoon

Dus die blijft volgens jou staan als je gaat scrollen?

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

zaterdag 16 augustus 2003 13:26

Acties:

Verwijderd

Topicstarter

Johnny schreef op 16 augustus 2003 @ 13:16:
language="text/javascript" bestaat niet, het moet type="text/javascript" zijn, of language="javascript"

.. dat was inderdaad het probleem.. dank je (en crisp + XLerator natuurlijk ook

)

zaterdag 16 augustus 2003 13:28

Acties:

beetle71

Verwijderd schreef op 16 August 2003 @ 10:41:
..... opera heb ik zojuist even getest, en deze doet exact hetzelfde als mozilla: de sidebar gaat 'knipperen'.
.....

Dit probleem blijf je (heel logisch) altijd houden, Als je een layer weghaalt als je 'mouseover' gaat is de layer weg en er dus geen mouseover meer, dan komt ie dus ineens weer terug en begint het verhaaltje van voor af aan....

Ik heb even snel een voorbeeldje gemaakt hoe het wel zou kunnen; Door gebruik te maken van een andere (onzichtbare) layer die als mouseover functioneert te gebruiken

code:

<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; 
    left: 10; top: 10; background-color: #FF0000; layer-background-color: #FF0000; 
    border: 1px none #000000;"></div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 10; 
    top: 10; cursor:hand;" onmouseover="getElementById('Layer1').style.display='none';" 
    onmouseout="getElementById('Layer1').style.display='block';"></div>
</body>

[ Voor 44% gewijzigd door beetle71 op 16-08-2003 13:40 ]

zaterdag 16 augustus 2003 13:30

Acties:

Guillome

test

Rickets schreef op 16 augustus 2003 @ 13:24:
[...]

Dus die blijft volgens jou staan als je gaat scrollen?

Ow wordt dát fixed posities genoemd?

Ok dat kan. Dat kan wel met JS trouwens, maar das niet lekker

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router