[ScrollingPage]

Beispiel ansehen

Ähnlich einem Iframe lassen sich mit diesem Script Inhalte in einen CSS- Layer laden und scrollen. Es lassen sich allerdings keine externen Inhalte laden (siehe hierzu auch LoadHTML)

Der (Original-) Code weicht etwas vom hier dargestellten Beispiel ab.

[zwischen <HEAD> und </HEAD>]

<style type="text/css">
body {width:100%;height:100%;margin:0px;overflow:hidden;}
#links {position:absolute;left:50px;top:50px;}
#up {position:absolute;left:460px;top:50px;}
#down {position:absolute;left:460px;top:320px;}
#cont {position:relative;left:150px;top:50px;width:300px;height:300px;background-color:aqua;overflow:hidden;}
.txt {position:absolute;left:0px;top:0px;width:290px;font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;text-align:justify;padding:5px;visibility:hidden;}
.txt a {font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;color:#ff0000;text-decoration:none;}
.txt a:hover {font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;color:#0000ff;text-decoration:underline;}
</style>

<script language="JavaScript1.2" type="text/javascript">
/**************************************************************
Script made by Martial Boissonneault http://getElementById.com/
This script is provided free to the web development community.
**************************************************************/
timerID = null;
var active = 0;

function ChangePage(num){
    if(document.getElementById){
    obj[active].style.visibility = "hidden"
    active = num
    obj[active].style.top = 0;
    obj[active].style.visibility = "visible"
    }
}

function ScrollUp(speed){
    if(document.getElementById){
    if(parseInt(obj[active].style.top) < 0)
    obj[active].style.top = parseInt(obj[active].style.top) + speed + "px";
    timerID = setTimeout("ScrollUp("+speed+")",30)
    }
}

function ScrollDown(speed){
    if(document.getElementById){
    if(parseInt(obj[active].style.top) >
    document.getElementById('cont').offsetHeight - obj[active].offsetHeight)
    obj[active].style.top = parseInt(obj[active].style.top) - speed + "px";
    timerID = setTimeout("ScrollDown("+speed+")",30)
    }
}

function ScrollStop(){
    if(document.getElementById){
    clearTimeout(timerID);
    }
}

function ScrollPageInit() {
    if(document.getElementById){
    obj = document.getElementById("cont").getElementsByTagName("div");
    obj['page1'].style.visibility = "visible";
    obj['page1'].style.top = 0;
    }
    if(document.addEventListener){
    for(i=0;i<document.getElementsByTagName('a').length;i++)
    document.getElementsByTagName('a')[i].style.position = "relative";
    }
}

onload=ScrollPageInit;
</script>

[zwischen <BODY> und </BODY>]

<div id="links">
    <a href="#" onClick="ChangePage('page1')">Page 1</a><br>
    <a href="#" onClick="ChangePage('page2')">Page 2</a><br>
    <a href="#" onClick="ChangePage('page3')">Page 3</a>
</div>

<div id="up">
    <a href="#" onmouseover="ScrollUp(7)" onmouseout="ScrollStop()">[up]</a>
</div>

<div id="down">
    <a href="#" onmouseover="ScrollDown(7)" onmouseout="ScrollStop()">[dn]</a>
</div>

<div id="cont">
    <div id="page1" class="txt">
    <b>Page 1</b><br>
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    <br><br>
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    <br><br>
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    <br><br>
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    <br><br>
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    This is my page1. This is my page1. This is my page1. This is my page1.
    <a href="javascript:alert('test a:hover link')">test a:hover link</a>
    This is my page1. This is my page1. This is my page1. This is my page1 END.
    </div>


    <div id="page2" class="txt">
    <b>Page 2</b><br>
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    <br><br>
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    <br><br>
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2.
    This is my page2. This is my page2. This is my page2. This is my page2 END.
    </div>


    <div id="page3" class="txt">
    <b>Page 3</b><br>
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    <br><br>
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3..
    This is my page3. This is my page3. This is my page3. This is my page3.
    <br><br>
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3.
    This is my page3. This is my page3. This is my page3. This is my page3 END.
    </div>
</div>

[Autor]

Martial Boissonneault

[Download]

Kopieren Sie bitte den Code


zurück

Copyright © 1998- Nightfire Webworker Archiv Script No: 357