[Javascript] voor dummies - Deel 1

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_24321887
Hier in FF 1.0 werkt het gewoon goed.
Misschien staat er een layer over de link heen ofzo? heb je een online voorbeeldje?
pi_24321925
tvp nog een dummies reeks
pi_24322336
Zie http://www.n321.com/poc.html

Waarom werkt dit allemaal geweldig in Gecko en IE, maar niet in Opera?

1
2
3
4
5
6
7
8
9
10
11		function Add() {
   var optgroup = document.getElementById('optgroup');
   var select = document.getElementById('select');
   element = document.createElement("option");
   element.setAttribute("value", 1);
   element.innerHTML = "Testing";
   optgroup.appendChild(element);
   
   document.getElementById('h').value = optgroup.getElementsByTagName("option").length;
   
}
Waar zijn aanbiedingen?
  FOK!-Schrikkelbaas vrijdag 31 december 2004 @ 16:34:33 #54
1972 Swetsenegger
Egocentrische Narcist
pi_24322556
quote:
Op vrijdag 31 december 2004 16:02 schreef _Jeffrey_ het volgende:
Hier in FF 1.0 werkt het gewoon goed.
Misschien staat er een layer over de link heen ofzo? heb je een online voorbeeldje?
Nee, 't is intranet

Layer, hmz zou kunnen het staat in een container, welke 2 divs bevat, waarvan 1 relative.
Maandag kan ik pas weer kijken ... Ik weet nu in ieder geval dat de javascript goed is
 | FOK! Schrikkelbaasch
pi_24325531
quote:
Op vrijdag 31 december 2004 16:25 schreef Arjan321 het volgende:
Zie http://www.n321.com/poc.html

Waarom werkt dit allemaal geweldig in Gecko en IE, maar niet in Opera?
Het lijkt een Opera bug te zijn. Zelfs als je de innerHTML van het hele select element opvraagt nadat het option element geplaatst is, lijkt het gewoon op de goede plaats in het select element te staan, maar het wordt gewoon niet zichtbaar. Option elementen toevoegen aan het select element werkt wel goed

Je zou een bug report bij Opera in kunnen dienen, misschien dat je daar andere ook mee helpt

Ik dacht het op te kunnen lossen door de innerHTML van het select element te vernieuwen door "select.innerHTML = select.innerHTML" te gebruiken. Maar dat slikt Opera niet (dat gebeuren er hele vage dingen). Soms crash ie zelfs
pi_24325622
Ja, dat heb stiekem al gedaan.. eigelijk verkeerde volgorde....

maar daar ben ik dan wel mooi klaar mee, want dit zou ik toch wel graag even werkende willen hebben in Opera
Waar zijn aanbiedingen?
pi_24325660
Ik vraag me af of je het element kan clonen (cloneNode, zoek maar eens op Google), daarna het oude select element te verwijderen, en de nieuwe te plaatsen. Wel een omweg, maar je moet wat...

[ Bericht 0% gewijzigd door _Jeffrey_ op 31-12-2004 20:04:11 ]
pi_24326030
Hè, helemaal geweldig! Dan pikt ie um wel!

De code voor de mensen die dit toch nooit zullen tegenkomen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		function Add() {
   var optgroup = document.getElementById('optgroup');
   var select = document.getElementById('select');
   var container = document.getElementById('containeri');
   element = document.createElement("option");
   element.setAttribute("value", 1);
   element.innerHTML = "Testing";
   optgroup.appendChild(element);
   
   if (window.opera) {
      clone = select.cloneNode(true);
      container.removeChild(select);
      container.appendChild(clone);
   }
}
Waar zijn aanbiedingen?
  FOK!-Schrikkelbaas donderdag 13 januari 2005 @ 17:08:05 #59
1972 Swetsenegger
Egocentrische Narcist
pi_24548646
Is er een javascript equivalent van php's htmlentities?
 | FOK! Schrikkelbaasch
pi_24549163
quote:
Op donderdag 13 januari 2005 17:08 schreef Swetsenegger het volgende:
Is er een javascript equivalent van php's htmlentities?
je kunt wel een script maken dat alle tekst-waardes omzet naar hun hex-karakter (via de Stringmethode.toString(16))
1<&bléüh>

wordt dan
1 <&bléüh>


dmv code als bv:
1
2
3
4
5
6
7
8
9
10
11		var my_variabele = '<&bléüh>'
var string_output=''   
var temp_var   
for( var i=0; i < my_variabele.length; i++ )
{
   temp_var = my_variabele.charAt( i );
   temp_var = temp_var.charCodeAt(0);
   temp_var = '&#'+ temp_var.toString(16) + ';'
   string_output += temp_var;
}
return string_output


Maar dat kan ook een onpraktische situatie zijn, als het voor een CMS is, is het eerder aan te raden om sowieso alle input via html_entities te laten gaan en gebruikers te verbieden zelf direkt html in te voeren, hooguit misschien bepaalde standaard-waardes er voorheen uit te filteren, daarmee behoud je een betere controle over de input van gebruikers
(juist binnen een CMS is het een zeker risico om mensen volledig het recht te geven direkt HTML in te voeren)

