[Javascript] voor dummies (deel 8)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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
pi_63404596
Ik kom niet uit dat scrollen van een iframe (of id). Ik wil dat met 2 hovers kunnen doen.

1
2		<a href="#" onmouseover="javascript:scroll_iframe('test',10,'v');">Test</a>
<iframe src="test.htm" height="250px" widht="100px" id="test" name="test" ></iframe>


Dit werkt alleen niet.

[ Bericht 74% gewijzigd door Flaccid op 21-11-2008 14:49:47 ]
pi_63405321
quote:
Op vrijdag 21 november 2008 @ 14:25 schreef Flaccid het volgende:
Ik kom niet uit dat scrollen van een iframe (of id). Ik wil dat met 2 hovers kunnen doen.
maak 3 functies, functie 1: timer, functie 2: scrollBy() functie 3: kill timer

onmouseover doe je functie 1,
onmouseout doe je functie 3.

de timer in functie 1 laat je bijv. iedere 100 ms functie 2 uitvoeren
functie 2 laat je iedere keer bijv. 3 pixels scrollen.
pi_63405515
http://www.java2s.com/Cod(...)ollwhenmouseover.htm is dit niet te gebruiken?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63406517
quote:
Op vrijdag 21 november 2008 14:57 schreef Chandler het volgende:
http://www.java2s.com/Cod(...)ollwhenmouseover.htm is dit niet te gebruiken?
Ik denk het wel, maar ik wil eerst kijken of ik het zelf kan.
quote:
Op vrijdag 21 november 2008 14:50 schreef mcDavid het volgende:

[..]

maak 3 functies, functie 1: timer, functie 2: scrollBy() functie 3: kill timer

onmouseover doe je functie 1,
onmouseout doe je functie 3.

de timer in functie 1 laat je bijv. iedere 100 ms functie 2 uitvoeren
functie 2 laat je iedere keer bijv. 3 pixels scrollen.
Even scrollby ding opzoeken
pi_63412782
Ik kom erachter dat dat scrollby niet voor een iframe is. Kan ik niet gewoon een marquee gebruiken?
pi_63459076
Hallo mensen,

Ik ben al een tijdje aan het klooien met het volgende: Ik probeer drie keer een cross fade effect te creëren met JS, dit lukt wel voor één array plaatjes. Maar de volgende twee willen niet lukken. Ik heb zitten kijken maar het komt omdat het script onder andere alleen de CSS id pakt en niet de class. Omdat getElementById bestaat, maar niet voor class...

Het huidige resultaat is hier te zien. De bedoeling is dat de eerste twee arrays hetzelfde als de derde array.

Mijn JS:
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		window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
   if(!d.getElementById || !d.createElement)return;

   css = d.createElement("link");
   css.setAttribute("href","./css/default.css");
   css.setAttribute("rel","stylesheet");
   css.setAttribute("type","text/css");
   d.getElementsByTagName("head")[0].appendChild(css);

   imgs = d.getElementById("fade-one").getElementsByTagName("img");
   for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
   imgs[0].style.display = "block";
   imgs[0].xOpacity = .99;
   
   setTimeout(so_xfade,1000);
}

function so_xfade()
{
   cOpacity = imgs[current].xOpacity;
   nIndex = imgs[current+1]?current+1:0;

   nOpacity = imgs[nIndex].xOpacity;
   
   cOpacity-=.05; 
   nOpacity+=.05;
   
   imgs[nIndex].style.display = "block";
   imgs[current].xOpacity = cOpacity;
   imgs[nIndex].xOpacity = nOpacity;
   
   setOpacity(imgs[current]); 
   setOpacity(imgs[nIndex]);
   
   if(cOpacity<=0)
   {
      imgs[current].style.display = "none";
      current = nIndex;
      setTimeout(so_xfade,1000);
   } 
   else 
   {
      setTimeout(so_xfade,50);
   }
   
   function setOpacity(obj) 
   {
      if(obj.xOpacity>.99) 
      {
         obj.xOpacity = .99;
         return;
      }
      obj.style.opacity = obj.xOpacity;
      obj.style.MozOpacity = obj.xOpacity;
      obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
   }
}


En mijn HTML:
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		<table id="home">
   <tr>
      <td>
         <div id="fade-one">
            <img src="image/1105969.jpg" alt="" />
            <img src="image/1189632.jpg" alt="" />
            <img src="image/1421495.jpg" alt="" />
            <img src="image/1901696.jpg" alt="" />
            <img src="image/2416070.jpg" alt="" />
            <img src="image/3253313.jpg" alt="" />
            <img src="image/3763733.jpg" alt="" />
         </div>
      </td>
      <td class="seperator"></td>
      <td>
         <div id="fade-two">
            <img src="image/3827955.jpg" alt="" />
            <img src="image/3990747.jpg" alt="" />
            <img src="image/4294622.jpg" alt="" />
            <img src="image/5387336.jpg" alt="" />
            <img src="image/5458789.jpg" alt="" />
            <img src="image/5641430.jpg" alt="" />
            <img src="image/5685370.jpg" alt="" />
         </div>
      </td>
      <td class="seperator"></td>
      <td>
         <div id="fade-three">
            <img src="image/5814188.jpg" alt="" />
            <img src="image/5825672.jpg" alt="" />
            <img src="image/5933698.jpg" alt="" />
            <img src="image/6592410.jpg" alt="" />
            <img src="image/7008812.jpg" alt="" />
            <img src="image/7116237.jpg" alt="" />
         </div>
      </td>
   </tr>
</table>


Iemand die weet hoe ik voor alle drie de arrays werkend kan krijgen?
Aan dit bericht kunnen geen rechten worden ontleend.
pi_63461815
1
2
3
4
5
6		   imgs = d.getElementById("fade-one").getElementsByTagName("img");
   for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
   imgs[0].style.display = "block";
   imgs[0].xOpacity = .99;
   
   setTimeout(so_xfade,1000);


dat stukje 3x uitvoeren, en imgs niet global declareren maar meegeven in de functie.
pi_63465644
quote:
Op zondag 23 november 2008 21:51 schreef mcDavid het volgende:

[ code verwijderd ]

dat stukje 3x uitvoeren, en imgs niet global declareren maar meegeven in de functie.
Ik ben echt een totale noob op het gebied van JS, zou je het misschien meer in jip-en-janneke taal kunnen uitleggen ? Ik zou echt niet weten hoe ik jou tips zou moeten verwerken...
Aan dit bericht kunnen geen rechten worden ontleend.
pi_63568027
Ik zit met het volgende, voor mijn statistieken script heb ik het volgende stukje javascript geschreven:

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
64
65
66
67
68
69
70
71
72		function gfxS_browserPlugins()
{
    str = "";
    var done = new Array();

    for (var i = 0; i < navigator.plugins.length; i++) 
    {
        if (!done[navigator.plugins[i].name])
        {
            done[navigator.plugins[i].name] = 1;
            str += escape(navigator.plugins[i].name) + ",";
        }
    }

    return str;
}

