Solved

Use javascript to add style to div tag

Posted on 2011-09-22
7
316 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
Independent Software Vendors: 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!

 
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 53

Accepted Solution

by:
Huseyin KAHRAMAN 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

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…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

738 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