?
Solved

Use javascript to add style to div tag

Posted on 2011-09-22
7
Medium Priority
?
318 Views
Last Modified: 2012-05-12
I have this html:

<div id="msg"><div id="msg1">Please agree with our terms of use to continue.<br /><div style="width:250px; height:100px; overflow:auto;">text goes here</div></div></div>

And I want to add      style="height:180px;"     to     <div id="msg">

I tried this:  document.getElementById("msg").style.height = "180px";

but there was not change, I'm thinking this is because there is no existing style element in the #msg tag. Do I need to adjust my javascript to add the style element before I can add things to it.

If needed the page I'm working on is here: http://97.65.85.25/rrcna/about-rrcna/book-orientation

Thanks for any help.
0
Comment
Question by:elliottbenzle
[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
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 13

Expert Comment

by:themrrobert
ID: 36582223
in your style settings,

#msg {

display: block;
//Add this line
}

final result: (assuming that's the only place your style is defined for #msg)
#bdpopupmsg #msg{
width:100%;
display: block;
height:60px;
margin-left:auto;
margin-top:10px;
padding:10px;
}

Open in new window

0
 
LVL 3

Expert Comment

by:dkellner
ID: 36582246
document.getElementById("msg").style.height="180px"
0
 
LVL 3

Expert Comment

by:dkellner
ID: 36582251
Opppps
sorry
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 4

Expert Comment

by:jmnf
ID: 36582265
Your javascript seems correct.
Perhaps the style is not being rendered correctly for some other reason.
Hardcode the style and see if it shows the right height.

Also try it in chrome, opera or firefox with firebug and check all the styles being applied to that specific div.

<div id="msg" style="height:180px;">
</div>

Open in new window

0
 
LVL 57

Accepted Solution

by:
HainKurt earned 1000 total points
ID: 36582292
it is working fine for me

just make sure you run that js code after the div element, not before... or use

<body onLoad="document.getElementById("msg").style.height = '180px';"  ... >

or create a function and call it from onLoad

<body onLoad="setHeight()"  ... >
<script>
function setHeight(){document.getElementById("msg").style.height = "180px";}
</script>


<div id="msg" style="border:1px solid silver;">
<div id="msg1">Please agree with our terms of use to continue.<br /><div style="width:250px; height:100px; overflow:auto;">text goes here</div></div>
</div>
zzzz
<script>
document.getElementById("msg").style.height = "180px";
</script>

Open in new window

0
 
LVL 4

Assisted Solution

by:jmnf
jmnf earned 1000 total points
ID: 36582314
Or maybe your element (<div id="msg"> is being rendered after the javascript gets parsed, so at the moment of telling javascript to make the element some height, the element is non existent (yet), for this, try loading the script at the end of the body tag, right before </body>, just like you would in the head...

<script type="text/javascript">
    // javascript goes here
</script>
0
 
LVL 13

Expert Comment

by:themrrobert
ID: 36582520
Try my solution, and like someone else said, be sure that your javascript is being called AFTER the <div id="msg"> is loaded.

Best of luck
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
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 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

752 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