Jump to content

  • Log In with Google      Sign In   
  • Create Account

Responsive Design Javascript


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
No replies to this topic

#1 Michael Tanczos   Senior Staff   -  Reputation: 5451

Posted 14 January 2013 - 11:27 PM

Adding this code to the site starts to make the site more size responsive on lower resolutions.. this is a work in progress:

 

 
</p><div>Event.observe(window, "resize", function() {</div>
<div>    var width = document.viewport.getWidth();</div>
<div>    var height = document.viewport.getHeight();</div>
<div>    var dims = document.viewport.getDimensions(); // dims.width and dims.height</div>
<div> </div>
<div>    if (width < 1024)</div>
<div>    {</div>
<div>$$('.ipsLayout_right').each(Element.hide);</div>
<div>$$('.ipsLayout_withright').invoke('toggleClassName', 'ipsLayout_withright_disabled'); </div>
<div>$$('.ipsLayout_withright').invoke('toggleClassName', 'ipsLayout_withright'); </div>
<div>$$('.ipsLayout_content').invoke('toggleClassName', 'clearfix');</div>
<div>$$('#content,.main_width,#branding,#header_bar,#primary_nav').invoke('setStyle', { 'min-width': '0px' });</div>
<div> </div>
<div>$$('#dark').invoke('setStyle', { 'overflow': 'hidden' });</div>
<div>        if (width < 800)</div>
<div>$('search').hide();</div>
<div> </div>
<div>$('leaderboard').hide();</div>
<div>    }</div>
<div>    else</div>
<div>    {</div>
<div>$$('.ipsLayout_right').each(Element.show);</div>
<div>$$('.ipsLayout_withright_disabled').invoke('toggleClassName', 'ipsLayout_withright'); </div>
<div>$$('.ipsLayout_withright_disabled').invoke('toggleClassName', 'ipsLayout_withright_disabled'); </div>
<div>$$('.ipsLayout_content').invoke('toggleClassName', 'clearfix');</div>
<div>$$('#content,.main_width,#branding,#header_bar,#primary_nav').invoke('writeAttribute', 'style', '');</div>
<div> </div>
<div>$('search').show();</div>
<div>$('leaderboard').show();</div>
<div> </div>
<div>    }</div>
<div>});</div>
<div>
 


Sponsor:



Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS