?
Solved

Help on document.getElementby??? Class???

Posted on 2003-03-12
7
Medium Priority
?
11,113 Views
Last Modified: 2011-08-18
This is a piece of my code that i use to dynamically resize my page according to browser size.
It all works great, but now i have a lot of ID's because they have to be unique.
Is there a way so i can use classes to resize the page.

i tried document.getElementByClass('resize').style.fontSize = iSmallerdimension * .022,'

but it didn't work.
Can anyone help me out here.

          <script type="text/javascript">
               function getSmallerDimension(){
                    if (document.body){
                         var cw = document.body.clientWidth;
                         var ch = document.body.clientHeight;
                         }
                    else if (self.innerWidth){
                         var cw = self.innerWidth;
                         var ch = self.innerHeight;    
                         }
                    if (cw <= ch){
                         if (cw >= 0){
                              return cw;
                              }
                         }
                         else{
                              if (ch >= 0){
                                   return ch;
                                   }
                              }
                         return 0;
               }
          </script>
          <script type="text/javascript" language="javascript">
     function ResizeFontsLocal()
     {
     iSmallerDimension = getSmallerDimension();
     document.getElementById('rodebalk').style.fontSize = (iSmallerDimension * .04);
     document.getElementById('Titel').style.fontSize = (iSmallerDimension * .06);
     document.getElementById('blauwebalk').style.fontSize = (iSmallerDimension * .031);
     document.getElementById('oranjeHorizontaal').style.fontSize = (iSmallerDimension * .022);
     document.getElementById('oranjelijn').style.fontSize = (iSmallerDimension * .01);
     document.getElementById('bodyvlak1').style.fontSize = (iSmallerDimension * .022);
     document.getElementById('bodyvlak2').style.fontSize = (iSmallerDimension * .022);
     document.getElementById('verticaltext').style.fontSize = (iSmallerDimension * .05);
     }
</script>
0
Comment
Question by:Maclinders
[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
  • 3
  • 2
  • 2
7 Comments
 
LVL 2

Expert Comment

by:neongrau
ID: 8121869
hi!

would it be possible to assign all your Elements a specific name? then you could use document.getElementsByTagName('yourname') and loop all element in this array.

if you could live with a IE only solution you could just use document.all an loop it by checking its "className" property.
otherwise you would have to use the document.node and loop all and everything beneath them, but i don't think that would be very performant.


regards
~neongrau
0
 
LVL 2

Expert Comment

by:neongrau
ID: 8121973
hi again!

i found it:

x = document.getElementsByTagName('body')[0].childNodes;
for (var i=0; i < x.length; i++) {
  if ( x[i].className == 'xxx' ) {
    x[i].style.color = '#FF0000';
  }
}


add as many "x[i].style.color = '#FF0000';"
lines as you need for your style changes.


regards
~neongrau
0
 

Expert Comment

by:killer_kiwi
ID: 8122377
I think neongrau's solution would only find the child nodes of the body tag.  Try document

document.body.getElementsByTagName('*')

to return all the nodes of a document (* is like a wildcard, IE and NS)
0
Independent Software Vendors: 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 2

Accepted Solution

by:
neongrau earned 290 total points
ID: 8122400
yes silly me :-)

but this will catch em all:

function change(myNode) {
  myNode.style.color = '#FF0000';
  myNode.style.border= '1px dotted pink';
}


function loopAll(startNode) {
  var x = startNode.childNodes;
  for (var i=0; i < x.length; i++) {
    if ( x[i].className == 'xxx' ) {
      change(x[i]);
    }
    if ( x[i].hasChildNodes() == true ) {
      loopAll(x[i]);
    }
  }
  return true;
}

loopAll(document.getElementsByTagName('body')[0]);
0
 

Expert Comment

by:killer_kiwi
ID: 8122448
// or the orginal :)

x = document.body.getElementsByTagName('*')
for (var i=0; i < x.length; i++) {
 if ( x[i].className == 'xxx' ) {
   x[i].style.color = '#FF0000';
 }
}
0
 

Author Comment

by:Maclinders
ID: 8123444
I'm going to try these options, after completion points will be awarded to the best sollution

(if it works)

Thanx in advance

Mark Linders
The Netherlands
0
 

Author Comment

by:Maclinders
ID: 8128628
Didn't really work out, but it put me in the right direction.

So here you got the points for the help.

Greetz Mark
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to implement server side field validation and display customized error messages to the client.
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)
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…
Suggested Courses

765 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