DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Na php voor dummies wordt het nu tijd voor javascript voor dummies.
Ik ben een absolute leek met javascript, ik jat af en toe wat scripts en snap dan net genoeg om het met wat aanpassingen te kunnen gebruiken, maar wat meer kennis zou makkelijk zijn.
Wat ik wil. Ik wil tijdens het laden van een pagina, sommige elementen (div's) iets later dan de container background div het scherm in schuiven.
Dus het menu (bv) zie je de pagina inscrollen)
Iemand hints en tips om dit te realiseren? Met welke eventhandler pak ik dit aan en is het uberhaupt mogelijk?
[ Bericht 0% gewijzigd door Swetsenegger op 29-11-2004 14:52:28 ]
Ik ben een absolute leek met javascript, ik jat af en toe wat scripts en snap dan net genoeg om het met wat aanpassingen te kunnen gebruiken, maar wat meer kennis zou makkelijk zijn.
Wat ik wil. Ik wil tijdens het laden van een pagina, sommige elementen (div's) iets later dan de container background div het scherm in schuiven.
Dus het menu (bv) zie je de pagina inscrollen)
Iemand hints en tips om dit te realiseren? Met welke eventhandler pak ik dit aan en is het uberhaupt mogelijk?
[ Bericht 0% gewijzigd door Swetsenegger op 29-11-2004 14:52:28 ]
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
vervolgs kun je een simpel moveBy script aanroepen:
iets als
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>
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
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
[..]
(ja ik ben echt een noob )
)Met andere woorden, om er voor te zorgen dat ik er wat van leer en de javascript behndigden niet continue blijf lastig vallen met "*zucht*... lees de fucking manual"-vragen... Kan je het even regel voor regel uitleggen wat je doet?
Thanks
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.
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.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
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.
De functie roep je aan zodra het document geopend wordt (window.onload) toch?
Waneer ik er nu voor wil zorgen dat je de container div al ziet en pas na een kleine pauze het element het scherm in gescrolled wordt, kan ik dit bereiken door de functie met een onload in de div zelf aan te roepen? Ik realiseer me dat dit maar een minimale pauze oplevert tov jou onload, maar het gaat me erom of ik een onload functie overal kan gebruiken zeg maar.
waarom werkt dit niet in firefox zodra ik er een doctype bovenzet (en wel in IE)
Dit werkt dus in zowel IE als FF. Zet ik er een doctype boven (1.0 transitional) werkt het nog steeds in IE, maar in FF (1.0) werkt de onmouseover en <a href="javascript:slideLeft()"><img src="image/left.gif" alt="arrow" border="0"/></a> niet meer
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>
Dit werkt dus in zowel IE als FF. Zet ik er een doctype boven (1.0 transitional) werkt het nog steeds in IE, maar in FF (1.0) werkt de onmouseover en <a href="javascript:slideLeft()"><img src="image/left.gif" alt="arrow" border="0"/></a> niet meer
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)
(ik had er destijds echter geen image preloaders ingebouwd, dus missch moet je m 2x kijken voor alles in je cache zit)
Trotse poster van het 37000000ste bericht ^O^
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)
"Dat is echt ontzettend zielig" ©
ter verduidelijking:
http://www.123swets.com/xploise/test.php (met doctype)
http://www.123swets.com/xploise/test2.php (zonder doctype)
http://www.123swets.com/xploise/test.php (met doctype)
http://www.123swets.com/xploise/test2.php (zonder doctype)
quote:
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.
Beter een baas onder je duim, dan tien bovenop
Trekt bij warm weer een poncho aan
Trekt bij warm weer een poncho aan
Geeft ie errors? Of helemaal nix..
Het probleem van virussen spy- en adware is niet de browser maar bevind zich tussen toetsenbord en rugleuning.....
www.zoekopdekaart.nl
www.zoekopdekaart.nl
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.
Nu in dummie taal
Wat moet ik waar mee geven?
quote:
In de console van FF kom ik geen enkele fout tegen
in je JS ook je
<!-- -->
weghalen.
Da hoeft dus niet.
Ook je functies een boolean terug laten geven.
dus:
return true;
aan het einde van je functie.
<!-- -->
weghalen.
Da hoeft dus niet.
Ook je functies een boolean terug laten geven.
dus:
return true;
aan het einde van je functie.
Het probleem van virussen spy- en adware is niet de browser maar bevind zich tussen toetsenbord en rugleuning.....
www.zoekopdekaart.nl
www.zoekopdekaart.nl
quote:Op donderdag 2 december 2004 15:27 schreef giMoz het volgende:
in je JS ook je
<!-- -->
weghalen.
Da hoeft dus niet.
Die had ik later toegevoegd om te zien of dat verschil maakte, zal ze weer weghalen.
quote:
Ook je functies een boolean terug laten geven.
dus:
return true;
aan het einde van je functie.
Dus het wordt dit:
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;
}
}
}
?
of moet die return voor de laatste }
quote:Op donderdag 2 december 2004 15:23 schreef Swetsenegger het volgende:
Nu in dummie taal
Wat moet ik waar mee geven?
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.
Beter een baas onder je duim, dan tien bovenop
Trekt bij warm weer een poncho aan
Trekt bij warm weer een poncho aan
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.
O...kee. Ik denk dat ik begrijp wat je bedoelt, maar waar moet ik die return nu concreet in mijn script zetten? En moet ik dan nog wat aanpassen aan het HTML deel?
Ik zie dat je in je JS functies slideLeft() en slideRight() al een return true hebt staan, dus nu moet je nog bij het aanroepen van die functies de return zetten:
onblur="return slideLeft();"
Idem voor de slideRight() functie aanroep. Ik weet dus, zoals gezegd, alleen niet of je functies dus een return true; of een return false; moeten meegeven voor het juiste resultaat. Disclaimer: ik weet zelfs niet of dit je probleem gaat oplossen.
onblur="return slideLeft();"
Idem voor de slideRight() functie aanroep. Ik weet dus, zoals gezegd, alleen niet of je functies dus een return true; of een return false; moeten meegeven voor het juiste resultaat. Disclaimer: ik weet zelfs niet of dit je probleem gaat oplossen.
Beter een baas onder je duim, dan tien bovenop
Trekt bij warm weer een poncho aan
Trekt bij warm weer een poncho aan
tot mijn grote spijt moet ik bekenen dat een tweaker het opgelost heeft:
kortom, bij de init 'px' toevoegen aan de value
quote:
function init(){
if(document.getElementById){
obj = document.getElementById("menuDiv");
obj.style.left "156px";
}
}
kortom, bij de init 'px' toevoegen aan de value
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?
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 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?
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?)
Trotse poster van het 37000000ste bericht ^O^
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?)
Thanks, ik had 'm al met logisch nadenken en googlen:
quote:
function init(name){
if(document.getElementById){
obj = document.getElementById(name);
obj.style.left = "136px";
}
}
<td onmouseover="init('menu1');slideRight()">
[ Bericht 27% gewijzigd door Swetsenegger op 03-12-2004 23:22:54 ]
Heeft iemand een javascript waarmee je de hoogte van het browsercanvas achterhaalt?
(dus niet scherm resolutie, maar daadwerkelijk de hoogte in pixels van het content gedeelte van het broser scherm?
(dus niet scherm resolutie, maar daadwerkelijk de hoogte in pixels van het content gedeelte van het broser scherm?
-edit: gevonden!-
Werkt vrij cross-browser meen ik
var width = window.innerWidth;
if (!width)
width = document.body.clientWidth;
var height = window.innerHeight;
if (!height)
height = document.body.clientHeight;
[ Bericht 41% gewijzigd door daReaper op 06-12-2004 17:37:52 ]
Werkt vrij cross-browser meen ik
var width = window.innerWidth;
if (!width)
width = document.body.clientWidth;
var height = window.innerHeight;
if (!height)
height = document.body.clientHeight;
[ Bericht 41% gewijzigd door daReaper op 06-12-2004 17:37:52 ]
Trotse poster van het 37000000ste bericht ^O^
