[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Use javascript to add style to div tag

Posted on 2011-09-22
7
Medium Priority
?
320 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
Technology Partners: 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 60

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

649 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