Help responsive template

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
oldnema
Posts: 265
Joined: Wed Jan 21, 2009 5:15 pm
Location: Czech Republic
Contact:

Help responsive template

Post by oldnema » Tue Dec 04, 2012 5:33 pm

Hi experts,
A help is needed solving my idea:
In resposive template with the resolution below e.g. 400px (width) there is a MENU button below the header. This is linked to the toc() located below the content(). Clicking the item in the menu, the header is loaded on top again and the content below it. I would, however prefere having the clicked page header shown on top. IOW - surfing the page in a mobile, the header is not more important for me. It is OK to see him on openning the website. But later -surfing the page - it consumes space I would prefere to be used for the particular content.
Is it possible to hide the header when any page is clicked in toc() except of the "Welcome" page?
Thanks for any advice.
Josef "Oldnema"

P.S. Problem in responsive template is here: http://oldnema.compsys.cz/demos/responsivehtml/
Nobody knows how much time he has left ...
http://oldnema.compsys.cz/en/?Demo_templates

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Help responsive template

Post by cmb » Tue Dec 04, 2012 6:24 pm

Hi Josef,

this requires a bit of PHP in the template. Instead of

Code: Select all

<div id="header"> 
use something like the following:

Code: Select all

<div id="header" <?php if ($s != 0) {echo 'class="followingpage"';}?>>
This will set class="followingpage" for all pages but the first.

I'm aware you know how to do the rest, but it might be interesting for others (and for me; it's actually the first media query I have ever written). Add to the stylesheet:

Code: Select all

@media screen and (max-width: 400px) {
    #header.followingpage {display:none}
}
Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Help responsive template

Post by Tata » Tue Dec 04, 2012 7:06 pm

I also suggested to oldnema 2 different #headers:
1. for resol. 480+
2. for resolution 480- - with minimalized #header content - max 2 lines
The 2. would be though more prefered, for the header keep somtime substantial information.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

oldnema
Posts: 265
Joined: Wed Jan 21, 2009 5:15 pm
Location: Czech Republic
Contact:

Re: Help responsive template

Post by oldnema » Tue Dec 04, 2012 7:31 pm

My question was not "how to hide header". My question is whether it is possible to jump from the menu by clicking directly on the title page (H1 or H2 or H3). So skip the menu.
When the menu for example, have 15 items will be very high and can not see that it was loaded down article.
Josef
Nobody knows how much time he has left ...
http://oldnema.compsys.cz/en/?Demo_templates

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Help responsive template

Post by Tata » Tue Dec 04, 2012 7:57 pm

Well, then I see as a sollution:
in cms.php change the line:

Code: Select all

                . '<a href="?' . $u[count($u) - 1] . '">' . $temp . '</a>' . '</li>';
to

Code: Select all

                . '<a href="?' . $u[count($u) - 1] . '#content">' . $temp . '</a>' . '</li>';
and add

Code: Select all

<a name="#content"></a>
just before

Code: Select all

<?php echo editmenu();?>
<?php echo content();?>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Help responsive template

Post by cmb » Wed Dec 05, 2012 11:35 am

What about:

Code: Select all

@media screen and (max-width: 480px) {
    ul.menulevel1 {display:none}
    #menu:hover ul.menulevel1 {display:block}
}
+ some additional hint for the user to tap the search box to see the menu?
Christoph M. Becker – Plugins for CMSimple_XH

oldnema
Posts: 265
Joined: Wed Jan 21, 2009 5:15 pm
Location: Czech Republic
Contact:

Re: Help responsive template

Post by oldnema » Wed Dec 05, 2012 7:12 pm

cmb wrote:What about:

Code: Select all

@media screen and (max-width: 480px) {
    ul.menulevel1 {display:none}
    #menu:hover ul.menulevel1 {display:block}
}
+ some additional hint for the user to tap the search box to see the menu?
Yep, that's it, it adjusted to its final form and give the community CMSimple_XH download!
Thank you friend Christopher, I knew that you will always find a solution ...
Nobody knows how much time he has left ...
http://oldnema.compsys.cz/en/?Demo_templates

Post Reply