[Javascript] voor dummies (deel 6)

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_50985079
quote:
Op vrijdag 29 juni 2007 21:11 schreef SuperRembo het volgende:
Als je een aantal keer de length property van een element wil opvragen dan kan je wel het element zelf in een variable zetten. Dat scheelt een heleboel opzoekwerk in de DOM.

Maar volgens mij is er geen enkel html element die standard een length property heeft
document.getElementById("div").elements.length? Of bedoel je dat niet?
pi_50985434
Alleen een form element heeft een elements property, een div niet. Tenzij je die er zelf op zet natuurlijk.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_51176658
Ik wil dmv javascript een aantal punten op een plaatje kunnen aangeven en later deze of via een form of via xml opslaan in een mysql database.
De punten moeten ook nog verplaatst en verwijderd kunnen worden.

Ik kan me herinneren dat ik in een van de javascript voor dummies range een script daarvoor gezien heb, maar kan deze niet meer vinden.

Wie weet waar ik die kan vinden ?
  zaterdag 14 juli 2007 @ 16:27:46 #94
136730 PiRANiA
All thinking men are atheists.
pi_51463448
Ik heb een aantal <inputs> die ik gebruik als array.
Nou wil ik een knop om inputs er bij te doen.

Ik gebruik nu deze:

1
2
3
4
5
6
7
8		<script type="text/javascript">
<!--
function add()
{
   document.getElementById('cijferinvoer').innerHTML=document.getElementById('cijferinvoer').innerHTML + '<tr><th>CC</th><td><input type="text" name="cijfer[]" AUTOCOMPLETE="of"></td><td><input type="text" name="weging[]" AUTOCOMPLETE="of"></td>';
}
//-->
</script>


echter worden de ingevulde vakjes verwijderd als ik dit gebruik.
Is er een andere manier?
Dag Google!
  zaterdag 14 juli 2007 @ 16:45:32 #95
136730 PiRANiA
All thinking men are atheists.
pi_51463968
oftewel: hoe voeg ik extra content toe aan een pagina zonder dat de input values verwijnen?

www.wrts.nl gebruikt het ook:
http://www.wrts.nl/lijst/create
Dag Google!
pi_51464911
De makkelijkste en netste oplossing is niet het toevoegen via JS en innerHTML, maar dmv een div met style "display: none;" die je mbv javascript op "display: block;" zet. Zo zal de state van je form gewoon behouden blijven en hoef je ook geen html in je JS code op te nemen (want dat is :r).

Voorbeeldje:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<script type="text/javascript">

function showExtraContent() {
   var extraContent = document.getElementById('extraContent');
   extraContent.style.display = 'block';
}

</script>

<p>
standaard content bla bla bla</p>

<div id="extraContent" style="display: none;">
   bla bla bla extra content bla bla
</div>

<a href="#" onclick="showExtraContent(); return false;">klik voor extra content</a>
  zaterdag 14 juli 2007 @ 17:25:50 #97
136730 PiRANiA
All thinking men are atheists.
pi_51465111
quote:
Op zaterdag 14 juli 2007 17:19 schreef Farenji het volgende:
De makkelijkste en netste oplossing is niet het toevoegen via JS en innerHTML, maar dmv een div met style "display: none;" die je mbv javascript op "display: block;" zet. Zo zal de state van je form gewoon behouden blijven en hoef je ook geen html in je JS code op te nemen (want dat is ).

Voorbeeldje:


[ code verwijderd ]
maar dan kunnen er niet meerdere rijen toegevoegd worden.
Dag Google!
  zaterdag 14 juli 2007 @ 17:27:57 #98
136730 PiRANiA
All thinking men are atheists.
pi_51465184
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		function add()
{
   var tbody = document.getElementById
('cijferinvoer').getElementsByTagName("tbody")[0];
    var row = document.createElement("tr")
    var th1 = document.createElement("th")
    th1.appendChild(document.createTextNode("CC"))
   var td1 = document.createElement("td")
   var a = '<input type="text" name="var1[]" AUTOCOMPLETE="off">'
    td1.appendChild(document.createTextNode(a))
    var td2 = document.createElement("td")
    td2.appendChild (document.createTextNode('<input type="text" name="var2[]" AUTOCOMPLETE="off">'))
    row.appendChild(th1);
    row.appendChild(td1);
   row.appendChild(td2);
    tbody.appendChild(row);


deze gebruik ik nu.
Alles lukt, alleen komt er niet de inputbox die ik wil in de nieuwe TD's, maar gewoon tekst:
quote:
CC <input type="text" name="var1[]" AUTOCOMPLETE="off"> <input type="text" name="var1" AUTOCOMPLETE="off">
Dag Google!
  zaterdag 14 juli 2007 @ 17:30:09 #99
136730 PiRANiA
All thinking men are atheists.
pi_51465241
1
2		  var a = '<input type="text" name="var1[]" AUTOCOMPLETE="off">'
    td1.appendChild(document.createTextNode(a))


Hoe maak ik dus in plaats van createTextNode: createHTMLNode oid...

bestaat dat? of moet het anders?
Dag Google!
pi_51465264
Of je gebruikt DOM functies om nieuwe html elementen toe te voegen.

Als je een willekeurig aantal regel toe wil kunnen voegen dan kom je er niet met een verborgen divje.

Het zal ook al schelen als je geen fouten maakt in de html die je toe voegt. Er ontbreekt een sluittag voor de tr, en autocomplete op "off" zetten (niet "of").
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_51465299
WTF is dat AUTOCOMPLETE=off? Dat is sowieso geen geldige opmaak. Het zal een of andere custom toevoeging zijn voor een of ander script maar het zal hoogstwaarschijnlijk de reden zijn waarom je zo'n node niet mbv DOM kan aanmaken.
pi_51465451
Autocomplete is gewoon een attribute om te voorkomen dat je browser de waarde van het veld automatisch aanvult.
Het probleem is dat je natuurlijk niet met createTextNode en een html string een invoerveld kan maken. Dat moet je ook via createElement doen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zaterdag 14 juli 2007 @ 18:01:12 #103
136730 PiRANiA
All thinking men are atheists.
pi_51466132
quote:
Op zaterdag 14 juli 2007 17:32 schreef Farenji het volgende:
WTF is dat AUTOCOMPLETE=off? Dat is sowieso geen geldige opmaak. Het zal een of andere custom toevoeging zijn voor een of ander script maar het zal hoogstwaarschijnlijk de reden zijn waarom je zo'n node niet mbv DOM kan aanmaken.
http://www.w3.org/Submission/web-forms2/#the-autocomplete
Dag Google!
  zaterdag 14 juli 2007 @ 18:01:43 #104
136730 PiRANiA
All thinking men are atheists.
pi_51466142
quote:
Op zaterdag 14 juli 2007 17:37 schreef SuperRembo het volgende:
Autocomplete is gewoon een attribute om te voorkomen dat je browser de waarde van het veld automatisch aanvult.
Het probleem is dat je natuurlijk niet met createTextNode en een html string een invoerveld kan maken. Dat moet je ook via createElement doen.
createElement, ga ik proberen...
Dag Google!
  dinsdag 17 juli 2007 @ 20:27:24 #105
71919 wonderer
Hung like a My Little Pony
pi_51570472
1
2
3
4
5
6
7
8
9
10
11
12
13
14		  function resize_images()
  {
    for (i = 0; i < document.images.length; i++)
    {
      while ( !document.images[i].complete )
      {
        break;
      }
      if ( document.images[i].width > 640 )
      {
        document.images[i].width = 640;
      }
    }
  }


Ik wil ervoor zorgen dat ie alleen images binnen een bepaalde div kleiner maakt, kan dat, als die div een ID heeft? Ik ben niet zo'n held met de volgorde in dat soort dingen :@
"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."
pi_51571680
Zoiets?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		function resize_images()
  {
   img=document.getElementById("id").getElementsByTagName("img");
   
    for (i = 0; i < img.length; i++)
    {
      while ( !img[i].complete )
      {
        break;
      }
      if ( img[i].width > 640 )
      {
        img[i].width = 640;
      }
    }
  }
pi_51620768
als javascript nono zie ik geen ander keus dan me te wenden tot de experts hier...

ik zoek nameljik een tool die mij kan helpen met het zichtbaar maken van een foto plus informatietext wanneer je over een naam gaat met de muis. Ik heb al een script gevonden maar dat is hogere school werk, iets wat mij dus telang gaat duren.

Om een duidelijk beeld te geven zoek ik het volgende:

de gebruiker gaat met de muis over en/of klikt op de naam die er staat. op dat moment komt er een popup scherm naar voren waar een foto instaat en wat begeleidende informatie (mogelijk ook een clickable url als dat mogelijk is) . zoals ik al zei is mijn kennis wat betreft java echt minimaal dus zoek of een goede script die gebruksvriendelijk is OF iemand die tijd over heeft en me kan helpen om iig een begin te maken met dit alles..
Hooray for boobies!
  donderdag 19 juli 2007 @ 15:38:10 #108
71919 wonderer
Hung like a My Little Pony
pi_51628850
Zoiets heb ik wel es gemaakt en het kan in principe op twee manieren:

-je laadt alle foto's en informatie al op je pagina, maar in een divje met display:none; Met een mouseover of onclick verander je de style van dat divje dan naar zichtbaar (met een paar extra attributen zoals positie en grootte)

-Je maakt een aparte pagina die de betreffende foto zou laden (zoals je zou doen als je die pagina met de foto in een nieuw venster zou openen), gebruikt hetzelfde zichtbaar/onzichtbaar principe, maar bij onclick/mouseover maak je het divje niet alleen zichtbaar, je laadt via AJAX die pagina erin.

Geen van beide vergt heel veel codeerwerk en ik wil best wat posten. Kan alleen niet garanderen dat het perfect is dus als er een expert naar wil kijken voor je het gebruikt zou dat denk ik wel handig zijn
"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."
pi_51628936
elke hulp is welkom.. om het wat duidelijker te maken, het geheel moet komen in een geeklog cms systeem, de site vind je onder mijn profiel, kan bijna niet missen!
Hooray for boobies!
pi_51635206
quote:
Op donderdag 19 juli 2007 15:40 schreef Spockjuh_ het volgende:
elke hulp is welkom.. om het wat duidelijker te maken, het geheel moet komen in een geeklog cms systeem, de site vind je onder mijn profiel, kan bijna niet missen!
quote:
Not Found
The requested URL /suspended.page/ was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
pi_51637665
ja klopt, ben bezig met de server op dit moment. wellicht niet het meeste geschikte tijdstip, ik weet het..
Hooray for boobies!
pi_51650753
Hoi,

wat nou als ik mijn hele (dynamische) pagina af wil laten hangen van een afbeelding qua dimensies. Dus aan de hand van de breedte worden de div's opgebouwd (aan de hand van het HTML DOM object).

Ja, dan doen we dus,
1
2
3
4		var plaatje = new Image();
plaatje.src = 'blaat.gif';
var breedte = plaatje.width;
var hoogte = plaatje.height;


Dit werkt in IE en Opera. In Firefox gaat het alles door elkaar omdat de gegevens op 0 staan. Vervolgens ververs ik de pagina in Firefox en alles staat goed.

Dan proberen we,
1
2
3
4
5		var plaatje = document.createElement('img');
plaatje.setAttribute('src', 'plaatje.gif');
eenDiv.appendChild(plaatje);
var breedte = plaatje.width;
var hoogte = plaatje.height;


Werkt wederom perfect in IE en Opera, Firefox zet alles weer op 0. Na een verversing is alles weer ok.

Misschien dan wachten tot het plaatje klaar is met laden
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		var startTijd = new Date();
var metError = false;
var plaatje = new Image();
plaatje.src = 'plaatje.gif';
plaatje.onLoad = plaatjeGeladen;

function plaatjeGeladen()
{
  var timeOut;
  var plaatjeCompleetGeladen = false;

  while (!plaatjeCompleetGeladen) {
    timeOut = new Date();

    if (plaatje.complete) {
      plaatjeCompleetGeladen = true;
      metError = false;
    }

    // timeout op laten treden na 10s
    if (timeOut.getTime() - startTijd.getTime() >= 10000) {
      plaatjeCompleetGeladen = true;
      metError = true;
    }
  }
}

var breedte = plaatje.width;
var hoogte = plaatje.height;


Mooi toch, met timeout voor afbeeldingen die echt niet gevonden kunnen worden, om niet in een oneindige loop te blijven hangen...

Maarrrr, dit werkt alleen echt goed in Opera... Serverside afbeeldingen geprobeerd, clientside, het werkt NIET.

Suggesties, iemand?
pi_51650957
Wat doen clientHeight en offsetHeight bij je?
pi_51651431
De onload event op plaatjes is in IE en FF geloof ik nog all buggy. Kijk eens naar de user_images() functie die hier op FOK (en op GoT) wordt gebruikt om te grootte plaatjes automatisch te verkleinen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_51653321
quote:
Op vrijdag 20 juli 2007 08:56 schreef Geqxon het volgende:
Wat doen clientHeight en offsetHeight bij je?
Hetzelfde als height en width?
Helpt mij ook verder niet echt vrees ik :(
quote:
Op vrijdag 20 juli 2007 09:21 schreef SuperRembo het volgende:
De onload event op plaatjes is in IE en FF geloof ik nog all buggy. Kijk eens naar de user_images() functie die hier op FOK (en op GoT) wordt gebruikt om te grootte plaatjes automatisch te verkleinen.
Tja, nu weet ik dat de browsers de volgende dingen ondersteunen:

Firefox: image.complete, image.width, image.naturalWidth
Opera: image.complete, image.width
IE: image.width

Allemaal dus image.width.

Dan doe ik het volgende:
1
2
3
4
5		...
if (image.width > 0) {
  blaat();
}
...

(in een while-lus)

werkt prima in IE en Opera. Niet in Firefox.

Ik ga nog even een en ander proberen met clientWidth, offsetWidth en naturalWidth om er zeker van te zijn dat echt alle mogelijke opties daar mee heb geprobeerd ;)
pi_51653484
IE:
1
2
3
4		achtergrond.clientWidth: 0
achtergrond.offsetWidth: 0
achtergrond.naturalWidth: undefined
achtergrond.width: 550


Opera:
1
2
3
4		achtergrond.clientWidth: 0
achtergrond.offsetWidth: 0
achtergrond.naturalWidth: undefined
achtergrond.width: 550


Firefox:
1
2
3
4		achtergrond.clientWidth: 0
achtergrond.offsetWidth: 0
achtergrond.naturalWidth: 0
achtergrond.width: 0


Firefox NA verversen pagina:
1
2
3
4		achtergrond.clientWidth: 0
achtergrond.offsetWidth: 0
achtergrond.naturalWidth: 550
achtergrond.width: 550


Deze waardes krijg ik dus in alle browsers met var blaat = new Image EN var blaat = document.createElement('img')!!!!

[ Bericht 6% gewijzigd door CiQNiZ op 20-07-2007 10:47:15 ]
pi_51654299
quote:
Op vrijdag 20 juli 2007 10:36 schreef CiQNiZ het volgende:
werkt prima in IE en Opera. Niet in Firefox.
Dat komt waarschijnlijk omdat je de property opvraagt als het plaatje noet niet (volledig) is geladen. Hoe je dat afvangt kan je dus even van die user_images() functie afkijken.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_51654467
quote:
Op vrijdag 20 juli 2007 11:07 schreef SuperRembo het volgende:

[..]

Dat komt waarschijnlijk omdat je de property opvraagt als het plaatje noet niet (volledig) is geladen. Hoe je dat afvangt kan je dus even van die user_images() functie afkijken.
Ik vraag de properties op TOTdat deze geset zijn. Dus dat houdt in dat ik wacht tot het plaatje geladen is (via een while-lus). Na 4 seconden zeg ik stop (duurt te lang, want het is lokaal), en dan heeft Firefox nog niks bijzonders gedaan. IE en Opera die komen niet eens zover, die zijn dan al lang klaar!
pi_51657618
quote:
Op vrijdag 20 juli 2007 11:12 schreef CiQNiZ het volgende:

[..]

Ik vraag de properties op TOTdat deze geset zijn. Dus dat houdt in dat ik wacht tot het plaatje geladen is (via een while-lus). Na 4 seconden zeg ik stop (duurt te lang, want het is lokaal), en dan heeft Firefox nog niks bijzonders gedaan. IE en Opera die komen niet eens zover, die zijn dan al lang klaar!
Dat komt omdat er tijdens de while loop geen events worden afgehandeld. Waarschijnlijk staat op deze maniet de cpuload nog op 100% ook. Als je wil kijken of het plaatje na x seconden nog niet geladen is dan kan je beter setTimeout() gebruiken.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_51714889


[ Bericht 100% gewijzigd door Spockjuh_ op 22-07-2007 12:51:30 (dubbel..) ]
Hooray for boobies!
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies (deel 6)
Index

» digital corner

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