DOM and select object

DOM and select object

• ThomasAG

  hi Toddos

  I had to take off this part of the code, you did'nt miss anythingh, this resolverUrl was there, but as i did'nt obtain the link with the swf's url, i had to change the swf: "m_module.resolveUrl()" , to be ok whith the switch/case.

  as i built a new gadget with other games, i will try this to get the url

  function affiche() {

  for (var i=0; i<jeuData.length; i++){

  url=jeuData[ i ].swf;

  affiche = window.open ("url", null, "width=550,height=450");

                                                             }

                             }

  il this the good syntax

  thank's a lot

  albidochon

   

   

  
  

• kilaj1

  albidochon wrote:

  So you mean that the selected index of jeuData is still keeped in memory at the end of the onchange function, and i have no more "for" loop to do, just call the selected index wich is still running

  Something like that. "selectedIndex" is a property of SELECT elements. It's always available, and will always return you whatever is the currently selected index value (if you set it, like "new_html.selectedIndex = 3;", that will tell the SELECT element to change its selection to the 4th item in the list). As long as you have access to your SELECT element (through a class variable, by calling document.getElementById, etc), you have access to its properties like selectedIndex.

  
  

• pwhitaker

  Thank's Toddos,

  for points one and two, it's okay, pfffffffffffff, just by changing new_html.selectedIndex rather switching on i.........it works, i spend hours and hours, and did'nt try this....so stupid i am.

  i also tried whith the array of images urls, but at this time i did'nt find how to select the index....;so so. And what about to pre-calculate the resolvedUrl

  when i use a relative path in the gadget, storing the swf and jpg files in their own directory, the /test.livegadgets.net/ don't find them.........

  foot by foot, thank's a lot

  albidochon

  
  

• Luis Esteban Valencia Mu&amp;#241;oz

  I made a select with options in the MoodClock gadget this way:

  You write an new Array for your options, if you need to 1 for the text, 1 for the value.

  var optionText = new Array()
  optionText[0] = "1st text";
  optionText[1] = "2nd text";

  var optionValue = new Array()
  optionValue[0] = "1st value";
  optionValue[1] = "2nd value";
  

  Make a select with document.createElement.

  var select = document.createElement("select")

  Then put the options into the select this way:

  for(var i = 0; i < optionText.length ; i++){
                  var opt=document.createElement("option");
                  opt.text=(optionText[ i ]);
                  opt.value=(optionValue[ i ]);
                  select.options[ i ]=opt;}

  NB. I have to put in spaces for [ i ] here , otherwise I get an emo ... so in the script it is without the spaces

  
  
  

• Blaine Anderson

  I'm not quite sure what you're doing with that "function tri()" bit. I don't see any reason to have that.

  Filling a SELECT object via DOM is pretty straight-forward if you think about it in terms of HTML elements. If you look in your sample html file, you'll see that a SELECT form element is nothing more than a node that contains other nodes. You know how to do this with the DOM already :).

  Create your SELECT node and set its attributes. Loop through your list of whatever you want to add to the SELECT and create an OPTION element. Set the value and append a text node for the display. Don't worry about setting "selected" yet. Append each one of these elements to the SELECT element (they'll show up in the drop down in the order they were appended, so if you have a specific sort order you need to deal with that here). Once you have all of your options appended, set the SELECT object's "selectedIndex" value to the 0-based index of the OPTION you want selected by default (programmatically setting "selectedIndex" doesn't fire onchange). BTW, selectedIndex is simply an int, not an object that has a "value".

  
  

• Neil Enns MSFT

  On the SWF issue, it looks like you lost the "m_module.resolveUrl()" part that should've been around the relative swf urls in the array-of-objects creation (perhaps I missed that part in the sample I built ).  Put that back in and jeuData[ i ].swf will contain the full path to the swfs.

  Also, I'd once again recommend that you move your "affiche()" function out to class scope.  There's no reason to have it scoped within initialize().

  
  

• usm2000

  Sorry, my fault. Use "var url = jeuData[new_html.selectedIndex].swf;" in affiche(), not jeuData[ i ]. Silly on my part for getting that wrong :).

  BTW, there's no reason to set "option.swf = jeuData[ i ].swf;", since option elements don't have a "swf" property.

  
  

• Ric415775

  albidochon, you're almost there. I'd do things just a bit differently.

  • Define your "change()" function at class scope rather than within the scope of initialize(). By declaring within initialize(), you're carrying a lot more overhead than you need.
  • In change(), rather than switching on "i", switch on new_html.selectedIndex. When "onchange" is fired, that will contain the index of the item that was just selected. At that point, you can swap out your image as necessary.
  • Rather than having a big ol' switch, I'd create an array of your different image URLs and access that array by index using new_html.selectedIndex. I'd also pre-calculate the resolved URL when building the array, rather than at flip time.
  • When you call resolveUrl(), use a relative path. That is, rather than "htt p://albidochon.free.fr/jeu3/tennis.jpg", just use "tennis.jpg". If I were doing this myself, I'd also store the images in their own dir, like "images/tennis.jpg". That's just for cleanliness.

  
  

• Sapna

  hi toddos, and marikje,

  now everything is ok with the select, but i can't link the options of the drop-down list with, with a display of pictures on the div with images. it only takes the default picture of the switch case, and i don't construct the logical way to do this in my mind.: by selecting a item in the drop-down list, it must show the corresponding picture on the upper div....

  my files are already in the first post, if somebody as some time to spend having a look on my mistakes.....

  i'm still learning and i'm happy to find good and patient people here

  thank's all

  albidochon

  
  

• Gilles Lafreniere

  hi toddos,

  gadget is finished.....

  It's working well, but i think not the best way of coding, because i used a "switch case" to load the swfs, i did'nt find the way to pick the url of the swf with a selectedIndex in the array, sorry....

  i took care of quite everythingh you told, trying to understand the logic line of thinking to built the code...

  there is an obscure point : how the imgObject : new Image() can be linked with the url of the item img with newObject.src

  for the swf loading in a window.open, if you have a shorter way (i'm sure of that...), could you tell me the way to code, so i learn a bit more about gadgets and js....

  thank's a lot for your help

  albidochon

  
  

• s12

  Why do you have the "for" loop When affiche() is called, you already know the index into jeuData -- it's the current selectedIndex of new_html (the SELECT element). Assuming the SWF url is populated correctly in jeuData[ i ].swf, affiche() could be another single-line function -- "window.open(jeuData[ i ].swf, ...);"
  

• Kolf

  hi Toddos,

  well, what i try to understand is :

  - i call, whith the fisrt loop "for", using the change() function , all the pictures linked whith each item of the drop down list.

  - if i use, after closing my change() function, jeuData, without looping, i will call nothing because no loop is done

  - if i insert a single line in the change() function callin the jeuData.swf, how to say whith this to fire the affiche() function

  see this :

  for(var i = 0; i < jeuData.length ; i++)
  {
  option= document.createElement('option');
  option.text=(jeuData[ i ].text) ;
  option.swf=(jeuData[ i ].swf);
  new_html.options=option ;
  }
  function change()
  {
  imag.src = jeuData[new_html.selectedIndex].imgObj.src;
  }
  function affiche()
  {
  url=(jeuData[ i ].swf);
  url=window.open("url", null, "width=550,height=450");
  }

  or something approaching

  albi
  

  
  

• VoiceOfExperience

  I hope you don't mind, but I took the liberty of downloading your code, modifying it, and uploading it here (that's the manifest, jeu3.js is the interesting file which is in the obvious location).  It was the best way I could summarize what I'm talking about :).

  What I did:

  • Replaced jeuText[], swf[], and the big switch statement with an array of objects in jeuData[].  I used both array and object shorthand notation, in case you're confused (you can create an array like "foo = [1, 2, 3];", and an object like "bar = {val1: 'a', val2: 'b', val3: 'c'};", and you can put them together like "var baz = [{id: 1}, {id: 2}, {id: 3}];").  I only filled in the first three values, so you can use the existing pattern to add the rest.
  • When filling up the objects in the array, I "precalculated" the full URLs by using m_module.resolveUrl().  I did this for both the swf objects (which I didn't actually upload, since you obviously haven't hooked up that functionality yet) as well as the images.  As well, I segregated images and swfs into their own folders ("swf/tennis.swf" and "images/tennis.jpg", for example).  I didn't actually download your swf files, but I did download the three images I used in this sample.  They're up at http://www.daishar.com/gadgets/jeu3/images/tennis.jpg (and mariob.jpg and marioc.jpg).
  • change() is now one line of code :)
  • For good measure, I added some code to preload your images.  See the comment at the beginning of initialize().  Also, once preloaded, I store the Image objects and use their src values when flipping images.  This is a bit heavier on memory consumption (obviously, since you're telling the browser to load a bunch of images.  However the trade-off is much faster image swaps, because you don't have to wait for the img element to re-load the images each time.  (not a big problem for broadband users, but it is noticeable).
  • Filling the dropdown options now uses jeuData[ i ].text, which retrieves the text value from the object stored at index i in jeuData.
  • I didn't bother cleaning up the array of objects.  You really should do that in your dispose method, though.  That should be as simple as calling "jeuData.clear();".

  Feel free to take the code I modified and use it as your own :)

  Work you need to do:

  • Obviously add the rest of your data items
  • Hook up the handler to load the swfs
  • Work on your CSS.  You're forcing the gadget window to be a hard-coded size, which probably isn't the best thing to do.  Let it flow!  (I actually commented out the 250px height and width in the css file, just to see what would happen, and it looks much better)
  • I'd suggest you clean up your code somewhat.  This is personal preference, but I found your code hard to read due to inconsistent spacing, indenting, curly bracket ("{" and "}") placement, etc.  Develop your own style, and if you are fine with what you have then there's no reason to change.
  • Whatever else you plan to do.

  
  

• mikedopp

  hi Toddos,

  mhhhhhh,

  there are two separate functions:

  - the first one, only display the selected picture when the onchange fonction links the drop-down list whith the picture.

  - once the picture is displayed, the second function, the onclick one, links the selected picture with the opening of a popup, by the affiche() window.open function.

  I though it was two separate actions. So you mean that the selected index of jeuData is still keeped in memory at the end of the onchange function, and i have no more "for" loop to do, just call the selected index wich is still running

  what about this

  
  
• DOM and select object