CODEWITHSUNDEEP
javascripthtmlcss
Victor Bressani de Mello
Victor Bressani de Mello

Reputation: 21

Change Class with javascript

I have a site using a body background image. When the browser is resized, I want to change the body class.

JavaScript:

function MOSTRA() {
   var SCR = screen.availWidth
   var BRW = window.outerWidth

   if BRW < SCR {
      document.getElementById(BODY).className = 'BDYL'
   }
   else { 
      document.getElementById(BODY).className = 'BDNL' 
   }
}

HTML:

<body id="BODY" class="BDNL" onResize="MOSTRA()">

I thought the class would be changed (to one that is Background-size:auto), but it isn't. How can i change the background size or the whole class? I can't use more than Javascript, HTML, or CSS.

Upvotes: 0

Views: 372

Answers (5)

Marco Kerwitz
Marco Kerwitz

Reputation: 5524

Not exactly sure what you are actually trying to achieve (a link to the page you are working on would be helpful), the following came to my mind though:

  • You may want to use fluid layout techniques (Use percent values for container dimensions in CSS) to ensure that your DIV-elements render relative to the viewers screen resolution (read: it's parents dimensions - either a parenting DIV-element or the body element, which will be of 100% width, representing the available width to your page.

    div {width:60%}

  • Think again about the way you implement the background image, if you need your elements on page to align to the background image you should not set the background image to background-size:contain as this introduces a lot of hassle when trying to line everything up on window resize. Instead, slice your background into parts and assign the resulting smaller images to the different parts of the page that need to line up with it.

  • Relevant when designing for different resolutions: Media Queries and responsive layouts.

  • You may want to check jQuery resize(). jQuery will take care of different browser implementions of the resize event.

    $(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
});

    Also this will give you the possibility to implement your JavaScript much more elegant by using the jQuery Events System. This is, of course, only relevant if any further JavaScript work is planned on the page. I'm actually only referencing this for the sake of completion.

  • The code you posted is not valid.

    • You missed the line ending semicolon (though the code might be working, because interpreters usually do a good job guessing it).
    • No need to use an ID on the body element, simply get it via document.getElementsByTagName().
    • You need to put the tag name (BODY) into quotes.
    • Put the condition of the if else statement into paranthesis.

    Your code should look something like this:

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.getElementsByTagName('BODY').className = 'BDYL';
    } else { 
        document.getElementsByTagName('BODY').className = 'BDNL';
    }
}

    Or as MaxArt pointed out, simply use document.body

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.body.className = 'BDYL';
    } else { 
        document.body.className = 'BDNL';
    }
}

If all of this does not help, bear with me, as I really could only guess what your problem is. As said, a link to the page in question would be helpful.

Also, your question made the impression that you are new to all of this, if not, please excuse my rambling.

Upvotes: 1

Besnik
Besnik

Reputation: 6529

This works:

<script type="text/javascript">
window.onload = function () {
  window.onresize = function (evt) {
    var width = window.innerWidth || 
     (window.document.documentElement.clientWidth || window.document.body.clientWidth);

    if (width < screen.width)
    {
        document.body.className = 'BDYL';
    }
    else
    {
        document.body.className = 'BDNL';
    }

  }
};
</script>

Upvotes: 1

Guffa
Guffa

Reputation: 700800

You need parentheses around the condition in the if statement, and apostrophes (or quotation marks) around the strings BODY.

Also, you should separate the lines with semicolons. The script parser automatically adds them at the end of lines if the statement can end at the line, but you may get unexpected error messages if you forget an ending parenthesis so that the parser can't add the semicolon automatically.

You might also want to call the function from the onload event for the body, so that the class is set when the page has loaded.

function MOSTRA() {

  var SCR = screen.availWidth;

  var BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.getElementById('BODY').className = 'BDYL';
  } else {
    document.getElementById('BODY').className = 'BDNL';
  }
}

Demo: http://jsfiddle.net/Guffa/q56WM/

Upvotes: 4

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

You have a syntax error in your code. You are not passing a string to getElementById().

This:

document.getElementById(BODY).className = 'BDYL'

Should be this (with quotation marks, to make it a string):

document.getElementById("BODY").className = 'BDYL'

Update:

Or as MaxArt points out in his comment, just document.body.className = "BDYL"

Update 2:

You also have a syntax error in your if-statement, as pointed out by Mikahil, so you function could look like this instead:

function MOSTRA() {

  var SCR = screen.availWidth,
      BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.body.className = 'BDYL';
  } else {
    document.body.className = 'BDNL'; 
  }
}

Upvotes: 0

wanovak
wanovak

Reputation: 6127

I don't see why you need to use JavaScript for this.

CSS:

body {
     position: relative;
     width: 100%;
}

Upvotes: 0

Related Questions