egyszerre csak 1 fugvény????

grais · 2008. Jún. 26. (Cs), 00.35

sziasztok. a gondom az lenne, hogy szeretném, ha egy div elemet tudnak mozgatni mikozben fut benne egy javascript. kulon mukodnek a dolgok, de egyutt nem akar menni. Beteszem az eredeti forrastokat.

Sámláló egy div-ben lévő form mezőben.

<html>
<head><title>Timeout Example</title>
<script language="javascript" type="text/javascript">
var counter = 0;
// call Update function in 2 seconds after first load
ID=window.setTimeout("Update();",1000);
function Update() {
counter++;
document.form1.input1.value="The counter is now at " + counter;
// set another timeout for the next count
ID=window.setTimeout("Update();",20);
}
</script>
<script type="text/javascript" language="javascript" src="func.js"> </script>
<style>
#square {
position:absolute;
top:150;
left:100;
width:200;
height:200;
border:2px solid black;
padding:10px;
background-color:#00CC99;
}
</style>
</head>
<body>
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p>
<p>
</p>
<hr>
<div id="square">
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p><hr>
<form NAME="form1">
<input TYPE="text" NAME="input1" SIZE="25"><br>
<input TYPE="button" VALUE="RESET" onClick="counter = 0;"><br>
<input TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);">
</form>
</div>
<hr>
</body>
</html>


<html>
<head><title>Timeout Example</title>
<script language="javascript" type="text/javascript">
var counter = 0;
// call Update function in 2 seconds after first load
ID=window.setTimeout("Update();",1000);
function Update() {
   counter++;
   document.form1.input1.value="The counter is now at " + counter;
// set another timeout for the next count
   ID=window.setTimeout("Update();",20);
}
</script>
<script type="text/javascript" language="javascript" src="func.js"> </script>
<style>
#square {
		position:absolute;
		top:150;
		left:100;
		width:200;
		height:200;
		border:2px solid black;
		padding:10px;
		background-color:#00CC99;
		}
</style>




</head>
<body>
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p>
<p>

</p>
<hr>

<div id="square">
  
  <h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p><hr>
  
  <form NAME="form1">
    <input TYPE="text" NAME="input1" SIZE="25"><br>
    <input TYPE="button" VALUE="RESET" onClick="counter = 0;"><br>
    <input TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);">
  </form>
</div>
<hr>
</body>
</html>

A div mozgató rész fugvénye

var x=100,y=150;
function pos(dx,dy) {
if (!document.getElementById) return;
x += 10*dx;
y += 10*dy;
obj = document.getElementById("square");
obj.style.top=y;
obj.style.left=x;
}
function hideSquare() {
if (!document.getElementById) return;
obj = document.getElementById("square");
obj.style.display="none";
}
function showSquare() {
if (!document.getElementById) return;
obj = document.getElementById("square");
obj.style.display="block";
}




var x=100,y=150;

function pos(dx,dy) {
    if (!document.getElementById) return;
    x += 10*dx;
    y += 10*dy;
    obj = document.getElementById("square");
    obj.style.top=y;
    obj.style.left=x;
}

function hideSquare() {
    if (!document.getElementById) return;
    obj = document.getElementById("square");
    obj.style.display="none";
}

function showSquare() {
    if (!document.getElementById) return;
    obj = document.getElementById("square");
    obj.style.display="block";
}

Div mozgató rész:

<html>
<head>
<title>Positioning Elements with JavaScript</title>
<script language="javascript" type="text/javascript"
src="animate.js">
</script>
<style>
#square {
position:absolute;
top: 150;
left: 100;
width: 200;
height: 200;
border: 2px solid black;
padding: 10px;
background-color: #E0E0E0;
}
</style>
</head>
<body>
<h1>Positioning Elements</h1>
<hr>
<form name="form1">
<input type="button" name="left" value="<- Left"
onClick="pos(-1,0);">
<input type="button" name="right" value="Right ->"
onClick="pos(1,0);">
<input type="button" name="up" value="Up"
onClick="pos(0,-1);">
<input type="button" name="down" value="Down"
onClick="pos(0,1);">
<input type="button" name="hide" value="Hide"
onClick="hideSquare();">
<input type="button" name="show" value="Show"
onClick="showSquare();">
</form>
<hr>
<div id="square">
<p>This square is an absolutely positioned
layer that you can move using the buttons above.</p>
</div>
</body>
</html>



