Solved

Need DOM Help

Posted on 2004-04-16
23
643 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now