CODEWITHSUNDEEP
phpjavascriptjqueryjoomlajoomla-template
Lee Wiggins
Lee Wiggins

Reputation: 351

Detecting Screen Size using Javascript and PHP in Joomla

I have a bit of a challenging question (well it is for me anyway :) )

I am developing a Joomla template for a client who would like to include a jQuery slideshow, I am also using responsive design for upto 480, upto 800 and over 801px.

What I would like to do is setup 3 slideshow modules (for ease of use for the client, one for images 480 wide, one for images 740 wide and one for images 940 wide, then I would like to call that module depending on the users screen size. I know that this needs to be done with php in Joomla and that it is a server side script only and I'm not a fan on UA sniffing.

This is what I'm thinking, please comment on what you think.

  1. Include PHP function that detects if the $screenWidth variable isset

  2. If not, run javascript that detects users screen width, sets this variable to the URL (or another way that it will hold the variable).

  3. Run an AJAX page reload

  4. Pull the $screenWidth variable from the URL.

  5. The original isset will now return true so the page continues to load.

  6. Then run PHP code using that variable to load the appropriate slide show.

What do you think? will it slow the page down too much? Will the reload work and keep the URL in joomla?

Please let me know you thoughts and offer any suggestions.

Thanks

Lee

Upvotes: 0

Views: 600

Answers (2)

Tanveer
Tanveer

Reputation: 2087

There are many possibilities but i think simpler is better. I think you should perform following steps

Write a startup javascript function that checks the screen width and height (screen.availWidth and screen.availHeight) and send it to server and create slide show accordingly and send back to client

Upvotes: 0

Jhong
Jhong

Reputation: 2752

Are you sure you need to reload the page? Once you get the screenWidth from the client via an AJAX call, can't you generate the slideshow HTML and send it back? The client can then insert it into the DOM directly without having to reload the page, and you won't have to mess around with maintaining state.

Upvotes: 1

Related Questions