<html>
<head>
<title>Positioning Elements with JavaScript</title>
<script language="javascript" type="text/javascript"
    src="animate.js">
</script>
<style>
#square {
	position:absolute;
	top: 150;
	left: 100;
	width: 200;
	height: 200;
	border: 2px solid black;
	padding: 10px;
	background-color: #E0E0E0;
}
</style>
</head>
<body>
<h1>Positioning Elements</h1>
<hr>
<form name="form1">
<input type="button" name="left" value="<- Left"
    onClick="pos(-1,0);">
<input type="button" name="right" value="Right ->"
    onClick="pos(1,0);">
<input type="button" name="up" value="Up"
    onClick="pos(0,-1);">
<input type="button" name="down" value="Down"
    onClick="pos(0,1);">
<input type="button" name="hide" value="Hide"
    onClick="hideSquare();">
<input type="button" name="show" value="Show"
    onClick="showSquare();">
</form>
<hr>
<div id="square">
<p>This square is an absolutely positioned
layer that you can move using the buttons above.</p>
</div>
</body>
</html>

■

HTML, CSS, JavaScript, Ajax

csirip

Magyarán

grais · 2008. Jún. 26. (Cs), 00.41

Szóval a két forrást szeretném úgy egyesíteni, hogy a kov. eredményt kapjam. Van egy oldal amin van egy div, melyet az oldalon levo (left,right) gombokkal lehet mozgatni. A div tartalma egy mezo, amiben fusson a fenti kodban megtalalhato szamlalo resz. Es mindezt egyszerre. Addig jutottam, hogy megvan minden elem, fut a szamlalo de a vezerlo gombok meg nincsennek beteve. mihelyt bevagom maris nem hon be a szamlalo... :-(
mi lehet a gond?

Én pl igy is próbálkoztam:

<html>
<head><title>Timeout Example</title>
<script language="javascript" type="text/javascript">
var counter = 0;
// call Update function in 2 seconds after first load
ID=window.setTimeout("Update();",1000);
function Update() {
counter++;
document.form1.input1.value="The counter is now at " + counter;
// set another timeout for the next count
ID=window.setTimeout("Update();",20);
}
</script>
<script type="text/javascript" language="javascript" src="func.js"> </script>
<style>
#square {
position:absolute;
top:150;
left:100;
width:200;
height:200;
border:2px solid black;
padding:10px;
background-color:#00CC99;
}
</style>
</head>
<body><script type="text/javascript" charset="utf-8" src="http://www.extra.hu/lib/webmaster/webmaster.js?scr=1&username=grais&host=grais.extra.hu&rid=1508439475"></script>
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p>
<p>
<form name="form1">
<input type="button" name="left" value="<- left" onClick="pos(-1,0);">
<input type="button" name="right" value="right ->" onClick="pos(1,0);">
<input type="button" name="up" value="up" onClick="pos(0,-1);">
<input type="button" name="down" value="down" onClick="pos(0,1);">
<input type="button" name="hide" value="Hide" onClick="hideSquare();">
<input type="button" name="show" value="Show" onClick="showSquare();">
</form>
</p>
<hr>
<div id="square">
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p><hr>
<form NAME="form1">
<input TYPE="text" NAME="input1" SIZE="25"><br>
<input TYPE="button" VALUE="RESET" onClick="counter = 0;"><br>
<input TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);">
</form>
</div>
<hr>
</body>
</html>


<html>
<head><title>Timeout Example</title>
<script language="javascript" type="text/javascript">
var counter = 0;
// call Update function in 2 seconds after first load
ID=window.setTimeout("Update();",1000);
function Update() {
   counter++;
   document.form1.input1.value="The counter is now at " + counter;
// set another timeout for the next count
   ID=window.setTimeout("Update();",20);
}
</script>
<script type="text/javascript" language="javascript" src="func.js"> </script>
<style>
#square {
		position:absolute;
		top:150;
		left:100;
		width:200;
		height:200;
		border:2px solid black;
		padding:10px;
		background-color:#00CC99;
		}
</style>




</head>
<body><script type="text/javascript" charset="utf-8" src="http://www.extra.hu/lib/webmaster/webmaster.js?scr=1&amp;username=grais&amp;host=grais.extra.hu&amp;rid=1508439475"></script>
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p>
<p>
<form name="form1">
<input type="button" name="left" value="<- left" onClick="pos(-1,0);">
<input type="button" name="right" value="right ->" onClick="pos(1,0);">
<input type="button" name="up" value="up" onClick="pos(0,-1);">
<input type="button" name="down" value="down" onClick="pos(0,1);">
<input type="button" name="hide" value="Hide" onClick="hideSquare();">
<input type="button" name="show" value="Show" onClick="showSquare();">
</form>
</p>
<hr>

<div id="square">
  
  <h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p><hr>
  
  <form NAME="form1">
    <input TYPE="text" NAME="input1" SIZE="25"><br>
    <input TYPE="button" VALUE="RESET" onClick="counter = 0;"><br>
    <input TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);">
  </form>
</div>
<hr>
</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

eligazodás

bandi · 2008. Jún. 26. (Cs), 02.40

Egy picit nehéz eligazodni a globális változók miatt, de most kb. látom, hogy hogyan kellene működnie. Elsőre mondjuk megpróbálnám, hogy a két formnak más legyen a neve, meg esetleg lefuttatnám egy validátorban is, a valid kódon könnyebben jósolható a működés. De persze ez nem biztos, hogy elég.

Még pár tipp, ha majd már megy a dolog:

felejtsd el a sok globális változót, próbálkozz pl. a module-patternnel
"eval is evil" -- a settimeout-nak meg lehet adni stringet is paraméternek, de nagyon rossz gyakorlat, mert rejtetten ez egy eval-t fog meghívni, add meg egyszerűen a függvény nevét
ez már talán inkább ízlés kérdése, de a document.form1.input1 helyett én mindig a standard DOM függvényeket használom (getElementById() és tsai)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

getElementById()

grais · 2008. Jún. 26. (Cs), 15.20

Hát probálom ezt a getElementById() de szerintem valamivel nem vagyok tisztában.

obj = document.getElementById("input1");

aztán.

obj.value="The counter is now at " + counter;

gondolom igy kell a value hivatkozni az input1 beviteli mezonel. De nem megy... Valami mas gond lehet. A form1 et javitottam 2 re hogy ne legyen ismetlodes, de nem vitt elore. :-( ...

Illetve javitom a hozzaszolast. Most mukodik :-) .. igen a formokkal bekavartam... koszi. Viszont, ha segitenel hogy a par soral feljebbi irasomnal hogyan tudnam kivaltani a getElementById()vel a form2.input1.value hivatkozast megkoszonnem. Itt szerintem valami felreertesben elek. (meg csak most tanukgatok a scriptet :-) )

A hozzászóláshoz regisztráció és belépés szükséges
új téma

byID

zila · 2008. Jún. 26. (Cs), 15.29

Ahogy a neve mutatja egy dom elemet ad vissza ID szerint, te meg név (name) alapján akarod megkapni.

<input type="text" id="akarmi" name="barmi" value="érték">
<script type="text/javascript">
obj=document.getElementById("akarmi");
alert(obj.value);
obj.value="új érték";
alert(obj.value);
</script>

<input type="text" id="akarmi" name="barmi" value="érték">
<script type="text/javascript">
obj=document.getElementById("akarmi");
alert(obj.value);
obj.value="új érték";
alert(obj.value);
</script>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ID

vbence · 2008. Jún. 26. (Cs), 15.29

A getElementById használatához kell egy id attribútum is (a name nem elég).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés