HTML Javascript in HTML seite

Mr. Poe · 19. September 2012

hallo,

ich schreib mir grad ne kleine homepage...

da sollte eigentlich ein kleines javascript sonen banner/werbung/news dungesn rumfahren... nur das macht es irgentwie nicht.

sobald:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

in der html datei steht, wird das script nicht ausgeführt... oder vllt doch?
nach ner weile kakt ie ab und ich hab ne cpu auslastung von ~80%... liegt aber am script... das ist noch nicht fertig und erzeugt diese hohe cpu last.

das div, das eig bewegt werden soll, bewegt sich nicht, wenn die oben genannte zeile drinnensteht aber das script läuft anscheinend. wenn ich die zeile entferne läufts einwandfrei... dann ist aber der komplette style durcheinander und z.b. hover funktioniert nichtmehr...

powerfx · 19. September 2012

Du musst das Skript richtig einbinden. Keiner kann dir sagen, was du falsch machst, wenn du es nicht zeigst.
Als Hilfe kannst du den W3 Validator nutzen. Er erkennt Fehler in HTML-Seiten.

Madman1209 · 19. September 2012

Hi,

poste doch mal ein weniger mehr Code. Mach doch einfach mal eine leere HTML-Seite, wo nur eine JavaSCript-Methode aufgerufen wird, die einfach nur "console.log('Hallo Welt')" ausgegeben wird. Öffne die im Firefox und installiere FireBug, öffne das Konsolenfenster und schau ob es ausgegeben wird.

VG,
Mad

kling1 · 19. September 2012

sollte doch alles auch ohne doctype laufen.. also wenn du doctype entfehrnst und alles aufeinmal anders aussieht istd er fehler eiegntlich bei dir.. außerdem sieht html5 doctype einfach so aus <!DOCTYPE html> und fertig

Mr. Poe · 19. September 2012

Code:

<!DOCTYPE html>

funktioniert nicht... das ist dann genauso wie wenn gakein doctype drinnensteht...

index.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Webseite - Test</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="js/script.js" type="text/javascript"></script>
    </head>
    <body onload="start()">
        <div id="scrlfrm">
            irgentwas, das verschoben werden soll...
        </div>
...
...
...

script.js:

Code:

var scrlfrm;
var speed = 10;
var max = 0;
var min = -485;
var pos = 0;
var tmp = 0;

function start(){
    scrlfrm = document.getElementById("scrlfrm");
    scrlfrm.style.position = "relative";
    move();
}

function move(){
    if(pos==max) tmp=1;
    if(pos==min) tmp=0;
    if(tmp==1) pos--;
    if(tmp==0) pos++;
    
    scrlfrm.style.top = pos;
    window.setTimeout("move()", 100 / speed);
}

hab hier nur ie9...

kling1 · 19. September 2012

Amarok2 schrieb:
Code:

<!DOCTYPE html>

funktioniert nicht... das ist dann genauso wie wenn gakein doctype drinnensteht...

hab hier nur ie9...

genau das sollte der doch machen

ie als referenz zu nehmen für irgendetwas ist aufjedenfall der falsche ansatz.. normalerweise macht man alles erst so, wie es sein soll und in jedem anderen browser funktionier um erst dann für den ie anzupassen.. wieso benutzt du nicht jquery?

Mr. Poe · 19. September 2012

wasn jquery?

das ich will nur ne kleine seite schreiben... nur so zum spaß... ich hab auch nicht wirklich viel erfahrung mit javascript...

ich würd ja firefox nehmen... geht aber hier grad nich^^

@edit:
der validator sagt mir, alles is in ordnung... keine fehler oder sonnstnochwas...

Madman1209 · 19. September 2012

Hi,

window.setTimeout("move()", 100 / speed);

macht das alle 10 ms - ist das so gewollt? Bei mir werden die Methoden jedenfalls korrekt aufgerufen - bewegen tut sich allerdings nichts, das ist korrekt.

VG,
Mad

DasBoeseLebt · 19. September 2012

Pfad überprüft, wird die Datei überhaupt gefunden/geladen? Geschaut, ob es funktioniert, wenn du die Methoden direkt einbettest? Funktionieren diese überhaupt (findet er das Element etc)?

jquery wäre hier wohl sowas von extrem oversized.

Erhöhe den zeitlichen Abstand mal, so auf 1Sekunde. 10ms ist minDelay und kann, wenn der Browser noch was anderes ,tut' zu Problemen führen. (In HTML5 sind es 4ms, aber wie es da ist, kA)

Madman1209 · 19. September 2012

Hi,

Fehler gefunden: Wenn du einen DocType wie 4.01 angibst dann musst du auch Einheiten mit angeben!

scrlfrm.style.top = pos+"px";

löst dein Problem

VG,
Mad

Mr. Poe · 19. September 2012

so.... hab letzte woche n bischen auf selfhtml geschaut und halt sone coole demo gefunden, wo da so 2 bilder im kreis rumfahren...

jetzt willt ich da sowas halt auf meine webseite draufmachen... nur das das nur den text hoch/runter scrollt...

hier mal meine erste abgeänderte demo, mit der alles angefangen hat:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Test</title>
<script type="text/javascript">
var scrlfrm;
var speed = 20;
var max = 800;
var min = 0;
var pos = 0;
var tmp = 0;

function Init(){
  scrlfrm = document.getElementById("scrlfrm");
  scrlfrm.style.position = "relative";
  move();
}

function move(){
  if(pos==max)
    tmp=1;
  if(pos==min)
    tmp=0;
  if(tmp==1)
    pos--;
  if(tmp==0)
    pos++;

  scrlfrm.style.top = pos;
  window.setTimeout("move()", 100 / speed);
}


</script>

<style>
.test{
	position:relative;
	top:0px;
	left:0px;
	background-color:#141414;
	width:30px;
	height:30px;
}

.main{
	position:relative;
	top:10px;
	left:10px;
	background-color:#123456;
	width:50px;
	height:830px;
}
</style>
</head><body onload="Init()">
<div class="main" id="scrlfrm">
	<div id="scrlfrm" class="test"><img src="1.gif" width="20" height="20" border="0" alt="roter Punkt"></div>
</div>
</body></html>

speicher das mal ab... und öffne es im internet explorer... bei mir passiert nichts... wenn ich die doctype zeile rauslösche, gehts...

Madman1209 · 19. September 2012

Hi,

meinen Beitrag oben nicht gesehen?

VG,
Mad

DasBoeseLebt · 19. September 2012

Die Einheit vergessen und jeder übersieht es, ... na toll

Dann kannst du den Delay auch so lassen

Mr. Poe · 19. September 2012

@madman:
hab deinen beitrag zuspät gesehen... jetzt gehts^^
danke

Ergänzung (19. September 2012)

so... nochn anderes problem...
wenn ihr diese seite aufruft:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Test</title>
<script type="text/javascript">
var scrlfrm;
var speed = 20;
var max = 800;
var min = 0;
var pos = 0;
var tmp = 0;

function Init(){
  scrlfrm = document.getElementById("scrlfrm");
  scrlfrm.style.position = "relative";
  move();
}

function move(){
  if(pos==max)
    tmp=1;
  if(pos==min)
    tmp=0;
  if(tmp==1)
    pos--;
  if(tmp==0)
    pos++;
  if(pos==50)
	window.setTimeout("move()", 5000);


  scrlfrm.style.top = pos+"px";
  window.setTimeout("move()", 100 / speed);
}


</script>

<style>
.test{
	position:relative;
	top:0px;
	left:0px;
	background-color:#141414;
	width:30px;
	height:30px;
}

.main{
	position:relative;
	top:10px;
	left:10px;
	background-color:#123456;
	width:50px;
	height:830px;
}
</style>
</head><body onload="Init()">
<div class="main" id="scrlfrm">
	<div id="scrlfrm" class="test"></div>
</div>
</body></html>

wird der streifen immer schneller...
WIESO???!!!

theoretisch sollte doch der streifen nach 50px für 5sekunden stehen bleiden oder nicht?

character · 19. September 2012

Wenn pos 50 ist, rufst du die Funktion nochmal auf, die wiederum ruft sich dann wieder mehrfach auf etc.

"tmp" ist übrigens ein richtig, richtig schlechter Variablenname.

Globale Variablen sind böse, auch in JavaScript.

Du kannst den HTML5-Doctype verwenden. Das funktioniert in wirklich jedem Browser, auch den alten.

Mr. Poe · 19. September 2012

ja ich ruf die selbe funktion nochmal auf... aber doch erst nach 5 sekunden?
also theoretisch sollte pos 50 sein, das script 5 sekunden warten und dann die selbe funktion nochmal aufrufen?

Jesterfox · 19. September 2012

Wenn Pos 50 ist hängst du den Timeout rein, aber brichts die Funktion nicht ab, womit die Funktion 2 mal als Timeout eingereiht wird und damit 2 mal parallel läuft.

Code:

function move()
{  
    if(pos==max)    
        tmp=1;  
    if(pos==min)    
        tmp=0;  
    if(tmp==1)    
        pos--;  
    if(tmp==0)    
        pos++;  
    if(pos==50)	
        window.setTimeout(move, 5000);    
    else
        window.setTimeout(move, 100 / speed);
    scrlfrm.style.top = pos+"px";  
}

Beachte auch den etwas anderen setTimeout Aufruf, denn eigentlich gehört da kein String rein, der muss erst umständlich über eval() ausgewertet werden. Besser man übergibt nur den Funktionsnamen so wie es eigentlich vorgesehen ist.

Suche

HTML Javascript in HTML seite

Mr. Poe

Lt. Commander

powerfx

Admiral

Madman1209

Fleet Admiral

kling1

Gast

Mr. Poe

Lt. Commander

kling1

Gast

Mr. Poe

Lt. Commander

Madman1209

Fleet Admiral

DasBoeseLebt

Lieutenant

Madman1209

Fleet Admiral

Mr. Poe

Lt. Commander

Madman1209

Fleet Admiral

DasBoeseLebt

Lieutenant

Mr. Poe

Lt. Commander

character

Lt. Commander

Mr. Poe

Lt. Commander

Jesterfox

Legende

Ähnliche Themen