vb.org Archive - Change Header Depending to Screen Size

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Change Header Depending to Screen Size (https://vborg.vbsupport.ru/showthread.php?t=297027)

keyness

04-09-2013 03:42 PM

Change Header Depending to Screen Size

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

04-09-2013 05:25 PM

Quote:

Originally Posted by keyness (Post 2415347)

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

04-09-2013 05:29 PM

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:

Code:

<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

04-09-2013 05:33 PM

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

keyness

04-09-2013 05:37 PM

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] ---------------

Quote:

Originally Posted by ChrisTERiS (Post 2415370)

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:

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

04-09-2013 06:35 PM

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:

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!

All times are GMT. The time now is 11:47 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01027 seconds Memory Usage 1,726KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: