Screen Resolution Detection - For Banner(s) Logo(s)

[Jose Amaral Rego]

This is just a basically telling that if you browse with screen resolution setting at '800x600' you will see image that fits without overhanging and or if you browse using default settings on your monitor '1024x768', you will see same image or another set to full header lenght without overhanging. You still have to make image fit for those resolutions.

<script type="text/javascript">
if (screen.width<=800)
{
 document.write('800x600 header code here');
}
else
{
 document.write('Regular header code here');
}
</script>

If you browse at '800x600' if not regular settings apply

<script type="text/javascript">
if (screen.width<=800)
{
 document.write('<img src="../images/banner.jpg" border="0" alt="vBulletin" width="XXX" />');
}
else
{
 document.write('<img src="../images/banner.jpg" border="0" alt="vBulletin" width="XXX" />');
}
</script>

If you browse at '800x600' or screen width '1024' or ect.

<script type="text/javascript">
if (screen.width==800)
{
 document.write('<img src="../images/banner.jpg" border="0" alt="vBulletin" width="XXX" />');
}
else if (screen.width==1024)
{
 document.write('<img src="../images/banner.jpg" border="0" alt="vBulletin" width="XXX" />');
}
else if (screen.width==1152)
{
 document.write('<img src="../images/banner.jpg" border="0" alt="vBulletin" width="XXX" />');
}
</script>

Note: it tends not to work with java script turned off. I tried DHTML, but that tends to fall short on cross browser capabilities. .php was beyond me, but that is where I got the idea on just plain javascripting this. Macs machines have resolution width quite different from regular PCs monitor if you wish to take that in account when adding an image for those who own those machines.

If java script is disable on clientside, then you need to add a conditional statement Ex:

<if condition="$show['disable'] || $show['enable']">
	<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
		<td align="$stylevar[right]">
			&nbsp;
		</td>
	</tr>
	</table>
<else />
	<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><script type="text/javascript">
if (screen.width<=800)
{
 document.write('800x600 scr res header code here');
}
else
{
 document.write('Regular header code here');
}
</script></a></td>
		<td align="$stylevar[right]">
			&nbsp;
		</td>
	</tr>
	</table>
</if>

This is just what I was playing with, after a few members express some type of way to expand / contract banner and or logo by screen resolutions.

Well that was 5 hours I will never get back Meh! it was raining, so I had nothing to do.

[Jirina]

I'm wondering if I understand you correctly Jose.

1) If I insert this code (with appropriate amendments) in my forum will my members with differing screen resolutions all see the same screen. With the banner in proportion to the forum body size that is.

2) If I understand you correctly I would perhaps need to create several version of the banner to suit each screen resolution.

3) Could you tell me please where the code should be inserted?

In a question on the issue of the banner in the last few days you kindly took a look and reccomended I make this change:

Edit StyleVars
Main Table Width (pixels or percentage) [940]
(This is the width of the table that contains all your vBulletin content)

Unfortunately this caused one members view to be totally scewed (his setting is at 800x600).

So that's why I'm back looking at OTHER ways to solve my banner problem. I had to set things back at 100% and so I have the two silly blocks of cream at either side of my darn blasted banner again.

http://allanspalace.com

Could you possibly help with a few easy steps?

Thank you for your help Jose, I do appreciate it.

[Jose Amaral Rego]

This is meant for fluid / liquid style and not fixed width.

[Jirina]

Sorry Jose, I don't know enough about the subject to know what you're talking about here or its significance...

[Gero50]

I am wondering myself on where exactly the code goes. I know it is in the header template but where exactly.