0

I have a sidebar/content column layout switcher that I made with Javascript. On a blog with a main content column and then a sidebar column.

==========Content Column========  ==Sidebar==    
================================  ===========  
================================  ===========  
================================  ===========  
================================  ===========  
================================  ===========  
================================  ===========  
================================  =========== 



==Sidebar==  ==========Content Column========  
===========  ================================  
===========  ================================  
===========  ================================  
===========  ================================  
===========  ================================  
===========  ================================  
===========  ================================

How it works:
The user can select a button enter image description here which will switch the layout to show the sidebar on the left or right side of the page. Once they hit the switcher button I save the value into a browser Cookie with Javascript and make the switch using CSS. This works well so that the page does not need to reload or anything like that.

Now the part in question, once the page is reloaded or another page on the site is loaded, if I read in the Cookie value using Javascript, then the page must load and then make the switch, so there is a delay in switching the layout that is visible to the user, this is tacky. I know the simple solution is to read the Cookie with PHP and set the appropriate CSS for the columns priotr to the page being loaded.

My question though is, is it possible to read the Cookie and switch the layout positions with Javascript but without there being any visible delay? Or must I stick to building it server side to avoid this?

JasonDavis
  • 45,100
  • 92
  • 294
  • 508
  • try using html5 webstorage maybe it could be faster – COLD TOLD May 16 '12 at 00:36
  • @COLDTOLD: I actually thought about this a while back but I have yet to test it out for speed. In theory I wouldn't think it would be much different though. With the Javascript/cookie right now I guess it has to load the DOM and THEN make the change. Wouldn't it be the same process with webstorage? – JasonDavis May 16 '12 at 00:45
  • 1
    http://stackoverflow.com/questions/3220660/local-storage-vs-cookies it a good article as well as this one http://www.developer.com/open/article.php/3887631/Web-Storage-API-vs-Cookies-for-Browser-Data-Storage.htm – COLD TOLD May 16 '12 at 00:56

1 Answers1

0

You can read the cookie and write a stylesheet before the body even begins to render the page.

kennebec
  • 94,076
  • 30
  • 99
  • 125