solved Is it possible to auto hide/show header in jr5

RickStaRr
RickStaRr
@trickyricky
10 years ago
53 posts
Hi guys, I was wondering if there is a way that I can auto hide/show the header in jr5? Reason being, I am currently developing a live android application on Google Play. Actually it's a bridge that makes my jr5 site a android app, along with other services I offer through the app.

Problem is: when I use the text field, my phone keypad & jr5 header takes up the whole screen on my phone. I believe if I was to have the header setup to auto hide, I would be able to see/use more screen space in my app. FWIW, Once I have a working candidate, I would release the app code & tutorials to the jr community if allowed.

See attachment for more details about my issues with my app & jr header. Thanks
jpg
 •  292KB


updated by @trickyricky: 06/16/14 01:11:25PM
paul
@paul
10 years ago
4,325 posts
Try using the smarty jrCore_is_mobile_device() or jrCore_is_tablet_device() calls in the templates -

{if !jrCore_is_mobile_device() && !jrCore_is_tablet_device()}
// Show header
{/if}

Remember that you'll still need to include the meta.tpl template somewhere for JR to work properly.
hth
Pa


--
Paul Asher - JR Developer and System Import Specialist
RickStaRr
RickStaRr
@trickyricky
10 years ago
53 posts
Hello Paul & thank you for your reply. So are you saying that I should also edit the meta.tpl file as well & include which path, you didn't give more insight when mentioning the meta.tpl file? Please excuse my ignorance as I am still transitioning to the jr5 code, coming from jr4.
Thanks
michael
@michael
10 years ago
7,697 posts
Where to use the code @paul pointed out will depend on the skin your using.

That code is template code, so it will go somewhere in a a .tpl file.

Since that header is the site header, your probably going to be looking in the header.tpl file for that section.

after that is just play around and figure out what you want to happen.
paul
@paul
10 years ago
4,325 posts
RickStaRr:
Hello Paul & thank you for your reply. So are you saying that I should also edit the meta.tpl file as well & include which path, you didn't give more insight when mentioning the meta.tpl file? Please excuse my ignorance as I am still transitioning to the jr5 code, coming from jr4.
Thanks

In some of the skins, the meta.tpl include is 'nested' inside the header.tpl, so just excluding the header template could cause issues as the meta would not then be included. Try something like this as a guide, maybe in the index.tpl template -
{if !jrCore_is_mobile_device() && !jrCore_is_tablet_device()}
  {jrCore_include template="header.tpl"}
{else}
  {jrCore_include template="meta.tpl"}
{/if}
Pa


--
Paul Asher - JR Developer and System Import Specialist
RickStaRr
RickStaRr
@trickyricky
10 years ago
53 posts
Good day Paul & Micheal, Thanks for your help (Paul), I have tried out your solution & find it very promising, but the problem that I have is when mobile browser is activated, there is no menu button which takes away the navigation feature. I think it would be so cool if the header would appear/hide on scroll. I have been looking at some jQuery codes but if I were to integrate it with jr5, it would add on more coding for the site owner as I would like to (some day) distribute the android apk code to those who may be seeking to embed their jr5 site into an android app.
michael
@michael
10 years ago
7,697 posts
RickStaRr:I think it would be so cool if the header would appear/hide on scroll.

It depends on what skin your using as to how the header behaves. I think the elastic skin has a fixed header while some of the others use a scrolling header.

Take a look at the demos on your mobile device and see if any of them behave the way your wanting.
http://www.jamroom.net/demos
RickStaRr
RickStaRr
@trickyricky
10 years ago
53 posts
Hi Michael, thanks for your reply, I have looked at the suggested skins. Their headers perform very well & pretty much alleviate the issues I am having with the Elastic skin. The two skins that has my attention, looks alot like the elastic skins. so I was wondering if what I am trying to accomplish can be done with the elastic skin. What I'll do is play around with the header settings inside the css to see if I can get some results & I'll post the findings. If all else fails, I may end up buying a new skin altogether.

Thanks for your help

***UPDATE:***
Lo & behold, it works guys... Michael said the magical words, I tried it and solves my problem. auto hiding/showing the header is a feature that is no longer needed.
Thanks Paul & Michael for your expertise, it's greatly appreciated..
updated by @trickyricky: 05/17/14 09:14:26AM

Tags