Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Need DOM Help

Posted on 2004-04-16
23
Medium Priority
?
651 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

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.

Question has a verified solution.

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

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.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

610 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