Change Class with javascript

Question 1

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.

Question 2

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/

Question 3

@Andreas: Thanks for spotting that. I'm pretty sure that I did type it, but I might have accidentally removed it when formatting the code...

Question 4

Thank you very much, now it does work :D, but is there anyway to make a div fixed in one place? because if i get the browser with less width, the div changes itself to enter in the space, so the menu become vertical D:

Question 5

@VictorBressanideMello: You can use position: absolute; or position: fixed; to fix an element to the document or the window, respectively.

Question 6

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>

Question 7

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.

Question 8

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

CSS:

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

Question 9

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'; 
 }
}

Question 10

And why not document.body, since we're at it?

Question 11

... and the parentheses are missing in the if statement condition

Question 12

I was also wandering why nobody used document.body.className = BRW < SCR ? "BDYL" : "BDNL" so far. The ternary operator is faster than the if...else statement.

Question 13

@MaxArt: I think that any performance difference there is negligible compared to the action of setting an attribute of a DOM element, and the conditional operator is not so easy to understand for a beginner. If you would want to make a performance difference, you would keep the current value in a variable and compare against that, so that you only change the element attribute when the value actually changes.

Question 14

Well, I never had any issues with the ternary operator, and it's way faster to write code with it. It could be just me, anyway. You're right with the performance part, I was just generally speaking.

Guffa Guffa 703k111 gold badges759 silver badges1k bronze badges · Accepted Answer · 2012-07-11 22:23:41Z

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/

@Andreas: Thanks for spotting that. I'm pretty sure that I did type it, but I might have accidentally removed it when formatting the code...
Thank you very much, now it does work :D, but is there anyway to make a div fixed in one place? because if i get the browser with less width, the div changes itself to enter in the space, so the menu become vertical D:
@VictorBressanideMello: You can use position: absolute; or position: fixed; to fix an element to the document or the window, respectively.

CollectivesTM on Stack Overflow

Change Class with javascript

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related