Solved

Use javascript to add style to div tag

Posted on 2011-09-22
7
313 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
  • 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 51

Accepted Solution

by:
HainKurt earned 250 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 250 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

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
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…

832 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