Archief - Javascript probleempje

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

SultanJoe

Legacy Member
Ik heb een probleempje met mijn code waarvoor ik geen oplossing vindt:
<tr onmouseover="showCross()" onmouseout="hideCross()">
<td style="visibility:hidden">cross</td>
<td>...</td>
<td>...</td>
</td>

als de muis over de rij gaat wil ik de visibility van de eerste <td> veranderen, hier mijn script:

function showCross() {
this.firstChild.style.visibility="visible";
}
function hideCross() {
this.firstChild.style.visibility="hidden";
}

Waarom werkt dit niet?

Alvast bedankt ;)!


Arthur
a

adrianhates

Legacy Member
Kan je een voorbeeld online zetten? Dan kunnen we beter debuggen met firebug e.d. :)

Ik vind het raar hoe je this oproept. Ik zou het zo doen:

Code: 
<tr onmouseover="showCross(this)" onmouseout="hideCross(this)">
<td style="visibility:hidden">cross</td>
</tr>

Code: 
function showCross(row) {
row.firstChild.style.visibility="visible";
}
function hideCross(row) {
row.firstChild.style.visibility="hidden";
}

in principe kan je het ook oplossen met CSS

Code: 
table tr td:first-child{
    visibility:hidden;
}
table tr:hover td:first-child{
    visibility:visible;
}

maar daar mogen andere forum members mij gerust op verbeteren. Ik dacht dat in IE6 enkel de laatste pseudo class geïnterpreteerd wordt... En ten tweede is er iets loos met :hovers op elementen in IE6 die niet anchor elementen zijn :D
S

SultanJoe

Legacy Member
Lukt niet :S.
Hoe bedoel je, voorbeeldje online zetten?
C

Curahee Q

Legacy Member
Je html bestand op een server zetten zodat je hier een url kan plaatsen...
a

adrianhates

Legacy Member
Ik heb het even gemaakt met css en dit werkt ( behalve in IE6 denk ik, kkan het hier niet meteen testen ):

CSS Pseudo Class

PHP: 
table tr td:first-child{
    visibility:hidden;
}

table tr:hover td:first-child{
    visibility:visible;
}


Javascript gewijs met jQuery :

JavaScript

PHP: 
$(document).ready(function() {
        $("tr").mouseover(function(){
            $(this).children(".first").css("visibility","visible");
            }
        );
        $("tr").mouseout(function(){
            $(this).children(".first").css("visibility","hidden");
            }
        );
    }
);
J

Jerre Muesli

Legacy Member
Jquery heeft een toggle functie.
wrom niet display:none gebruiken?
S

SultanJoe

Legacy Member
x4xk3 zei:
Jquery heeft een toggle functie.
wrom niet display:none gebruiken?
Klik om te vergroten...

Wordt dan de cel gewoon niet weggelaten? Verschuift de hele rij dan niet?
S

SultanJoe

Legacy Member
Heel raar, first-class blijkt te werken met <p> en dergelijke, maar het werkt niet met <td>, echt raar.

mijn code:

<html>
<head>
<style type="text/css">
p:first-child{
color:blue;
}
td:first-child{
color:blue;
}
</style>
</head>

<body>
<table>
<tr>
<td>hallo</td>
<td style="color:blue">hello</td>
</tr>
<tr>
<td>hallo</td>
<td>hello</td>
</tr>
</table>
<div>
<p>blabla</p>
<p>blabla</p>
</div>
</body>
</html>​
a

adrianhates

Legacy Member
SultanJoe zei:
Heel raar, first-class blijkt te werken met <p> en dergelijke, maar het werkt niet met <td>, echt raar.

mijn code:

<html>
<head>
<style type="text/css">
p:first-child{
color:blue;
}
td:first-child{
color:blue;
}
</style>
</head>

<body>
<table>
..
</table>
<div>
<p>blabla</p>
<p>blabla</p>
</div>
</body>
</html>​
Klik om te vergroten...

gebruik je mijn voorbeelden?
a

adrianhates

Legacy Member
SultanJoe zei:
Ja, de css en ook de jquery heb geprobeerd, geen resultaat :S.
Klik om te vergroten...

dan moete we het probleem toch ergens anders zoeken hoor.
Je hebt toch jquery gedownload en bij in uw webpagina gevoegd he?

Wederom , post een voorbeeld en dan kunnen we uw werk debuggen!
( via ftp dus ergens op een webhosting zetten en de link hier droppen , niet wat code in een bericht plaatsen )
S

Spacy2003

Legacy Member
Geen idee waarom je hiervoor een javascript library zou gebruiken (dit is 4KB incl. opmaak t.o.v. Jquery 19 KB zonder enige opmaak).
Zelf vlug wat in elkaar gestoken.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
       		<title>Test toggle javascript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
			td:first-child {visibility: hidden;} 
		</style>
	</head>
	<body>
		<table>
		<tr onmouseover="showCross(this)" onmouseout="hideCross(this)">
			<td>
				<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Bullet_star.png" alt="star"/>
			</td>
			<td>
				<p>Hover over</p>
			</td>
			<td>
				<p>this row !</p>
			</td>
		</tr>
		<tr onmouseover="showCross(this)" onmouseout="hideCross(this)">
			<td>
				<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Bullet_star.png" alt="star"/>
			</td>
			<td>
				<p>No No Hover</p>
			</td>
			<td>
				<p>over me !</p>
			</td>
		</tr>
		</table>

	<script type="text/javascript">
		function showCross(me)
		{
			me.getElementsByTagName("td")[0].style.visibility ="visible";
		}
		
		function hideCross(me)
		{
			me.getElementsByTagName("td")[0].style.visibility ="hidden";
		}
	</script>
	</body>
</html>
S

SultanJoe

Legacy Member
Spacy2003 zei:
Geen idee waarom je hiervoor een javascript library zou gebruiken (dit is 4KB incl. opmaak t.o.v. Jquery 19 KB zonder enige opmaak).
Zelf vlug wat in elkaar gestoken.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
       		<title>Test toggle javascript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
			td:first-child {visibility: hidden;} 
		</style>
	</head>
	<body>
		<table>
		<tr onmouseover="showCross(this)" onmouseout="hideCross(this)">
			<td>
				<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Bullet_star.png" alt="star"/>
			</td>
			<td>
				<p>Hover over</p>
			</td>
			<td>
				<p>this row !</p>
			</td>
		</tr>
		<tr onmouseover="showCross(this)" onmouseout="hideCross(this)">
			<td>
				<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Bullet_star.png" alt="star"/>
			</td>
			<td>
				<p>No No Hover</p>
			</td>
			<td>
				<p>over me !</p>
			</td>
		</tr>
		</table>

	<script type="text/javascript">
		function showCross(me)
		{
			me.getElementsByTagName("td")[0].style.visibility ="visible";
		}
		
		function hideCross(me)
		{
			me.getElementsByTagName("td")[0].style.visibility ="hidden";
		}
	</script>
	</body>
</html>
Klik om te vergroten...

You're my hero :)!
Twerkt!
Groot gelijk, elke keer jquery moeten laten laden, not good :P.

Tnx ;)!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan