quote:<script type="text/javascript">
function my_moveTo( elmN, y ) {
elm = document.getElementById( elmN )
newY = elm.offsetLeft
if (newY > y) {
newY = newY - 5
elm .style.left = newY
setTimeout( "my_moveTo( '"+elmN+"', "+y+" ) ", 250 )
}
}
function init() {
document.getElementById( 'menu' ).style.left = document.body.clientWidth
my_moveTo( 'menu', 50 )
}
window.onload = init
</script>
<style type="text/css">
DIV#menu {
position: absolute; top: 50px; left: 1000px; width: 250px; border: 1px solid red;
}
</style>
<div id="menu">menu-blah</menu>
ik had inderdaad het vermoeden dat dit met de onload handler moest, echter begrijp ik je script niet helemaal. Waar roep je die functie nu aan? En waar geef ik de uiteindelijke locatie op van de div en waar de start locatie?quote:Op maandag 29 november 2004 15:26 schreef RM-rf het volgende:
je kunt functies gewoon onload aanroepen, het onload-event vind plaats direkt na het inladen van een hele pagina (incl. alle afbeeldingen hierop)
vervolgs kun je een simpel moveBy script aanroepen:
iets als
[..]
Yep, ik zie het. Ik ging uit van van links naar rechts maar jij beweegt van rechts naar links.quote:Op maandag 29 november 2004 15:44 schreef RM-rf het volgende:
het aanroepen van een functie onload kan gewoon door bv <dody onload="functienaam()"> te doen, maar ook in het script zelf door window.onload = functienaam (waarbij je dus geen variabelen door doorgeven, daarom mijn 'init' functie).
verder draait het script er een beetje om dat je via getElementById elementen aanspreekt en hiervan eerst een waarde opvraagt (via object.offsetLeft) en deze vervolgens aanpast wanneer hij groter is dan de variabele y...
hierna roept de functie zichzelf via een Timeout weer aan, via setTimeout(), de functie wordt dus meermaals herhaald zolang de linkerwaarde van het element groter is dan 'y'...
in mn voorbeeldscript-script wordt in de init-functie het menu-element eerst helemaal naar rechtsbzuiten de pagina gezet, waarna de functie my_moveTo het element in stappen van 5 pixels per kwartseconde naar links beweegt.
quote:
<html>
<head>
<title>move.layer</title>
<script type="text/javascript">
function init(){
if(document.getElementById){
obj = document.getElementById("menuDiv");
obj.style.left = 156;
}
}
function slideRight(){
if(document.getElementById){
if(parseInt(obj.style.left) < 255){
obj.style.left = parseInt(obj.style.left) + 10 + "px";
setTimeout("slideRight()",15);
}
}
}
function slideLeft(){
if(document.getElementById){
if(parseInt(obj.style.left) > 156){
obj.style.left = parseInt(obj.style.left) - 10 + "px";
setTimeout("slideLeft()",15);
}
}
}
</script>
<style type="text/css">
#menuDiv{
position:absolute;
left:156px;
top:148px;
width:110px;
text-align:right;
font-family: Arial, verdana, sans;
font-size:8pt;
z-index:2;
filter:alpha(opacity=90);-moz-opacity:0.90;
}
</style>
</head>
<body onLoad="init()" bgcolor="white">
<div id="menuDiv">
<a href="javascript:slideLeft()"><img src="image/left.gif" alt="arrow" border="0"/></a>
<a href="javascript:slideRight()"><img src="image/right.gif" alt="arrow" border="0" /></a>
<div style="position:relative; left:-17px; border-color:black; border-style:solid; border-width:1px 1px 0px 1px; background-color:#B8D3C8;">
<a href="#" onblur="slideLeft()">Wie?</a> </div>
<div style="position:relative; left:-17px; border-color:black; border-style:solid; border-width:1px 1px 0px 1px; background-color:#B8D3C8;">
<a href="#" onblur="slideLeft()">Wat?</a> </div>
<div style="position:relative; left:-17px; border-color:black; border-style:solid; border-width:1px 1px 0px 1px; background-color:#B8D3C8;">
<a href="#" onblur="slideLeft()">Hoe?</a> </div>
<div style="position:relative; left:-17px; border-color:black; border-style:solid; border-width:1px 1px 0px 1px; background-color:#B8D3C8;">
<a href="#" onblur="slideLeft()">Waarom?</a> </div>
<div style="position:relative; left:-17px; border-color:black; border-style:solid; border-width:1px; background-color:#B8D3C8;">
<a href="#" onblur="slideLeft()">Wanneer?</a> </div>
</div>
<div class="menu"><span onmouseover="slideRight()">Menu </span></div>
Wow, dat is best cool, als je dat iin javascript kanquote:Op donderdag 2 december 2004 11:57 schreef daReaper het volgende:
omdat ik zo'n hekel heb aan Flash, heb ik eens aan een vriend laten zien dat je met JavaScript bijna hetzelfde kan: http://80.60.202.155/flashzut/. Na verloop van tijd had ik er geen zin meer in, maar de basis is er
(ik had er destijds echter geen image preloaders ingebouwd, dus missch moet je m 2x kijken voor alles in je cache zit)
quote:
quote:Op donderdag 2 december 2004 15:14 schreef Lucille het volgende:
[..]
Geen idee of ik nu poep praat, maar ik kan me voorstellen dat als er iets niet helemaal juist gaat in het stukje JavaScript, dat een doctype met strict HTML handling dan de code niet uitvoert. Een eerste blik in je code liet niet iets fout zien, maar toen bedacht ik me dus dat het heel misschien noodzakelijk is om een eventhandler netjes af te sluiten met een boolean return value voor de afhandeling van de error status. Dit zou je dus kunnen testen door de boolean mee te geven in de return van de event handler of door de return met boolean achter de aanroep van je event handler te zetten.
quote:
quote:Op donderdag 2 december 2004 15:27 schreef giMoz het volgende:
in je JS ook je
<!-- -->
weghalen.
Da hoeft dus niet.
quote:
Ook je functies een boolean terug laten geven.
dus:
return true;
aan het einde van je functie.
quote:
function init(){
if(document.getElementById){
obj = document.getElementById("menuDiv");
obj.style.left = 156;
return true;
}
}
function slideRight(){
if(document.getElementById){
if(parseInt(obj.style.left) < 255){
obj.style.left = parseInt(obj.style.left) + 10 + "px";
setTimeout("slideRight()",15);
return true;
}
}
}
function slideLeft(){
if(document.getElementById){
if(parseInt(obj.style.left) > 156){
obj.style.left = parseInt(obj.style.left) - 10 + "px";
setTimeout("slideLeft()",15);
return true;
}
}
}
quote:Op donderdag 2 december 2004 15:23 schreef Swetsenegger het volgende:
Nu in dummie taal
Wat moet ik waar mee geven?
quote:Op donderdag 2 december 2004 15:42 schreef Lucille het volgende:
[..]
Op dit moment maak je een eventhandler op deze manier (voorbeeld, geen directe copy):
HTML deel:
onblur="doeJeDing()"
en dan in JS:
function doeJeDing() {
bla bla
return;
}
Ofwel, funcie doeJeDing() geeft geen boolean status terug (alleen een return zonder waarde) aan de eventhandler onblur. Sommige JS functies kunnen daar niet zo goed tegen en willen graag een boolean return zien (return true of return false). Dit kan je dus in de functie doeJeDing() zetten, zodat je in HTML krijgt:
onblur="return doeJeDing();"
wat ook kan is de return in je HTML stukje zetten bij de aanroep van de onblur event handler. Dat kan op twee manieren:
onblur="doeJeDing(); return false;"
Bovenste voorbeeld is het beste want dankan je in je eventhandler zowel true als false doorgeven (waardoor je netjes kan controleren of iets werkt en fouten kan afvangen), de onderste methode forceert een vaste boolean return waarde (in dit geval false), waardoor je nooit helemaal zeker bent van het resultaat in je event functie, maar er wel altijd een goede return waarde uit je eventhandler onblur komt.
Het enige waar ik nu over twijfel is of je bij succes een true of een false moet meegeven.
Ik dacht dus een false, vergelijkbaar met C programma's waarbij een 1 een foutstatus oproept en een 0 foutloos is. Maar pin me er niet op vast.
quote:
function init(){
if(document.getElementById){
obj = document.getElementById("menuDiv");
obj.style.left "156px";
}
}
quote:Op vrijdag 3 december 2004 22:38 schreef Swetsenegger het volgende:
Wederom een vraag over dit scriptje.
In dit scriptje werkt de functie op een divje met als id 'menuDiv'. Op 1 pagina kan ik die dus maar 1 keer toepassen.
Hoe verbouw ik dit nu zo dat ik die slide functie voor meerdere divs kan aanroepen?
quote:Op vrijdag 3 december 2004 23:04 schreef daReaper het volgende:
[..]
function slideRight(obj){
if(document.getElementById){
if(parseInt(obj.style.left) < 255){
obj.style.left = parseInt(obj.style.left) + 10 + "px";
setTimeout("slideRight()",15);
return true;
}
sliderecht aanroepen als:
slideRight(document.getElementById("idvanDiv"));
of als je hem aanroept vanuit het object zelf uit een event:
<div onclick="slideRight(this)">...</div>
(bedoel je dat?)
quote:
function init(name){
if(document.getElementById){
obj = document.getElementById(name);
obj.style.left = "136px";
}
}
<td onmouseover="init('menu1');slideRight()">
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |