Can Javascript recognize a CSS width?

May 10, 2007 12:51 PM

CSS/JSP/Javascript Filter: I'm creating a widget which parses RSS via JSP and Javascript. This widget will allow users to include an RSS feed in their sidebar, but I'd like the widget to appear differently depending on the sidebar size. Is this possible to create an if statement determinant on the sidebar css class/id without know the class/id names?

I have my widget width set to 100%, so it will inherit the width of the class in which it's placed. However, if a user has a sidebar smaller than a certain width, I'd like to show an alternate view. The widget shows an image floating on the left, then headline and short description of a story to the right of the image. If the width of the sidebar is smaller than my min-width, I'd like the headline and description to move under the photo rather than to the right. Can I create an if statement which will recognize the inherited width without knowing the class/id name? Is this possible?

The feed is parsed via JSP and is displayed via a Javascript include.

Thanks for any ideas.

posted by captaindistracto to technology (4 comments total)

can you generate the CSS in jsp too? then you could reference the ID of your item. Maybe include the CSS information in the same page as your parsed RSS?
posted by jenkinsEar at 1:02 PM on May 10, 2007

You could check the offsetWidth (scroll down) of the widget, which will give you its rendered width. Then you can adjust it accordingly.
posted by cerebus19 at 1:07 PM on May 10, 2007 [1 favorite]

You can generate the view of the your feed using javascript.

So what you'd do is write two different javascript renderers for your wide and narrow views and have the jsp generate JSON or XML or whatever format you want to represent the data you need to render. Then you use javascript to check the size available to render in and make decisions accordingly.

So it will end up that you don't really write HTML for the page from your jsp. You end up dynamically generating javascript with jsp, and then the client runs the javascript which in turn builds the DOM that the browser renders.
posted by cmm at 4:53 PM on May 10, 2007

Thanks for the help. I ended up providing both solutions in my form, thus giving the user the ability to choose which view is preferred.
posted by captaindistracto at 6:03 PM on May 11, 2007