JavaScript DHTML/Javascript Objects/Window Scroll

Материал из Web эксперт
Перейти к: навигация, поиск

Move window by value

   <source lang="html4strict">

<HTML> <HEAD> </HEAD> <BODY> <FORM name="myform"> <INPUT TYPE="button" value="Move Window" onClick="window.moveBy(10,10);">

<INPUT TYPE="button" value="Set a Position" onClick="window.moveTo(240,200);"> <P> <INPUT TYPE="button" value="Close Window" onClick="window.close();"> </FORM> </BODY> </HTML> </source>

Move window to a position

   <source lang="html4strict">

<HTML> <HEAD> </HEAD> <BODY> <FORM name="myform"> <INPUT TYPE="button" value="Move Window" onClick="window.moveBy(10,10);"> <P> <INPUT TYPE="button" value="Set a Position" onClick="window.moveTo(240,200);"> <P> <INPUT TYPE="button" value="Close Window" onClick="window.close();"> </FORM> </BODY> </HTML>

 </source>
   
  


Window "scrollBy()" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript">

   function function1(){
       window.scrollBy(200,200);
   }

</script> <input type="button" value="Scroll by (200,200)" onClick="function1();">

</body> </html>


 </source>
   
  


Window "scroll()" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function1(){

   window.scrollTo(200,200);

} function function2(){

   window.scroll(400,400);

} </script> <input type="button" value="Scroll to (200,200)" onClick="function1();"> <input type="button" value="Scroll(400,400)" onClick="function2();">

</body> </html>


 </source>
   
  


Window "scrollHeight" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function2() {

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth; 

} function function1() {

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop; 

} </script> <p>

  X Coordinate: 
  0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

  <img src="yourimage.gif">

</body> </html>


 </source>
   
  


Window "scrollLeft" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function2() {

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth; 

} function function1() {

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop; 

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

  <img src="yourimage.gif">

</body> </html>


 </source>
   
  


Window "scrollTo()" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function1(){

   window.scrollTo(200,200);

} function function2(){

   window.scroll(400,400);

} </script> <input type="button" value="Scroll to (200,200)" onClick="function1();"> <input type="button" value="Scroll(400,400)" onClick="function2();">

</body> </html>


 </source>
   
  


Window "scrollTop" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function2() {

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth; 

} function function1() {

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop; 

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

</body> </html>


 </source>
   
  


Window "scrollWidth" Example

   <source lang="html4strict">

   

<html> <body> <script language="JavaScript"> function function2() {

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth; 

} function function1() {

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop; 

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

</body> </html>


 </source>