[ Bericht 2% gewijzigd door RM-rf op 13-01-2005 18:02:51 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  FOK!-Schrikkelbaas donderdag 13 januari 2005 @ 18:46:04 #61
1972 Swetsenegger
Egocentrische Narcist
pi_24550177
quote:
Op donderdag 13 januari 2005 17:47 schreef RM-rf het volgende:

[..]

je kunt wel een script maken dat alle tekst-waardes omzet naar hun hex-karakter (via de Stringmethode.toString(16))
[ code verwijderd ]

wordt dan
[ code verwijderd ]

dmv code als bv:
[ code verwijderd ]

Maar dat kan ook een onpraktische situatie zijn, als het voor een CMS is, is het eerder aan te raden om sowieso alle input via html_entities te laten gaan en gebruikers te verbieden zelf direkt html in te voeren, hooguit misschien bepaalde standaard-waardes er voorheen uit te filteren, daarmee behoud je een betere controle over de input van gebruikers
(juist binnen een CMS is het een zeker risico om mensen volledig het recht te geven direkt HTML in te voeren)
helaas is het een embedded systeem waarbij er geen ruimte is voor php of ander serverside oplossingen. Alleen client side scripting.

Het betreft ook geen invoer, maar een fixed tekst van ongeveer 400 regels. Dus zet ik nu maar handmatig alle ö, ü, è, î, ñ om naar de entity waarden ... voor elke taal
 | FOK! Schrikkelbaasch
pi_24572513
vraagje aan de JS experts:
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		function cloack(waarde)
{
 if(waarde == "yes")
    {
      document.getElementById('layer1').style.visibility = 'hidden';
      document.getElementById('layer1').style.display = 'None';
      document.getElementById('layer2').style.visibility = 'visible';
      document.getElementById('layer2').style.display = 'Block';
      document.getElementById('command').style.display = 'None';
   }
 else if(waarde == "no")
    {
      document.getElementById('layer2').style.visibility = 'hidden';
      document.getElementById('layer2').style.display = 'None';
      document.getElementById('layer1').style.visibility = 'visible';
      document.getElementById('layer1').style.display = 'Block';
      document.getElementById('command').style.display = 'None';
   }
 else
    {
      document.getElementById('layer2').style.visibility = 'hidden';
      document.getElementById('layer2').style.display = 'None';
      document.getElementById('layer1').style.visibility = 'hidden';
      document.getElementById('layer1').style.display = 'None';
      document.getElementById('command').style.display = 'None';
   }
}


is er een manier om dit efficienter te doen??? of niet?
ik gebruik een if, else if, else script omdat ik in de dropdown box 3 waardes heb: ja, nee en blank (de standaard waarde)
pi_24581753
- dubbel -
Trotse poster van het 37000000ste bericht ^O^
pi_24581792
quote:
Op vrijdag 14 januari 2005 23:39 schreef mschol het volgende:
vraagje aan de JS experts:
[ code verwijderd ]

is er een manier om dit efficienter te doen??? of niet?
ik gebruik een if, else if, else script omdat ik in de dropdown box 3 waardes heb: ja, nee en blank (de standaard waarde)
1
2
3
4
5
6
7		function cloack(waarde) {
document.getElementById("layer1").style.visibility = waarde == "yes" ? 'visible' : "hidden";
document.getElementById("layer1").style.display = waarde == "yes" ? 'block' : "none";
document.getElementById("layer2").style.visibility = waarde == "no" ? 'visible' : "hidden";
document.getElementById("layer2").style.display = waarde == "no" ? 'block' : "none";
document.getElementById('command').style.display = 'None';
}


probeer het zo eens (niet getest)
Trotse poster van het 37000000ste bericht ^O^
pi_24583736
Een element met display=none wordt niet gerenderd. Het heeft dus geen zin om het daarna nog op visiblity=hidden te zetten.
En cloak is zonder ck.

1
2
3
4
5		function cloak(waarde) {
   document.getElementById('layer1').style.display = waarde == 'yes' ? 'block' : 'none';
   document.getElementById('layer2').style.display = waarde == 'no' ? 'block' : 'none';
   document.getElementById('command').style.display = 'none';
}
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24671098
1
2
3
4
5
6
7		<input type="checkbox" name="en_aanvang" checked 
onClick="Toggle('agenda_nieuw_aanvang')"> Aanvang: <input type="text" 
name="agenda_nieuw_aanvang" maxlength="10"> uur<br/>

<input type="checkbox" name="en_prijs" checked 
onClick="Toggle('agenda_nieuw_prijs')"> Prijs: ¤<input type="text" 
name="agenda_nieuw_prijs" maxlength="5"><br/>


Ugh, mijn schrale beetje javascriptkennis laat me weer in de steek. Wat ik wil is op zich niet zo moeilijk leek me. Als op de checkboxen 'en_aanvang' of 'en_prijs' geklikt wordt, wordt respectievelijk 'agenda_nieuw_aanvang' disabled/enabled, of 'agenda_nieuw_prijs' disabled/enabled. Ik heb echter meerdere pogingen gedaan om de "Toggle"-functie te schrijven, maar ik kom er niet uit. En het moet zo makkelijk zijn. Kan iemand me even uit de brand helpen?

Dit werkt iig niet
1
2
3
4
5
6
7
8
9		<script language="Javascript">
function Toggle(elID) {
   if(document.getElementById(elID).style.disabled == true) {
      document.getElementById(elID).style.disabled = false;
   } else {
      document.getElementById(elID).style.disabled = true;
   }
}
</script>
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_24671666
Disabled is niet een eigenschap van style, dus style weghalen en eht zal werken
1document.getElementById(elID).disabled
Waar zijn aanbiedingen?
pi_24671681
quote:
Op vrijdag 21 januari 2005 16:32 schreef Heliospan het volgende:

[ code verwijderd ]

Ugh, mijn schrale beetje javascriptkennis laat me weer in de steek. Wat ik wil is op zich niet zo moeilijk leek me. Als op de checkboxen 'en_aanvang' of 'en_prijs' geklikt wordt, wordt respectievelijk 'agenda_nieuw_aanvang' disabled/enabled, of 'agenda_nieuw_prijs' disabled/enabled. Ik heb echter meerdere pogingen gedaan om de "Toggle"-functie te schrijven, maar ik kom er niet uit. En het moet zo makkelijk zijn. Kan iemand me even uit de brand helpen?

Dit werkt iig niet
[ code verwijderd ]
1
2
3		<script language="Javascript">
document.getElementById(elID).disabled = document.getElementById(elID).disabled == true ? false : true;
</script>


Volgens mij is "disabled" geen CSS property, maar hoort het bij het element direct. Probeer het zo eens (niet getest)
Trotse poster van het 37000000ste bericht ^O^
pi_24671843
Ach, ik ben zo achterlijk af en toe Bedankt beide!
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_24672492
Om nog even verder te borduren op hetzelfde probleem:
1
2
3
4
5
6
7
8
9		function Toggle(elID) {
   if(document.getElementById(elID).disabled == true) {
      document.getElementById(elID).disabled = false;
     document.getElementById(elID).style.backgroundColor = "#ffffff";
   } else {
      document.getElementById(elID).disabled = true;
     document.getElementById(elID).style.backgroundColor = "#aaaaaa";
   } 
}


Dit werkt prima in IE. Maar in Firefox gebeurt er helemaal niets, niet disabled en geen andere achtergrondkleur. Werkt Firefox niet met getElementById ofzo?
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_24673630
Wat voor element probeer je te disabelen? Volgens de specs van W3C kan dat alleen bij: BUTTON, INPUT, OPTGROUP, OPTION, SELECT en TEXTAREA.

Jouw code werkt bij mij in FF prima met een input text element. Maar zo zou ik 't doen (wat overzichtelijker, makkelijker te debuggen en uit te breiden)
1
2
3
4
5
6
7
8
9
10
11		function Toggle(id) {
   var el = document.getElementById(id);
   if (!el) return;
   if (el.disabled) {
      el.disabled = false;
      el.style.backgroundColor = '#fff';
   } else {
      el.disabled = true;
      el.style.backgroundColor = '#aaa';
   }
}
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24673851
Ik probeer een input-veld te disabelen... Ik heb hem hier online staan: http://dev.chillosophy.nl/sites/jaydee.net/?type=agenda

Ik zie vast iets over het hoofd

-edit-
Sjongejonge. GetElementByID... Internet Explorer had het fout moeten weergeven, omdat ik alleen een name="bladiebla" had, maar dat wordt in IE ook geaccepteerd als ID blijkbaar. Maar goed, id="bladiebla" toegevoegd en het werkt
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_24674393
Moet wel even zeggen dat FireFox een prachtige javascript console heeft, die, zolang je niets al te vreemd doet, een foutmelding geeft wat er fout gaat in het script (Tools -> Javascript Console)
Waar zijn aanbiedingen?
pi_24674623
quote:
Op vrijdag 21 januari 2005 19:41 schreef Arjan321 het volgende:
Moet wel even zeggen dat FireFox een prachtige javascript console heeft, die, zolang je niets al te vreemd doet, een foutmelding geeft wat er fout gaat in het script (Tools -> Javascript Console)
Inderdaad een stuk duidelijker dan "Object Expected", wat IE 9 op de 10x zegt

Javascript Console zit overigens niet bij de minimale installatie, let daar even op.

[ Bericht 1% gewijzigd door daReaper op 21-01-2005 19:58:53 ]
Trotse poster van het 37000000ste bericht ^O^
pi_24675208
Daar hoort natuurlijk ook de Webdeveloper Toolbar bij
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies - Deel 1
Index

» digital corner

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