Javascript Update CSS dynamically

Question

I am pretty new to Javascript and could do with a hand with a little problem I've got.

I have a PHP script which loads varying amount of images from a database - all 150px wide - and displaying them in a horizontal row. I need to be able to adjust the width of this row to enable scrolling if the items are more than the standard width, or to remove the scrollbar if it is not.

In my PHP I query the database and if the result set returned is greater than 0 I attempt the following in javascript

$width = mysql_num_rows($get) * 150;
'<script type="text/javascript">
        document.getElementById('container').setAttribute('style', 'width: '.$width.''); 
</script>'

container is the holding div ID which is populated by the result set. However I seem unable to dynamically update the width depending on the results of the query.

My HTML is pretty simple

<div id="container">
#Call PHP Function
</div>

Thanks

And did you echo that piece of javascript further down in the DOM, after the markup for the elements ? — adeneo
– adeneo, Commented Oct 30, 2013 at 20:57
are you talking about a horizontal scroll bar (left to right)? if your content is too wide the browser will do that by itself. or are you hoping to do some kind of overflow:scroll? — Andrew Brown
– Andrew Brown, Commented Oct 30, 2013 at 21:02
I echoed that after the div structure closed. And hoping to do something with an overflow scroll — Kieran
– Kieran, Commented Nov 2, 2013 at 21:21

Benjamin · Accepted Answer · 2013-10-30 21:02:27Z

0

Your quotation marks are the culprit, I think.

Try .setAttribute('style', 'width: '+$width);

answered Oct 30, 2013 at 21:02

Benjamin

1,0701 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krasimir · Accepted Answer · 2013-10-30 21:06:32Z

0

I'm not sure what exactly you are trying to achieve but your width style should contain pixels:

'<script type="text/javascript">
    document.getElementById("container").setAttribute("style", "width: '.$width.'px"); 
</script>'

answered Oct 30, 2013 at 21:06

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Comments

Smamatti · Accepted Answer · 2013-10-30 21:09:39Z

I have no idea why you need JS and not plain CSS. As Kender stated you might solve this problem with white-space: nowrap;.

Sample

http://jsfiddle.net/8hkLu/

HTML

<div class="myDynRow">
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
</div>

<div class="myDynRow">
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" />
</div>

CSS

.myDynRow {
    white-space: nowrap;
}

Collectives™ on Stack Overflow

Javascript Update CSS dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related