?
Solved

Need DOM Help

Posted on 2004-04-16
23
Medium Priority
?
650 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 400 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 1200 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 400 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
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:
Suggested Courses

800 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