[Javascript] voor dummies (deel 8)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_62961935
Idd veldmuis, heerlijke opties
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62964004
Weet iemand trouwens hoe ik in JS het volgende kan doen

ALS iets < 4 OF iets > 16 dan...

want OR blijkt niet te werken

-edit-

Ik moet || gebruiken

[ Bericht 22% gewijzigd door Chandler op 05-11-2008 11:22:54 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63012371
Hoi,

ik wil graag onderling afhankelijke dropdowmenu' s maken.
PHP levert een array met opties. Gelijk het aantal keys/opties wordt een overeenkomstig aantal dropdownmenu's weergegeven.

Ik wil het gebruiken voor een planningsmodule voor een band. Liedjes in volgorde zetten voor een setlijst.
Stel ik heb 10 liedjes. 10 arraykeys met value
PHP/javascript drukt een tabel af met nummers 1 tot en met 10.
Achter ieder nummer komt een dropdown met liedjes.
Selecteer ik bij nummer 1 een liedje, dan dient deze te verdwijnen uit de overige 9 dropdownmenu's. etc.

Ik wil graag weten of deze constructie ergens als codevoorbeeld te vinden is. (Zo ja, waar...?)
Ook zou ik graag willen weten hoe men deze functie noemt. Dan kan ik beter zoeken op het internet. Nu kan ik niets vinden.
Als ik codevoorbeelden heb kom ik er denk ik wel uit. Echt moeilijk is het niet volgens mij. Ik heb echter veel te weinig kaas van javascript gegeten om dit van 0 af op te bouwen.

Iemand aanwijzingen?
pi_63014044
Lijkt me een leuk scriptje om met javascript te beginnen!
op www.w3schools.com vind je een hele hoop tutorials, staat vast wel wat nuttigs tussen!

Ik zou denk ik 2 arrays maken. 1 array voorgedefineerd met alle mogelijke opties.
Array 2 laat je aanmaken in een functie die je aanroept met onchange, en bestaat uit de values van alle selectboxes.

vervolgens vergelijk je de array en geef je de selectboxes die nog geen waarde hebben, de options mee die niet in array 2 voorkomen

Het makkelijkste is denk ik getElementsByTagName('select') als 2e array gebruiken...
pi_63016909
:Is het niet handiger om met 2 lijsten te werken: 1 lijst met beschikbare liedjes, 1 lijst met de selectie. 2 knopjes voor toevoegn en verwijderen, 2 knopjes om te sorteren. Zoals het aanpassen van de toolbar in Explorer bijvoorbeeld werkt.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_63069337
Vraagje,

stel ik wil een divje (400x400) centreren in mijn browser, echter ook als ik naar beneden scroll wil ik dat het divje in het midden van het scherm blijft. Hoe moet ik dit oplossen? ik weet hoe ik een div moet centreren met javascript maar niet als er gescrolled is ?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63069712
Nooit te beroerd om mijn eigen vraag te beanwtoorden ;)
Ik heb het probleem ander sopgelost, heel anders. Ik wilde een array sorteren. Mijn constructie kon wel, maar was niet echt doodsimpel.
Een listbox met een up/down button wel.
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title></title>
<script language="JavaScript" src="http://www.mattkruse.com/javascript/selectbox/compact/selectbox.js"></script>
<script type="text/javascript">
function selectAll(selectBox,selectAll) {
   // have we been passed an ID
   if (typeof selectBox == "string") {
      selectBox = document.getElementById(selectBox);
   }
   // is the select box a multiple select box?
   if (selectBox.type == "select-multiple") {
      for (var i = 0; i < selectBox.options.length; i++) {
         selectBox.options[i].selected = selectAll;
      }
   }
}

var el = function (id) { return document.getElementById(id); }

function go(my)
 {
  var ind = el('select').selectedIndex;
  var L = el('select').options.length;
  el('select').selectedIndex = (my.value=="up" && ind > 0)? ind -1 my.value=="down" && ind < L-1)? ind +1 : (my.value=="to top")? 0 : (my.value=="to bottom")? L-1 : ind;
  var txt = el('select')[el('select').selectedIndex].innerHTML;
  el('select')[el('select').selectedIndex].innerHTML = el('select')[ind].innerHTML;
  el('select')[ind].innerHTML = txt;
 }
</script>
</head>
<body>
<?php
if(isset($_POST))
 {
   print_r($_POST);
 }
?>
<form action="test.php" method="POST">
   <SELECT NAME="updownlist[]" id="updownlist"  SIZE="12" MULTIPLE>
      <OPTION VALUE="Option 1"> Option 1
      <OPTION VALUE="Option 2"> Option 2
      <OPTION VALUE="Option 3"> Option 3
      <OPTION VALUE="Option 4"> Option 4
      <OPTION VALUE="Option 5"> Option 5
      <OPTION VALUE="Option 6"> Option 6
      <OPTION VALUE="Option 7"> Option 7
      <OPTION VALUE="Option 8"> Option 8
      <OPTION VALUE="Option 9"> Option 9
      <OPTION VALUE="Option 10"> Option 10
      <OPTION VALUE="Option 11"> Option 11
      <OPTION VALUE="Option 12"> Option 12
   </SELECT>
   <INPUT TYPE="button" VALUE=" Up " onClick="moveOptionUp(this.form['updownlist'])">
   <INPUT TYPE="button" VALUE="Down" onClick="moveOptionDown(this.form['updownlist'])">
        <br /><input type="submit" name="submit" value="submit" onclick="selectAll('updownlist',true)">
</form>

<br>
</body>
</html>
pi_63090372
quote:
Op zondag 9 november 2008 09:33 schreef Chandler het volgende:
Vraagje,

stel ik wil een divje (400x400) centreren in mijn browser, echter ook als ik naar beneden scroll wil ik dat het divje in het midden van het scherm blijft. Hoe moet ik dit oplossen? ik weet hoe ik een div moet centreren met javascript maar niet als er gescrolled is ?
Ik zou kiezen voor een css-oplossing, met position: fixed;
Maar 'k weet niet in hoeverre dat cross-browser werkt (IE6). Hoewel, je krijgt het geheel dan niet midden in het scherm, maar wel altijd op dezeflde plek in het scherm.
fokstok.nl
pi_63151518
Weet iemand trouwens een scriptje waarmee ik een div precies in het midden van het scherm kan zetten? had 1tje gevonden maar helaas deze werkt niet naar behoren en laat de div niet in het midden zien.

Ook is het mijzelf niet gelukt (moet gebruik maken van margin-left, top: etc)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63154576
quote:
Op woensdag 12 november 2008 @ 10:04 schreef Chandler het volgende:
Weet iemand trouwens een scriptje waarmee ik een div precies in het midden van het scherm kan zetten? had 1tje gevonden maar helaas deze werkt niet naar behoren en laat de div niet in het midden zien.

Ook is het mijzelf niet gelukt (moet gebruik maken van margin-left, top: etc)
breedte is niet zo lastig lijkt me

hoogte:

1
2
3
4
5
6
7		var div = document.getElementById("blaat")
if (window.innerHeight) {var hoogte = window.innerHeight;} // voor firefox
else if (document.body.clientHeight){var hoogte = document.body.clientHeight;} // voor IE
div.height=200; // het is helaas noodzakelijk de hoogte in het DOM te defineren anders pakt'ie m niet
if (((hoogte-div.height)/2) > 0){hoogte=(hoogte-div.height)/2;}
else {hoogte = 0;} // anders verdwijnt je div als je schermhoogte lager dan de div is.
div.style.top=hoogte+"px";



Werkt iig in IE en Fx. Voor IE moet je wel html {height:100%} in je css zetten.
pi_63157662
Ok!, tnx!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63219425
Hallo,

De volgende functie(hieronder) moet het mogelijk maken om door op een knop te klikken, tekst te wijzigen, kleur wijzen en een andere functie aan mn button geven. Dit werkt in FF maar niet in IE, daar wordt de btn.onclick gelijk weer uitgevoerd en krijg ik een memory fout. Je kan geen setAttribute gebruiken voor IE, dit leek mij de enige mogelijkheid.. wat doe ik fout?

AJAX requests worden pas later toegevoegd uiteraard, het gaat alleen ff om dit stukje code..

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
30
31
32
33
34
35
36
37
38
39
40
41
42		function setOff(id, btn)
{
   var spanElement = document.getElementById(id)
   var btn = document.getElementById(btn);
   spanElement.innerHTML = "Uitgeschakeld."
   //IE
   if(navigator.appName == "Microsoft Internet Explorer")
   {
      spanElement.style.color = "red";
      btn.value = "Inschakelen";
      btn.onclick = setOn('berichtverkeer', 'berichtbtn');

   }
   //Overige browsers
   else
   {
      spanElement.setAttribute("style","color:red;");
      btn.setAttribute('onclick',"setOn('berichtverkeer','berichtbtn')");
      btn.value = "Inschakelen";
   }
   
}

function setOn(object, btn)
{
   var spanElement = document.getElementById(object)
   var btn = document.getElementById(btn);
   
   if(navigator.appName == "Microsoft Internet Explorer")
   {
      spanElement.style.color = "green";
      btn.value = "Uitschakelen";
      btn.onclick = setOff('berichtverkeer', 'berichtbtn');
   }
   else
   {
      spanElement.setAttribute("style","color:green;");
      btn.setAttribute('onclick',"setOff('berichtverkeer','berichtbtn')");
      btn.value = "Uitschakelen";
   }
   spanElement.innerHTML = "Ingeschakeld."
}


1
2
3		Berichtverkeer is <span id="berichtverkeer" style="color:green;">Ingeschakeld.</span>
                  <br/>
                  <input type="button" id="berichtbtn" onclick="setOff('berichtverkeer', 'berichtbtn')" value="Uitschakelen">
pi_63220057
Die functies die je voor IE gebruikt zouden het gewoon in alle brouwsers moeten doen hoor.
En volgens mij moet je de functie die je op onclick wilt zetten quoten. Dus:

btn.onclick='setOn(\'berichtverkeer\', \'berichtbtn\')'
pi_63220241
quote:
Op vrijdag 14 november 2008 13:52 schreef mcDavid het volgende:
Die functies die je voor IE gebruikt zouden het gewoon in alle brouwsers moeten doen hoor.
En volgens mij moet je de functie die je op onclick wilt zetten quoten. Dus:

btn.onclick='setOn('berichtverkeer', 'berichtbtn')'
Door het te quoten werkt het helemaal niet meer.. maar ik vind het vreemd dat de onclick ook gelijk wordt uitegevoerd terwijl ik m alleen set.
pi_63220854
Werkt dit?
1object.onclick= function(){ setOn(whatever); }


bron
pi_63221037
quote:
Op vrijdag 14 november 2008 14:23 schreef mcDavid het volgende:
Werkt dit?
[ code verwijderd ]

bron
btn.onclick= function(){ setOn('berichtverkeer', 'berichtbtn'); } werkt!

Ik dank je hartelijk
pi_63243422
ik heb het volgende "probleem":

ik heb een divje (<div id="mainContent">)
en daarin staan diverse <span> elementen..

ik wil d.m.v. 1 onclick event alle span elementen verbergen en vervolgens 1 van die span's tonen (afhankelijk van het argument dat wordt mee gegeven)...
dit moet echter ook goed gaan wanneer alles al verborgen is (bij openen van de pagina)
de span's hebben als id:
vol1_C1
vol1_C2
vol1_C3
vol2_C1
vol2_C2
vol2_C3

etc...

hoe kan ik dat doen?
ik heb het volgende geprobeerd:

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		function hideallids()
{ 
var allspans = mainContent.getElementsByTagName("span");
   for (var i=0;i<allspans.length;i++)
   {
      for (var j=1;j<4;j++)
      {

         document.getElementById("vol" + i + "_C" + j).style.display = 'none';
         document.getElementById("vol" + i + "_C" + j).style.visibility = 'hidden';
      }
   }    
}

function showhide2(id)
{
   if(document.getElementById(id).style.display == 'none' || document.getElementById(id).style.display == '')
   {
      hideallids();
      document.getElementById(id).style.visibility = 'visible';
      document.getElementById(id).style.display = 'block';
   }
   else
   {
      hideallids();
      document.getElementById(id).style.visibility = 'hidden';
      document.getElementById(id).style.display = 'none';
   }
}


maar dat deed het niet (zowel FF als IE)
pi_63246955
Heb je mainContent wel gedefineerd als document.getElementById("mainContent")?

verder is volgens mij die 2e for loop dubbelop. Je kunt gewoon getElementsByTagName("span")[i].style.display='none' gebruiken.

En bovendien is visibility = hidden en display = none ook dubbelop.
Visibility zorgt ervoor dat een element onzichtbaar wordt, maar wel blijft staan;
display = none zorgt ervoor dat een element echt wordt 'weggehaald' (zodat'ie ook geen ruimte meer inneemt).
En tenslotte is een span van zichzelf display="inline" dus het lijkt me verstandig om inline te gebruiken ipv block (tenzij je er een goede reden voor hebt)

-edit-
overigens zijn je huidige for-loops sowieso verkeerd ingericht. Probeer maar eens voor jezelf na te gaan hoe er precies door de loops heengewandeld wordt (beetje lastig om het helemaal uit te leggen). Als je bovenstaande methode zou gebruiken zou het volgens mij wel goed gaan.

[ Bericht 18% gewijzigd door mcDavid op 15-11-2008 17:34:58 ]
pi_63250775
quote:
Op zaterdag 15 november 2008 17:28 schreef mcDavid het volgende:
Heb je mainContent wel gedefineerd als document.getElementById("mainContent")?
-knip-
dat was inderdaad mijn probleem
en die 2de loop is niet dubbelop..

ik heb namelijk in de span 2 variabele nummers:
vol1_C1
het eerste cijfer geeft aan om welk "object" het gaat
en de 2de geeft aan om welk deel het van het "object" gaat
beide zijn variabel, echter heb ik de 2de een vast aantal gegeven... (omdat meer niet nodig is momenteel..)
en aangezien ik de gegevens los van elkaar wil benaderen heb ik deze oplossing bedacht, misschien niet de beste maar het functioneert precies zoals ik wil

ik kan overigens niet de span's aflopen om die per gevonden item te verbergen...
in de spans zitten nog wat spans (puur omdat het a) werkt en b) ik niks anders kon verzinnen )
1
2
3
4
5
6
7
8
9
10
11
12
13
14		function hideallids()
{ 
var element = document.getElementById("mainContent");
var allspans = element.getElementsByTagName("span");
   for (var i=1;i<allspans.length/3;i++)
   {
      for (var j=1;j<4;j++)
      {
         var idname = "vol" + i + "_C" + j;
         document.getElementById(idname).style.display = 'none';
         document.getElementById(idname).style.visibility = 'hidden';
      }
   }    
}
quote:
En bovendien is visibility = hidden en display = none ook dubbelop.
Visibility zorgt ervoor dat een element onzichtbaar wordt, maar wel blijft staan;
display = none zorgt ervoor dat een element echt wordt 'weggehaald' (zodat'ie ook geen ruimte meer inneemt).
En tenslotte is een span van zichzelf display="inline" dus het lijkt me verstandig om inline te gebruiken ipv block (tenzij je er een goede reden voor hebt)

-edit-
overigens zijn je huidige for-loops sowieso verkeerd ingericht. Probeer maar eens voor jezelf na te gaan hoe er precies door de loops heengewandeld wordt (beetje lastig om het helemaal uit te leggen). Als je bovenstaande methode zou gebruiken zou het volgens mij wel goed gaan.
mja die visibility/display is dan idd wel dubbelop... die corrigieer ik nog wel..

en hoe die gedisplayed wordt kan mij niet uitmaken als het werkt (tis niet iets dat aan w3c moet voldoen, het moet goed functioneren.. en dat doet het in zowel IE als FF)
pi_63250930
ah, zo met allspans.length/3 klopt'ie al beter ja. Loopt je script er iig niet op vast. Maar als je functie er idd zo uitziet pakt'ie ze toch allemaal dus kun je net zo goed mijn idee gebruiken.

En echt: display='none' en visibility = 'hidden' is dubbelop!
pi_63250976
quote:
Op zaterdag 15 november 2008 20:19 schreef mcDavid het volgende:
ah, zo met allspans.length/3 klopt'ie al beter ja. Loopt je script er iig niet op vast. Maar als je functie er idd zo uitziet pakt'ie ze toch allemaal dus kun je net zo goed mijn idee gebruiken.

En echt: display='none' en visibility = 'hidden' is dubbelop!
hij pakt nu alleen de span's met een bepaalde ID, de rest laat hij lekker met rust (die IN de span met naam zitten)
pi_63251034
Ah ok. En ja het is ook niet 'fout' om ze display:block te maken, maar het kan in sommige gevallen zijn dat het er dan anders uitziet als origineel. Ligt een beetje aan je verdere opmaak.
pi_63287415
Ik wil iets maken waarin ik onderin een iframe heb met thumbnails, en als je daarop klikt komt er een groot plaatje in het midden. Schets:


Onderin dus een balk met thumbs, en als je aan de rand zit scroll je naar rechts of naar links. Op een klik op een thumb word er een nieuwe foto geladen, met een overgang (fadeinout). Net boven de balk komt een kleine textbalk, waar ik wat tekst wil op pleuren, gelinked per foto. Ik wil het helemaal zelf maken, is een goede oefening. Is dit haalbaar?
Tips?
pi_63288122
Is prima haalbaar. Maar waarom wil je het met een iframe doen? maakt het alleen maar ingewikkeld denk ik.

Je kunt bijv. die grote afbeelding een ID geven, en dan de source wijzigen als je op een thumbnail klikt.
pi_63288482
quote:
Op maandag 17 november 2008 14:17 schreef mcDavid het volgende:
Is prima haalbaar. Maar waarom wil je het met een iframe doen? maakt het alleen maar ingewikkeld denk ik.

Je kunt bijv. die grote afbeelding een ID geven, en dan de source wijzigen als je op een thumbnail klikt.
Ik wil de onderste thumbbar als iframe doen. Of gewoon een ID met overflow scroll? Ik heb niks kunnen vinden btw over het scrollen met je muis aan de rand, kan iemand iets vinden? Ik wil eigenlijk aan de zijkanten nog iets doen met 2 knopjes [<<] img img img img [> >] en dat je scrollt als je op die pijltjes hovert.
pi_63288611
quote:
Op maandag 17 november 2008 @ 14:31 schreef Flaccid het volgende:

[..]

Ik wil de onderste thumbbar als iframe doen. Of gewoon een ID met overflow scroll? Ik heb niks kunnen vinden btw over het scrollen met je muis aan de rand, kan iemand iets vinden? Ik wil eigenlijk aan de zijkanten nog iets doen met 2 knopjes [<<] img img img img [> >] en dat je scrollt als je op die pijltjes hovert.
Ik zou gewoon een div maken met overflow scroll idd.

Verder ja met javascript kun je wel scrollen, dus moet te doen zijn met een hover...
zie bijv. http://www.w3schools.com/(...)_dom_window_scrollby
pi_63318533
Ik probeer de scrollpositie van een iframe [ ] op te halen.

Voor firefox werkt het volgende prima:
1window.frames['page'].window.pageYOffset



IE heeft haar eigen alternatieve methode, maar die blijft maar 0 teruggeven.
1window.frames['page'].document.body.scrollTop


Blijkbaar herkent'ie het wel, anders zou het script vastlopen of undefined teruggeven lijkt me..

Heeft iemand een idee?
pi_63346995
Schop.
pi_63363571
quote:
Op woensdag 19 november 2008 @ 16:40 schreef mschol het volgende:
http://episteme.arstechni(...)27813/m/147000393731 ?
Hmm hoop interessant leesvoer!

Het blijkt idd alleen te werken met IE in quirks mode.

Maarja daar word je ook niet bepaald vrolijk van
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')