Change Header Depending to Screen Size

[keyness]

Hello,

I designed a header for 1280 and above screen width. But when screen width is below than 1280 pixels, it doesn't look well. So I want to change header depending to user's screen width.

I tried something like that in header template, but it didn't work:

<vb:if condition="screen.width <= '1280'">

Header code for above 1280px

</else>

Header code for below 1280px

</vb:if>

Where I am mistaken?

[Christos Teriakis]

Originally Posted by keyness

Hello,

I designed a header for 1280 and above screen width. But when screen width is below than 1280 pixels, it doesn't look well. So I want to change header depending to user's screen width.

I tried something like that in header template, but it didn't work:

<vb:if condition="screen.width <= '1280'">

Header code for above 1280px

</else>

Header code for below 1280px

</vb:if>

Where I am mistaken?

Without testing your code, the only that I can say is that you've a syntax error:
is: <vb:else /> and not </else>

Edited: But I've doubts for your condition. Where did you found that screen.width . If it's a global variable you must use the sign $ before. eg: $screen.width

Chris

[keyness]

Oh, that's right, I'll try it. Thank you Chris!

By the way, after asked this question I managed to do it with iframe like this:

<script type="text/javascript">
if (screen.width<=1280)
{
 document.write('<iframe src="headersm.php" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:260px;"></iframe>');
}
else
{
 document.write('<iframe src="headerbig.php" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:260px;"></iframe>');
}
</script>

However, without iframe it would be better of course.

[Christos Teriakis]

Also change $screen.width <= '1280' to screen.width <= 1280

[keyness]

Dear Chris,

Where to put that code inside headinclude template in your following solution: (I mean at the end or at the beginning of code)

https://vborg.vbsupport.ru/showpost....82&postcount=8

--------------- Added [DATE]1365532959[/DATE] at [TIME]1365532959[/TIME] ---------------

Originally Posted by ChrisTERiS

Also change $screen.width <= '1280' to screen.width <= 1280

It worked as a charm when I did this. I never thought it could effect it.

Thank you Chris!

In order to help people who will find this page via search engines for same intention I share the code:

<vb:if condition="screen.width <= 1280">

Code if screen width is smaller than 1280

<vb:else/>

Code if screen width is bigger than 1280

</vb:if>

[RedTurtle]

Thank you so much for this thread. I am trying to do something similar.

I created a plugin that hooks into global_setup_complete and determines when to show a second advertisement on my forum to a guest visitor. Currently it is setup to only show a second advert if the user is not using a tablet or a phone to view the page. I would also like to add the check for screen width at the plugin level.

I have the following code:

global $vbulletin, $show;
//If the user isn't using a phone or tablet to view the site, show the second advertisement.
if (!$vbulletin->detect->isMobile() AND !$vbulletin->detect->isTablet() ){
$show['second_header_ad'] = true;
}

How can I modify this to also check screen width?

Thank you!