[Javascript] voor dummies (deel 8)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_65377671
quote:
Op zondag 25 januari 2009 08:09 schreef Light het volgende:
Kun je die code niet beter tussen [ code] en [ /code] zetten? Wordt'ie veel beter leesbaar van.
Veranderd, tag stond niet goed..
pi_65377796
Die spoiler om de code mag wel weg hoor, tenzij je denkt dat de code zo slecht is dat je er anderen mee afschrikt.
Overigens denk ik niet dat het een javascriptprobleem is; die paar regels javascript in de code zien er wel goed uit.
fokstok.nl
pi_65395466
Ik heb een gallery met een lightbox gemaakt... om direct naar een foto te kunnen linken plaats ik met javascript het nummer van desbetreffende foto achter de hash in de url. In firefox werkt dat, maar IE7 geeft een maffe foutmelding als je zo'n url opent! Iemand enig idee hoe dat komt?

gallery: http://hockeyfeesthoevelaken.nl/fotoboek.php
deeplink naar foto: http://hockeyfeesthoevelaken.nl/fotoboek.php?page=0#0 (deze geeft dus de foutmelding in IE7)

verantwoordelijke stukje script:

1
2
3
4
5
6
7
8		if (location.hash) //checken of hash bestaat
   {
   var x = location.hash.slice(1); //nummer eruit knippen
   if (document.getElementById("img" + x )){
      var y = document.getElementById("img" + x ).name; //bijbehorende fotonaam uit de DOM halen
      openPic(y,x); //lightbox openen met (fotonaam,fotonummer)
   }
}


//edit:
nog wat extra info:
- het bovenstaande script wordt wel gewoon geheel uitgevoerd, maar daarna geeft'ie de melding :
quote:
de website http://enz. kan niet worden geopend.
de bewerking is afgebroken


[ Bericht 4% gewijzigd door mcDavid op 25-01-2009 19:44:33 ]
pi_65395982
quote:
Op zondag 25 januari 2009 19:35 schreef mcDavid het volgende:
Ik heb een gallery met een lightbox gemaakt... om direct naar een foto te kunnen linken plaats ik met javascript het nummer van desbetreffende foto achter de hash in de url. In firefox werkt dat, maar IE7 geeft een maffe foutmelding als je zo'n url opent! Iemand enig idee hoe dat komt?

gallery: http://hockeyfeesthoevelaken.nl/fotoboek.php
deeplink naar foto: http://hockeyfeesthoevelaken.nl/fotoboek.php?page=0#0 (deze geeft dus de foutmelding in IE7)

verantwoordelijke stukje script:
[ code verwijderd ]

//edit:
nog wat extra info:
- het bovenstaande script wordt wel gewoon geheel uitgevoerd, maar daarna geeft'ie de melding :
[..]
Op Experts Exchange lees ik iets dat de JavaScript code eerder wordt uitgevoerd dan de pagina wordt gerendered en bepaalde dingen dus nog niet beschikbaar zijn voor IE. Een oplossing zou zijn je JavaScript code een paar milliseconden te laten wachten.

Zie: http://www.experts-exchan(...)ript/Q_23514976.html Alleen kan ik die pagina niet goed lezen, omdat je lid moet zijn enzo.
pi_65396660
Dat helpt inderdaad! Dankjewel!

-edit-
vervolgvraag:
als iemand weet waarom die 'volgende' knop niet verschijnt als hij de lightbox via de hash opent... mag diegene het zeggen
pi_65406647
Aan het onload event van het document hangen, is dat niet een stuk praktischer
pi_65418160
zo heb ik het nu idd. Zelfde effect maar dan zonder de halve seconde vertraging
  maandag 26 januari 2009 @ 14:21:20 #208
75592 GlowMouse
l'état, c'est moi
pi_65419287
quote:
Op zondag 25 januari 2009 19:49 schreef HuHu het volgende:

[..]

Zie: http://www.experts-exchan(...)ript/Q_23514976.html Alleen kan ik die pagina niet goed lezen, omdat je lid moet zijn enzo.
Zorgen dat Google in je referer staat en dan flink scrollen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14		<html>
<script type="text/javascript">
   document.cookie = "divBottom";
 
   function test()
   {
      window.location.hash = '#' + document.cookie;
   }
