The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
||||
|
||||
Screen Resolution Conditional to Wrap Around Some Template Code?
Hi guys,
I have a specific part of my website that messes up if someone with a screen resolution lower than 1280x800 looks at it. I know that resolution isn't very common, but it is still out there, especially in Asia where a large part of my users visit from. I am looking for having some conditional that I can use where it checks the screen width and if its greater than or equal to 800px, then it shows some code, otherwise it doesn't. How could I accomplish this? Thank you for any help or insight you can provide. I appreciate you taking the time to read this and assist me! |
#2
|
|||
|
|||
It's not that easy. PHP code (and template preparation) is executing on server-side, before sending the output to user (client-side). So you need to find a Javascript script to do it. I'll look on my library to see what I can find. I've added such Javascript in my Classifieds mod.
Chris |
#3
|
||||
|
||||
Thank you for your help Chris!
If you could find something that would work I would really appreciate it. Thanks again for responding -- your explanation did make sense to me. |
#4
|
||||
|
||||
Java Scrpit for check user's screen
var screenWidth = window.screen.width, screenHeight = window.screen.height; |
#5
|
||||
|
||||
Quote:
How would I implement this in vB4 so that I could show some code only if the screen width was at least 800px wide? Thanks again. |
#6
|
|||
|
|||
I need some more infor to understand what you're trying to do after getting user's screen resolution. Redirecting to another page, ...or displaying different code (eg {vb:raw short_screen} instead of {vb:raw wide_screen}) etc
--------------- Added [DATE]1354994447[/DATE] at [TIME]1354994447[/TIME] --------------- You know how to use it, me too eighter. But a non-coder trying to put it as is in the template he will mess everything. |
#7
|
||||
|
||||
Quote:
I have two 300x250 adblocks show up on my forum's main page right now to guests who visit. If a user has a screen resolution of less than 800px, I would only like to show one adblock. So something like: Code:
first adblock code <if screen width 800px or more> second adblock code </if> |
#8
|
|||
|
|||
Well, assuming that you've a bit HTML knowledge so you can add each code to a seperate "div", follow the steps:
1.- Add to headinclude template: Code:
<script type="text/javascript"> function SetResState() { if(screen.width <= 800) { document.getElementById('adcode1').style.display = 'block'; document.getElementById('adcode2').style.display = 'none'; } else { document.getElementById('adcode1').style.display = 'block'; document.getElementById('adcode2').style.display = 'block'; } } </script> 2.- On the SHELL template change the BODY to: HTML Code:
<body onload="SetResState()">
HTML Code:
<div id="adcode1" style="display: none;"> ..........Code for Ad 1............. </div> <div id="adcode2" style="display: none;"> ..........Code for Ad 2............. </div> I've tested it at: http://www.christeris.com/adblocks.html and works Chris |
#9
|
||||
|
||||
Thank you Chris!
I will try this a little later today and let you know how it went! |
#10
|
|||
|
|||
Quote:
Chris |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|