• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11134
  • Last Modified:

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

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
Maclinders
Asked:
Maclinders
  • 3
  • 2
  • 2
1 Solution
 
neongrauCommented:
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
 
neongrauCommented:
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
 
killer_kiwiCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
neongrauCommented:
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
 
killer_kiwiCommented:
// 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
 
MaclindersAuthor Commented:
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
 
MaclindersAuthor Commented:
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

Industry Leaders: 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!

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now