Solved

Need DOM Help

Posted on 2004-04-16
23
647 Views
Last Modified: 2013-11-19
The code below is a small mock of a larger bit of a project that i am doing.

You will see that i have written a function to set the mouseover and mouseout of the images to set the "colorBar" bg color
to the img bgColor .....

Now what i want to do is also set the forms colorName and colorCode fields with the corresponding

ex

<div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>

when you mouse over this image the colorName field should be Tempest Brown and the colorCode field would be 153A

i am sure DOM can do what i want to do by using ?Node but i am not sure on the best way to approach this.

TIA
jAy


<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function(){
      if(!document.images){ return; } // not supported
      var img = document.images;
      var colorBar = document.getElementById('colorBar');
            for(var i=0; i<img.length; i++){
                  if(img){
                        if(img[i].getAttribute('width') == '124')
                              img[i].onmouseover = function(){
                                    colorBar.style.backgroundColor = this.style.backgroundColor;
                              }
                              img[i].onmouseout = function(){
                                    colorBar.style.backgroundColor = 'transparent';
                              }
                        }
                  }
            }
}
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" name="colorName">
<input type="text" name="colorCode">
</form>
<br /><br />
  <div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
0
Comment
Question by:jaysolomon
  • 11
  • 8
  • 3
  • +1
23 Comments
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842296
and the first line in the script should be

      if(!document.getElementById){ return; } // not supported

TIA
jAy
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842343
ouch

left a { out

window.onload = function(){
      if(!document.getElementById){ return; } // not supported
      var img = document.images;
      var colorBar = document.getElementById('colorBar');
            for(var i=0; i<img.length; i++){
                  if(img){
                        if(img[i].getAttribute('width') == '124'){
                              img[i].onmouseover = function(){
                                    colorBar.style.backgroundColor = this.style.backgroundColor;
                              }
                              img[i].onmouseout = function(){
                                    colorBar.style.backgroundColor = 'transparent';
                              }
                        }
                  }
            }
}
0
 
LVL 3

Assisted Solution

by:ljfernandez
ljfernandez earned 100 total points
ID: 10842533
Here you go:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function(){
     if(!document.getElementById){ return; } // not supported
     var img = document.images;
     var colorBar = document.getElementById('colorBar');
          for(var i=0; i<img.length; i++){
               if(img){
                    if(img[i].getAttribute('width') == '124'){
                         img[i].onmouseover = function(){
                              colorBar.style.backgroundColor = this.style.backgroundColor;
                                            document.getElementById("colorName").value = this.parentNode.previousSibling.innerText;
                                            document.getElementById("colorCode").value = this.parentNode.previousSibling.previousSibling.innerText;
                         }
                         img[i].onmouseout = function(){
                              colorBar.style.backgroundColor = 'transparent';
                         }
                    }
               }
          }
}

// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" id="colorName">
<input type="text" id="colorCode">
</form>
<br /><br />

  <div class="cname">Tempest Brown</div>
  <div id="ccode" class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div id="ccode" class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div id="ccode" class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 8

Expert Comment

by:HaydnH
ID: 10842616
FYI:

this.parentNode.previousSibling.innerText And this.parentNode.previousSibling.previousSibling.innerText WON'T work in netscape/mozilla...

Haydn.

0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842651
change it to innerHTML and i get the code but not the Name
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10842704
"change it to innerHTML and i get the code but not the Name"

Yeah... I'm stuck about there... almost got a solution - back in 5.

Haydn.
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842747
lol yea i almost got it answered to lol :)

Thanks
jAy
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10842802
Grrr... you can get the colour like this in Mozilla... not sure why Ie doesn't like it =/

//    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference
      myColor = this.parentNode.parentNode.innerHTML.replace(/<div class="cname">/,"").replace(/<\/div>([\d\D]*)/,"");
      alert(myColor);

Haydn.
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10842826
Sorry - forgot to mention I added a <DIV> around each colour set:

  <div>
    <div class="cname">Tempest Brown</div>
    <div class="ccode">153A</div>
    <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
  </div>

This is so that I can go up to get the innerHTML of this new div instead of the body... I was trying to go back down the div's in to cname and ccode divs but can't for some reason... arrrghhh... can't think straight... I need a break!

Haydn.
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842987
>>/    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference

i have no trouble in IE or Mozilla getting the bgCOlor, i just cannot get the colorCode or Corlor name
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10842990
>>/    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference

i have no trouble in IE or Mozilla getting the bgCOlor, i just cannot get the colorCode or Corlor name
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10843108
sorry for the dbl post...


this works fine in IE but in mozilla two things happen

1 - i am undefined for the colorCode

2 - it puts the code in the name field so therefore it is bassackwards

IE is the way it should be

window.onload = function(){
     if(!document.getElementById){ return; } // not supported
     var img = document.images;
     var colorBar = document.getElementById('colorBar');
          for(var i=0; i<img.length; i++){
               if(img){
                    if(img[i].getAttribute('width') == '124'){
                         img[i].onmouseover = function(){
                              colorBar.style.backgroundColor = this.style.backgroundColor;
                                     document.forms[0].colorname.value = this.parentNode.previousSibling.previousSibling.innerHTML;
                                     document.forms[0].colorcode.value = this.parentNode.previousSibling.innerHTML;
                         }
                         img[i].onmouseout = function(){
                              colorBar.style.backgroundColor = 'transparent';
                         }
                    }
               }
          }
}

0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10843116
Maybe i am trying to walk the tree the wrong way
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10843126
I've almost got it - gimme 15 mins ;P
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10843167
ok here is the larger part of it if you would like to see

http://www.jaysolomon.net/ssc/
0
 
LVL 4

Accepted Solution

by:
monolith_888 earned 300 total points
ID: 10843278
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function()
 {
 var nameBox = document.getElementById('cNameB');
 var codeBox = document.getElementById('cCodeB');

 if(!document.images){ return; } // not supported
 var img = document.images;
 var colorBar = document.getElementById('colorBar');
 for(var i=0; i<img.length; i++)
  {
  if(img)
   {
   if(img[i].getAttribute('width') == '124')
    {
    img[i].onmouseover = function()
     {
     colorBar.style.backgroundColor = this.style.backgroundColor;
     var prevNode = this.parentNode.previousSibling;

     nameBox.value =
      (document.all) ?
       prevNode.previousSibling.innerHTML :
       prevNode.previousSibling.previousSibling.previousSibling.innerHTML;
       
     codeBox.value =
      (document.all) ?
       prevNode.innerHTML :
       prevNode.previousSibling.innerHTML;
     }
    img[i].onmouseout = function()
     {
     colorBar.style.backgroundColor = 'transparent';
     }
    }
   }
  }
 }

// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" name="colorName" id="cNameB">
<input type="text" name="colorCode" id="cCodeB">
</form>
<br /><br />
  <div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10843289
Got the above to work - for both NN and IE, NN DOM parsing got tricky on us (ljfernandez and myself), but we figured it out.  (She should get an assist :) )

-monolith_888
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10843322
Thank god for that... I just got it working as follows:

  colorBar.style.backgroundColor = this.style.backgroundColor;

  myColor = this.parentNode.parentNode.innerHTML.replace(/<div class=["]?cname["]?>/i, "");
  myColor = myColor.replace(/<\/div>[\r]?[\n]?(.*[\r]?[\n]?)*/i,"");
  myColor = myColor.replace(/[\r]?[\n]?/ig,"");
  document.form1.colorName.value = myColor;


I'm glad you don't need to use this hack =P

Haydn.
0
 
LVL 8

Assisted Solution

by:HaydnH
HaydnH earned 100 total points
ID: 10843361
Oh Mono:

you missed the lines:

    //colorBar.style.backgroundColor = 'transparent'; <--- original line for location ref
    document.form1.colorName.value = "";
    document.form1.colorCode.value = "";

;P

Haydn
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10843368
http://www.jaysolomon.net/ssc/

Thanks, i can walk the tree fairly decent but sometimes walking it is like regular expressions, it gets confusing

Thanks
jAy
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10843407
Thanks for the catch HaydnH!

What teamwork we have here!

*wipes tear from eye*

Thanks jaysolomon. :)

0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10843409
"regular expressions"

Nah I love regex... been trying to use them as much as possible recently: like above... although it'd be nice if IE and Mozilla returned the same string for .innerHTML - 1 users class="blah" the other uses class=blah, 1 uses <DIV> the other uses <div> - took me ages to realise why it wasn't working in both browsers lol

Haydn.
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 10843417
great work
If you all keep the team work up you will be up on the HOF with the rest of us in no time

:)))))

jAy
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question