Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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.


    HTML Code:
    <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
    HTML Code:
    <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.
    HTML Code:
    <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:
    HTML Code:
    <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.

  • #2
    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.

    Comment


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

      Comment


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

        Comment


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

          Comment

          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
          Working...
          X