</script>
<body onload="test()">
   <div id="divTop" style="height:1000">Top</div>
   <div id="divBottom">Bottom</div>
</body>
</html>
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_65419320
quote:
Op maandag 26 januari 2009 14:21 schreef GlowMouse het volgende:

[..]

Zorgen dat Google in je referer staat en dan flink scrollen.
[ code verwijderd ]
Ik gebruik geen Firefox . Maar ik laad de pagina altijd in de Google Cache, dat werkt ook.
pi_65432797
Ik heb een div die na een tijd getoond word door een simpele select element by id dmv een onclick. En dan display:inline oid. Nu komt ie wel tevoorschijn, maar kan dit misschien iets smoother? Met een fade of met het lightbox resize dingetje?
pi_65492881
Weet iemand hoe je snel een selectbox kunt dupliceren middels javascript? ik heb gezocht maar niet gevonden.

dus gewoon simpel gezegd in 1x de gehele inhoud van een selectbox kopieren van de ene naar de ander that's all.. nu dacht ik zelf aan een functie die alle items doorloopt maar lijkt het mij handiger als dit in 1x gedaan zou kunnen worden..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65493065
quote:
Op woensdag 28 januari 2009 14:41 schreef Chandler het volgende:
Weet iemand hoe je snel een selectbox kunt dupliceren middels javascript? ik heb gezocht maar niet gevonden.

dus gewoon simpel gezegd in 1x de gehele inhoud van een selectbox kopieren van de ene naar de ander that's all.. nu dacht ik zelf aan een functie die alle items doorloopt maar lijkt het mij handiger als dit in 1x gedaan zou kunnen worden..
Middels cloneNode() de selectbox kopiëren en ergens anders weer aan hangen?
pi_65495160
Idd, gewoon clonen. Kun je als het nodig is voor je script daarna simpelweg de name veranderen ofzo.
pi_65496367
idd maar hoe doe ik dat dan? de naam van het element veranderen (ik heb niet zoveel kaas gegeten van deze functies).

Functie tips?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65496465
Uit m'n hoofd iets wat lijkt op dit:

1
2
3
4		a = document.getElementById('a');
b = a.cloneNode(true);

document.getElementById('andere_node').appendChild(b);
pi_65509035
met setAttribute() moet je een eind komen
pi_65509717
quote:
Op woensdag 28 januari 2009 22:04 schreef Roy_T het volgende:
met setAttribute() moet je een eind komen
Als het enigsins mogelijk is kan je beter gewoon de property gebruiken in plaats van setAttribute. Dat levert cross-browser veel minder problemen op.

Dus
1
2
3
4		var field = document.getElementById('mySelect');
var fieldCopy = field.cloneNode(true);
fieldCopy.name = 'copy';
container.appendChild(fieldCopy);


Wel ff opletten dat er in IE een bug zit waardoor zo'n nieuw form wel niet aan de form.elements array wordt toegevoegd.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_65617740
Op de frontpage en kpnvandaag.nl kun je de blokjes verplaatsen. Ik heb binnen een <div> drie andere blokjes (divs) staan, die ik op die manier verticaal verplaatsbaar zou willen maken. Is hier een standaard scriptje voor?

Volgens mij heb je hier javascript voor nodig
pi_65618118
quote:
Op zondag 1 februari 2009 11:40 schreef veldmuis het volgende:
http://demos111.mootools.net/DragDrop
Bedankt voor de link, dit zit al mooi in de richting

Maar ik snap niet zoveel van dat script, met dat script kun je toch alleen maar blokjes groter maken?
pi_65620506
quote:
Op zondag 1 februari 2009 11:46 schreef hello_moto1992 het volgende:

[..]

Bedankt voor de link, dit zit al mooi in de richting

Maar ik snap niet zoveel van dat script, met dat script kun je toch alleen maar blokjes groter maken?
Nee, dat script maakt blokjes groter, als voorbeeld. Dan zie je duidelijk wat er gebeurt. Je zou ook de kleur kunnen aanpassen. Of iets anders, maar dat moet je dan wel zelf schrijven.
fokstok.nl
pi_65622354
Je kunt ook even zoeken of jquery een drag&drop-iets heeft. jquery is ook een mooie library.
Oh, en je hebt ook nog prototype, die heeft vast ook wel zoiets.

Ik zou iig voor een library gaan, zelf schrijven kost véél meer tijd.
pi_65750563
ik heb iets geks..
twee snippets code die WEL werken onder safari, konqueror, opera, internet explorer, (firefox onder windows en opensuse) maar niet onder firefox onder ubuntu 8.10

Iemand een suggestie?

hier de code voor een menu met alternerende images (mouseover)
het probleem is dat het laatste item onder ff onder ubuntu helemaal niet te zien

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29		<script type="text/javascript" >
//<![CDATA[

<!-- Begin

image1 = new Image();
image1.src = "images/homeo.png" alt="home";

image2 = new Image();
image2.src = "images/onso.png" alt="overons";

image3 = new Image();
image3.src = "images/jelleo.png" alt="jelle";

image4 = new Image();
image4.src = "images/paulo.png" alt="paul";

image5 = new Image();
image5.src = "images/agendao.png" alt="agenda";

image6 = new Image();
image6.src = "images/fotoso.png" alt="foto";

image7 = new Image();
image7.src = "images/contacto.png" alt="contact";

// End -->
//]]>
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		 <div id="menu">
    <a href="./index.php?action=home" onmouseover="image1.src='images/homeo.png';"
onmouseout="image1.src='images/home.png';">
<img name="image1" src="images/home.png" alt="home" border="0"/></a>
        <a href="./index.php?action=info" onmouseover="image2.src='images/onso.png';"
onmouseout="image2.src='images/ons.png';">
<img name="image2" src="images/ons.png" alt="overons" border="0"/></a>
            <a href="./index.php?action=jelle" onmouseover="image3.src='images/jelleo.png';"
onmouseout="image3.src='images/jelle.png';">
<img name="image3" src="images/jelle.png" alt="jelle" border="0"/></a>
               <a href="./index.php?action=paul" onmouseover="image4.src='images/paulo.png';"
onmouseout="image4.src='images/paul.png';">
<img name="image4" src="images/paul.png" alt="paul" border="0"/></a>
               <a href="./index.php?action=agenda" onmouseover="image5.src='images/agendao.png';"
onmouseout="image5.src='images/agenda.png';">
<img name="image5" src="images/agenda.png" alt="agenda" border="0"/></a>
                 <a href="./index.php?action=foto" onmouseover="image6.src='images/fotoso.png';"
onmouseout="image6.src='images/fotos.png';">
<img name="image6" src="images/fotos.png" alt="foto" border="0"/></a>
                  <a href="./index.php?action=contact" onmouseover="image7.src='images/contacto.png';"
onmouseout="image7.src='images/contact.png';">
<img name="image7" src="images/contact.png" alt="contact" border="0"/></a>
    </div>


als ik echt blind ben.. laat het me maar weten
pi_65750718
Heb je niet een eenvoudigere testcase? En wat is werkt er dan niet? Staat 't misschien ergens online zodat 't makkelijker te testen is?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_65751041
En waarom gebruik je het attribuut name bij de img-tag? Je kunt beter "id" gebruiken. En je kunt ook met a:hover {} dingen veranderen, dan hoef je geen javascript te gebruiken. Maar dat gaat niet werken met img-afbeeldingen, dan moet je overschakelen naar achtergrondafbeeldingen.
fokstok.nl
pi_65751259
zoals ik al post is " het werkt niet" dat in ff onder ubuntu 8.04 het laatste item niet laat zien.. En volgens mij is de testcase redelijk eenvoudig ivm de herhaling (alleen de oplopende nummering en de filenames zijn anders
pi_65751436
quote:
Op woensdag 4 februari 2009 23:12 schreef SuperRembo het volgende:
Heb je niet een eenvoudigere testcase? En wat is werkt er dan niet? Staat 't misschien ergens online zodat 't makkelijker te testen is?
het probleem is dat ik het als screendump heb gekregen en later zelf heb ondervonden onder suse doet 'ie het wel
pi_65751621
quote:
Op woensdag 4 februari 2009 23:34 schreef ds-polleke het volgende:

[..]

het probleem is dat ik het als screendump heb gekregen en later zelf heb ondervonden onder suse doet 'ie het wel
Als je het als screendump hebt gekregen, staat die site vast ook ergens online. Da's makkelijker meekijken.
fokstok.nl
pi_65752144
Het probleem zit 'm in de mix van vreselijk ouderwetse code en zogenaamd moderne xhtml. Het verbaasd me eigenlijk dat die regels als 'image1.src = "images/homeo.png" alt="home";' niet meer javascriptfouten opleveren.

Ouderwetse code past dan wel weer goed bij de inhoud van de site.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_65752308
Ik heb hetzelfde probleem hier (Firefox 3, Gentoo Linux). Als ik de css aanpas zodat #menu drie pixels breder wordt, dan past het wel. Maar de opbouw van het menu (en de site) is niet echt handig, ik kan bijvoorbeeld niet vinden hoe de afstand tussen de menuplaatjes wordt bepaald (en of het dus altijd op 3 pixels hangt of ook wel eens op 4 of 5 of 10).
fokstok.nl
pi_65752548
dat stukje hopeloos ouderwetse code is geschreven door mijn vormgever..

Ik ga eens stechelen met mijn vormgevert of dit niet anders kan..

nu nog checken of het met 10 pixels meer in #menu op de meeste systemen genoeg is..
pi_65752654
oh ja.. thx for the help
pi_65752956
quote:
Op donderdag 5 februari 2009 00:10 schreef ds-polleke het volgende:
dat stukje hopeloos ouderwetse code is geschreven door mijn vormgever..
Dan moet die zich eens laten bijscholen
quote:
Ik ga eens stechelen met mijn vormgevert of dit niet anders kan..
Genoeg mogelijkheden. Het menu kun je als een unordered list maken, dan kun je ook precies aangeven wat de afstand tussen de elementen moet zijn. En met achtergrondplaatjes bij de linkjes heb je geen javascript nodig.

Oh, de negatieve margins zijn ook al niet handig/nodig. Met een goede opzet heb je die niet/nauwelijks nodig.
quote:
nu nog checken of het met 10 pixels meer in #menu op de meeste systemen genoeg is..
Ik denk het wel, maar een andere opzet van #menu is beter.

1
2
3
4
5		<ul id="menu">
<li><a href="home.html" id="home">Home</a></li>
<li><a href="overons.html" id="overons">Over ons</a></li>
...
</ul>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		#menu {
  width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu li {
  width: 100px;
  margin: 0;
  padding: 0;
}
#menu li a {
  text-indent: -999em;
  display: block;
}
#menu #home {
  background: url(images/home.jpg);
}
#menu #home:hover {
  background: url(images/home_over.jpg);
}


Dat lijkt me wel genoeg als voorbeeld
fokstok.nl
pi_65753107
toch wel leuk dat ik in mijn "oude" setup ik een <ul> gebruikte

Ik ga hier eens (offline) mee spelen

nogmaals bedankt en welterusten
pi_65756170
Oh, er ontbreken nog wel dingen in die css. Maar daar mag je zelf mee gaan stoeien.
fokstok.nl
pi_65760661
quote:
Op zondag 1 februari 2009 13:56 schreef veldmuis het volgende:
Je kunt ook even zoeken of jquery een drag&drop-iets heeft. jquery is ook een mooie library.
Oh, en je hebt ook nog prototype, die heeft vast ook wel zoiets.
Het zit standaard in jQuery UI, en als je Prototype gebruikt kun je Scriptaculous gebruiken. Eigenlijk iedere library heeft wel drag & drop functionaliteit.
quote:
Ik zou iig voor een library gaan, zelf schrijven kost véél meer tijd.
Amen. Als het al lukt als beginner.
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 11:53:02 #238
1972 Swetsenegger
Egocentrische Narcist
pi_65943875
Korte vraag,

kan ik een functie aanroepen met een array.

dus:
1onload="parseXML('vendor_name','device_name','product_code','wan_uptime')"


Want mijn functie geeft terug dat i undefined is:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25		function parseXML(values)
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }
xmlDoc.async=false;
xmlDoc.load(communication_file);
for ( var i in values )
   {
      document.getElementByIdi.innerHTML=xmlDoc.getElementsByTagNamei[0].childNodes[0].nodeValue;
   }
}
 | FOK! Schrikkelbaasch
pi_65944264
Korte suggestie: gebruik de XMLHttpRequest. Ik heb dat stukje script wat jij daar hebt ook gebruikt, en Chrome en ik mee Safari snappen dat niet.
pi_65944368
Werkt dit niet:

1parseXML(new Array('vendor_name','device_name','product_code','wan_uptime'))
pi_65944426
quote:
Op woensdag 11 februari 2009 11:53 schreef Swetsenegger het volgende:

kan ik een functie aanroepen met een array.
Moet je er wel een array in stoppen, dus:
1onload="parseXML(['vendor_name','device_name','product_code','wan_uptime'])"
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 12:39:47 #242
1972 Swetsenegger
Egocentrische Narcist
pi_65945262
Ik heb het opgelost met split
En ik gebruik het nu in Safari (op windows) Veldmuis. Zal zo even met chrome testen.

De volgende stap wordt schrijven naar xml vanuit clientside. Daar zal ik denk ik sowieso met ajax calls moeten gaan werken denk ik.
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 12:47:53 #243
1972 Swetsenegger
Egocentrische Narcist
pi_65945519
Chrome heeft inderdaad geen xml parser, wat een gezeik.
-edit- Safari inderdaad ook niet, bleek in firefox aan het testen te zijn

Nou ja.... xmlhttprequest dan maar.
 | FOK! Schrikkelbaasch
pi_65945564
Dit is een prima vervanging:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		var xml=null;
function loadXMLDoc(){

   if (window.XMLHttpRequest) {
      xml=new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      xml=new ActiveXObject("Microsoft.XMLHTTP");
   }

   if (xml!=null) {
      xml.open("GET",xmlPath,false);
      xml.send(null);
      xml = xml.responseXML;
   }
}
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 12:52:38 #245
1972 Swetsenegger
Egocentrische Narcist
pi_65945651
xmlPath is de file neem ik aan?
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 12:57:39 #246
1972 Swetsenegger
Egocentrische Narcist
pi_65945824
werkt, thanks.
Nu schrijven
 | FOK! Schrikkelbaasch
  woensdag 11 februari 2009 @ 13:03:04 #247
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_65946008
Ik heb icm met AJAX een aantal kolomen zoals in dit voorbeeld:



De gebruiker kan al op een interactive manier de kolomen verplaatsen etc, maar nu zou het mooi zijn
als het ook mogelijk is om de kolom breedte aan te kunnen passen, door te slepen.

Heb het vaker gezien, dus het zou mogelijk moeten zijn. Iemand een idee hoe te doen??
  FOK!-Schrikkelbaas woensdag 11 februari 2009 @ 13:12:20 #248
1972 Swetsenegger
Egocentrische Narcist
pi_65946320
quote:
Op woensdag 11 februari 2009 13:03 schreef Likkende_Lassie het volgende:
Ik heb icm met AJAX een aantal kolomen zoals in dit voorbeeld:

[ afbeelding ]

De gebruiker kan al op een interactive manier de kolomen verplaatsen etc, maar nu zou het mooi zijn
als het ook mogelijk is om de kolom breedte aan te kunnen passen, door te slepen.

Heb het vaker gezien, dus het zou mogelijk moeten zijn. Iemand een idee hoe te doen??
kijk eens naar een framework zoals mootools bijvoorbeeld: http://demos111.mootools.net/Resizable
 | FOK! Schrikkelbaasch
pi_65946561
Of Prototype/Scriptaculous, of jQuery, of ... Whatever floats your boat
  woensdag 11 februari 2009 @ 13:56:15 #250
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_65947745
Ik moet de waarde vervolgens wel weer in PHP zien te krijgen
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies (deel 8)
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')