18 svar · 457 visningar · startad av ampy
Har denna lilla kod:
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
kompis.style.pixelTop += 5;
if(kompis.style.pixelTop < 200 ){
setTimeout("showKompis("+work+")",10);
} else {
work = false;
}
} else {
kompis.style.pixelTop -= 5;
if(kompis.style.pixelTop > 0 ){
setTimeout("showKompis("+work+")",10);
} else {
work = true;
}
}
}
</script>
<div id="kompis" style="position: [b]relative[/b]; overflow:hidden;">
<span style="position: absolute; overflow:hidden; top: 0; left: 0;" onmouseover="this.style.cursor='hand';" onclick="showKompis();">test</span>
</div>
Koden fungerar endast i Internet Explorer och inte i de webbläsarna jag har testat, Mozilla och Opera.
Hur ska man skriva om koden så att den även fungerar i Mozilla och Opera?
Använd document.getElementById() för att referera till ett element.
Istället för
kompis.style[...]
skriver du
document.getElementById("kompis").style[...]
Och använd inte pixelTop eftersom det är IE-specifikt. Läs av top (obj.style.top) istället.
Vad är tanken när du på dina setTimeout-rader skickar med ett argument till showKompis(), som ändå aldrig används?
Tråden hör bättre hemma i JavaScript-forumet
ampy »
Det ser ut som att det är ett javascript du vill ha hjälp med.
Jag flyttar tråden från HTML-forumet.
Beklagar att jag postade i fel forum, även den bästa kan göra misstag. :r
dectgap:
Menar du så här?
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
document.getElementById("kompis").style.top += 5;
if(document.getElementById("kompis").style.top < 200 ){
setTimeout("showKompis("+work+")",10);
} else {
work = false;
}
} else {
document.getElementById("kompis").style.top -= 5;
if(document.getElementById("kompis").style.top > 0 ){
setTimeout("showKompis("+work+")",10);
} else {
work = true;
}
}
}
</script>
<div id="kompis" style="position: relative; overflow:hidden;">
<span style="position: absolute; overflow:hidden; top: 0; left: 0;" onmouseover="this.style.cursor='hand';" onclick="showKompis();">test</span>
</div>
Det fungerar inget vidare bra.
Redigerat lite i första inlägget, var fel på ett ställe.
OT:
<span style="position: absolute; overflow:hidden; top: 0; left: 0;cursor:hand;cursor:pointer;" onclick="showKompis();">test</span>
Så här kanske:
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
document.getElementById("kompis").style.top = '+5px';
if(document.getElementById("kompis").style.top < 200 ){
} else {
work = false;
}
} else {
document.getElementById("kompis").style.top = '-5px';
if(document.getElementById("kompis").style.top > 0 ){
} else {
work = true;
}
}
}
</script>
<div id="kompis" style="position: relative; overflow:hidden;">
<span style="position: absolute; overflow:hidden; top: 0; left: 0;cursor:hand;cursor:pointer;" onclick="showKompis();">test</span>
</div>
Ingen skillnad tyvärr. :l
Det blir skillnad om du tar bort overflow:hidden; i din div.
Om du ändrar funktionen till följande då?
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)+5)+'px';
if(parseInt(document.getElementById("kompis").style.top) < 200 ){
} else {
work = false;
}
} else {
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)-5)+'px';
if(parseInt(document.getElementById("kompis").style.top) > 0 ){
} else {
work = true;
}
}
}
</script>
Ogiltigt argument på rad 5:
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)+5)+'px';
Jag får inget sådant fel, och följande fungerar utmärkt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>xxx</title>
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)+5)+'px';
if(parseInt(document.getElementById("kompis").style.top) < 200 ){
} else {
work = false;
}
} else {
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)-5)+'px';
if(parseInt(document.getElementById("kompis").style.top) > 0 ){
} else {
work = true;
}
}
}
setInterval("showKompis()", 50);
</script>
</head>
<body>
<div id="kompis" style="position: absolute; top: 0">hej</div>
</body>
</html>
Jag skulle tippa på att det var top-värdet som saknades hos ampy. Det måste vara satt för att man skall kunna läsa av det.
<div id="kompis" style="position:absolute; [b]top:0px;[/b]">hej</div>
Berodde på att jag inte hade skrivit ut html, head och body.
Men du verkar ha modifierat den lite:
<div id="kompis" style="position: absolute; top: 0">hej</div>
Ska vara:
<div id="kompis" style="position: relative; overflow:hidden;">
<span style="position: absolute; overflow: hidden; top: 0px; left: 0;cursor:hand;cursor:pointer;" onclick="showKompis();">test</span>
</div>
Jag vill att när man klickar på "test" så ska den åka ner 200 px. Sen när man klickar på "test" igen ska den åka upp 200 px, till ursprungsläget.
Den nedre koden fungerar inte.
De setTimeout du skrev i första inlägget försvann någonstans på vägen. Använd "cursor: pointer" istället för "cursor: hand", så begränsar du dig inte till IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>xxx</title>
<script language="JavaScript" type="text/JavaScript">
var work = true;
function showKompis(){
if(work){
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)+5)+'px';
if(parseInt(document.getElementById("kompis").style.top) < 200 ){
setTimeout("showKompis()", 10);
} else {
work = false;
}
} else {
document.getElementById("kompis").style.top = (parseInt(document.getElementById("kompis").style.top)-5)+'px';
if(parseInt(document.getElementById("kompis").style.top) > 0 ){
setTimeout("showKompis()", 10);
} else {
work = true;
}
}
}
</script>
</head>
<body>
<div id="kompis" style="position: absolute; top: 0; cursor: pointer" onclick="showKompis()">hej</div>
</body>
</html>
Då skulle jag nog använda margin istället för att "skjuta ner" div'en. Att sedan ha ett absolut-positionerat lager i en div på det sättet verkar inte helt rätt heller. Någonting som är absolut-positionerat skall inte flytta på sig bara för att sidans innehåll ändras.
Då blir det något sånt här (fungerar även i Mozilla, har inte Opera installerat här, men det borde funka där också):¨
<script language="JavaScript" type="text/javascript">
var diff = 5;
function showKompis(){
document.getElementById("kompis").style.marginTop=(parseInt(document.getElementById("kompis").style.marginTop)+diff)+"px";
if(parseInt(document.getElementById("kompis").style.marginTop)==0||parseInt(document.getElementById("kompis").style.marginTop)==200){
diff=-diff;
} else {
setTimeout("showKompis()",10);
}
}
</script>
<div id="kompis" style="position:relative; overflow:hidden; margin-top:0px;">
<span onmouseover="this.style.cursor='hand';" onclick="showKompis();">test</span>
</div>
Red.
Lite sen. Syftade på Ampys första inlägg.
Nu fungerar denna kod i IE men inte i Mozilla:
<script language="JavaScript" type="text/javascript">
var diff = 5;
function showKompis(){
document.getElementById("kompis").style.marginTop=(parseInt(document.getElementById("kompis").style.marginTop)+diff)+"px";
if(parseInt(document.getElementById("kompis").style.marginTop)==0||parseInt(document.getElementById("kompis").style.marginTop)==200){
diff=-diff;
} else {
setTimeout("showKompis()",10);
}
}
</script>
<div id="kompis" style="position:relative; overflow:hidden; margin-top:0px;">
<span style="position: absolute; top: 100px; left: 576px; overflow:hidden;" onmouseover="this.style.cursor='hand';" onclick="showKompis();">test</span>
</div>
Jag vill ange positionen i span för att annars blir det inte riktigt så som jag vill ha det. Hur ska man lösa detta?
Ingen som vet?
Om du tar bort: overflow:hidden; i id="kompis" så får jag det att funka i Mozilla firebird.
Måste overflow:hidden; vara där?
Ja, tyvärr måste overflow:hidden; vara där.