0

I just deployed a Rails 3.2.9 app for our website. On the home page I have the old Twitter widget where you could modify more features than it appears you can with the new ones. I have developed the site where it has responsive design for desktop and mobile devices using media queries in CSS3.

The problem is that the old widget does not allow percentages to be entered for the width and height from my experience. Of course the help for those widgets is no longer available. The new Twitter widgets do not allow you to modify the width, only the height. I want to be able to have different widths for the Twitter widget depending on the screen resolution. The only way I think this might be possible is if I can check the monitor size in my html/erb code somehow.

I have done searches attempting to find information on how to check this in Rails and HTML. All I have found requires that this is done using CSS3 media queries.

My Question: Is there a way to check the media parameters used in CSS media queries in HTML5 or using Rails 3?

Basically I'm looking for something like this or some HTML5 equivalent.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<% if some media query parameters for smartphones %>
  <script>Twitter widget</script>
<% elsif some media query parameters for tablets %>
  <script>Twitter widget</script>
<% else %>
  <script>Twitter widget</script>
<% end %>

Either that or maybe there exists help for the old Twitter widgets where you can use percentages instead of pixels.

Any help would be appreciated.

Ryan B
  • 3,364
  • 21
  • 35
Pamela Cook - LightBe Corp
  • 3,912
  • 5
  • 50
  • 86

2 Answers2

1

As far as I'm aware media queries only work with pixels for the screen size definition.

You could use Javascript to check the screen size but then again why not just use a media query. I know you've said you can't use them but this seems the only option.

There is a javascript way of getting the web page size (source Get the size of the screen, current web page and browser window)

 $(window).height();   // returns height of browser viewport
 $(document).height(); // returns height of HTML document
 $(window).width();   // returns width of browser viewport
 $(document).width(); // returns width of HTML document

You could try this twitter widget: http://tweet.seaofclouds.com/ I am led to believe it will work with media queries.

Community
  • 1
  • 1
joshuahornby10
  • 4,222
  • 8
  • 36
  • 52
  • I was afraid that my only option is media queries. I tried overriding the hardcoded width & height of the old Twitter widget using CSS but it did not work. I found that the default for one of our sites will work well using the new Twitter widget. I will definitely check out the suggested twitter widget. I'm sure other 3rd party solutions are available. Note: I am taking an online Javascript class next semester. I figured there were Javascript solutions but didn't want to attempt it :) I will save this post & use the info after the class. Thanks!! – Pamela Cook - LightBe Corp Nov 28 '12 at 16:18
0

Could look at JS Breakpoint libs like http://xoxco.com/projects/code/breakpoints/

sidonaldson
  • 24,431
  • 10
  • 56
  • 61
  • When I originally wrote this question I only had one Rails application. I now have nine. Four of them have been upgraded to Rails 4 Ruby 2. I ended up changing all my Rails applications to use the new widgets where the color schemes match what was made available in Twitter. I have saved this link for future reference if I ever need to check the widths in my views. Thanks so much. – Pamela Cook - LightBe Corp Sep 25 '13 at 12:33