function gfxS_jsVersion()
{
    js_ver = '0';
    ar = new Array("1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "1.9", "2.0");

    for (x = 0; x < ar.length; x++)
    {
        document.write('<' + 'script language="Javascript' + ar[x] + '">');
        document.write('js_ver = "' + ar[x] + '";');
        document.write('<' + '/script>');
    }

    return js_ver;
}

function gfxS_checkCookie()
{
    // create a fake cookie
    document.cookie = "testcookie=true";

    if (document.cookie.indexOf('testcookie') == -1)
    {
        return 0;
    }
    else
    {
        return 1;
    }
}

var count_res              = new Array();
count_res['language']      = navigator.language? navigator.language : navigator.userLanguage;
count_res['colordepth']    = (navigator.appName.indexOf("Microsoft") > -1) ? screen.colorDepth : screen.pixelDepth; 
count_res['screenwidth']   = screen.width;
count_res['screenheight']  = screen.height;
count_res['referer']       = (document.referrer && document.referrer != "" && document.referer != 'undefined' && document.referrer != null) ? escape(document.referrer) : '';
count_res['is_java']       = (navigator.javaEnabled() == 1) ? 1 : 0;
count_res['is_font']       = (window.screen.fontSmoothingEnabled == true) ? 1 : 0;
count_res['is_cookie']     = gfxS_checkCookie();
count_res['js_version']    = gfxS_jsVersion();
count_res['plugins']       = gfxS_browserPlugins();

// do code

var str = '';
var d = '';
for (var d in count_res)
{
    if (count_res[d] != '')
    {
        str += "&" + d + "=" + count_res[d];
    }
}

document.write('<img src="http://www.mijndomein.nl/count/<?php echo $_GET['id']; ?>.png?cache=false' + str + '" ALT="statistics"');


Als ik dit gebruik op een domein met de volgende externe librarys

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

dan krijg ik een fout

1http://www.mijndomein.nl/count/7zR13Li2.png?cache=false&lastIndexOf=function(item, i) {  i = isNaNi ? this.length : (i < 0 ? this.length + i : i) + 1;  var n = this.slice(0, i).reverse().indexOf(item);  return (n < 0) ? n : i - n - 1;}&indexOf=function(item, i) {  i || (i = 0);  var length = this.length;  if (i < 0) i = length + i;  for (; i < length; i++)    if (this[i] === item) return i;  return -1;}&toJSON=function() {    var results = [];    this.each(function(object) {      var value = Object.toJSON(object);      if (!Object.isUndefined(value)) results.push(value);    });    return '[' + results.join(', ') + ']';  }&clone=function() {    return [].concat(this);  }&intersect=function(array) {    return this.uniq().findAll(function(item) {      return array.detect(function(value) { return item === value });    });  }&uniq=function(sorted) {    return this.inject([], function(array, value, index) {      if (0 == index || (sorted ? array.last() != value : !array.include(value)))        array.push(value);      return array;    });  }&reduce=function() {    return this.length > 1 ? this : this[0];  }&without=function() {    var values = $A(arguments);    return this.select(function(value) {      return !values.include(value);    });  }&flatten=function() {    return this.inject([], function(array, value) {      return array.concat(Object.isArray(value) ?        value.flatten() : [value]);    });  }&compact=function() {    return this.select(function(value) {      return value != null;    });  }&last=function() {    return this[this.length - 1];  }&first=function() {    return this[0];  }&clear=function() {    this.length = 0;    return this;  }&_each=function(iterator) {    for (var i = 0, length = this.length; i < length; i++)      iterator(this[i]);  }&_reverse=function reverse() {    [native code]}&some=function(iterator, context) {    iterator = iterator ? iterator.bind(context) : Prototype.K;    var result = false;    this.each(function(value, index) {      if (result = !!iterator(value, index))        throw $break;    });    return result;  }&every=function(iterator, context) {    iterator = iterator ? iterator.bind(context) : Prototype.K;    var result = true;    this.each(function(value, index) {      result = result && !!iterator(value, index);      if (!result) throw $break;    });    return result;  }&entries=function() {    return this.map();  }&member=function(object) {    if (Object.isFunction(this.indexOf))      if (this.indexOf(object) != -1) return true;    var found = false;    this.each(function(value) {      if (value == object) {        found = true;        throw $break;      }    });    return found;  }&filter=function(iterator, context) {    iterator = iterator.bind(context);    var results = [];    this.each(function(value, index) {      if (iterator(value, index))        results.push(value);    });    return results;  }&select=function(iterator, context) {    iterator = iterator.bind(context);    var results = [];    this.each(function(value, index) {      if (iterator(value, index))        results.push(value);    });    return results;  }&find=function(iterator, context) {    iterator = iterator.bind(context);    var result;    this.each(function(value, index) {      if (iterator(value, index)) {        result = value;        throw $break;      }    });    return result;  }&map=function(iterator, context) {    iterator = iterator ? iterator.bind(context) : Prototype.K;    var results = [];    this.each(function(value, index) {      results.push(iterator(value, index));    });    return results;  }&inspect=function() {    return '[' + this.map(Object.inspect).join(', ') + ']';  }&size=function() {    return this.length;  }&zip=function() {    var iterator = Prototype.K, args = $A(arguments);    if (Object.isFunction(args.last()))      iterator = args.pop();    var collections = [this].concat(args).map($A);    return this.map(function(value, index) {      return ite


terwijl ik eingelijk dit terug zou moeten krijgen

1http://www.mijndomein.nl/count/7zR13Li2.png?cache=false&language=nl&colordepth=32&screenwidth=1280&screenheight=1024&is_cookie=1&js_version=1.8&plugins=Mozilla%20Default%20Plug-in,Shockwave%20for%20Director,Shockwave%20Flash,Google%20Update,RealPlayer%28tm%29%20G2%20LiveConnect-Enabled%20Plug-In%20%2832-bit%29%20,RealPlayer%20Version%20Plugin,Yahoo%21%20activeX%20Plug-in%20Bridge,Microsoft%AE%20DRM,Windows%20Media%20Player%20Plug-in%20Dynamic%20Link%20Library,


Wat gaat er fout? :D kan iemand mij hiermee helpen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63599162
Niemand?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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')