HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Floating Header/Top Menu

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#97345 (In Topic #19294)
Avatar

Well-settled

Is there a way to make the header and top menu float when you are scrolling?

Russ Teicheira
http://vvarmachine.com or http://vvarnc.com - OCPortal Install
http://www.russteicheira.net
 - Profile Site that needs updating
http://projectxfire.com - Tech Blog that I need to get back to
Back to the top
 
Posted
Rating:
#97352
Avatar

Community saint

Yes, and I've done that on LastGamer.net a loooong time ago.

Looking at my notes, there are three things that need to be done (Note that my site is using ocPortal v7, so they will apply directly to v7/v8 sites but will need to be tweaked for v9 sites).

1) Make the header/menu section fixed on the screen.

In global.css add the following to the .global_top style:

Code

   position:fixed;
   z-index:999;
That will fix the position and ensure it appears above all other content on the page (except possibly some iframe content in IE).

2) Add padding after header/menu

In header.tpl add following directly after last </div> in the template.

Code

<div style="height:105px"></div>

but change the 105px to the size of your header/menu.

Because the header/menu is fixed at the top of the screen, that code is needed to add padding after the header/menu that is the same size as the header/menu, otherwise the top of the rest of the content will move below the fixed header/menu and will no longer be visible.

3) Jump to correct anchor position after page loads.

In footer.tpl, add the following code just before </body> .

Code

<script type="text/javascript">// <![CDATA[
   addEventListenerAbstract(window,'load',function () {
      window.setTimeout(function() {
         if(window.location.hash.indexOf("#") > -1)
         {
            var hash=window.location.hash.substring(window.location.hash.indexOf("#")+1);
            var pos=findPosY(document.getElementsByName(hash)[0]);
            pos = pos - 120;
            if(pos<120)
            {
            pos=0;
            }
            //window.scrollTo(0,pos-pos2-45);
            window.scrollTo(0,pos);
            //alert(hash+"   "+pos);
         }
      }, 100);

   });
//]]></script>
This is needed for navigation around your site whenever someone click a link that contains an anchor (#), for example yoursite/forum/pg/topicview/findpost/1194#post_1194.

That is because the normal behaviour is for the anchor scrolls to the top of the page, but because the header/menu is now always at the top, the anchor would not be visible, so the code tries to compensate for that.

This does not always work on short pages because side panel iframes cause page to scroll up when they load which undoes our scroll.

And it will not work for links within the page because the code only runs after a page is loaded.

Even with these limitations, it is still better to have this code then not.

Hope this helps.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#97372
Avatar

Well-settled

Will have to try it out.  Will let you know

Russ Teicheira
http://vvarmachine.com or http://vvarnc.com - OCPortal Install
http://www.russteicheira.net
 - Profile Site that needs updating
http://projectxfire.com - Tech Blog that I need to get back to
Back to the top
 
Posted
Rating:
#97421
Avatar

Well-settled

So, trying to get this working, but it looks like  .global_top does not exist anymore, neither does header.tpl…  :dry:

Russ Teicheira
http://vvarmachine.com or http://vvarnc.com - OCPortal Install
http://www.russteicheira.net
 - Profile Site that needs updating
http://projectxfire.com - Tech Blog that I need to get back to
Back to the top
 
Posted
Rating:
#97422
Avatar

Community saint

In v9, HEADER.tpl and FOOTER.tpl have been merged into GLOBAL_HTML_WRAP.tpl

It looks like the div that used .global_top style has been dumped in favour of using the <header> element. So you can probably just change:

Code

<header class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
to:

Code

<header style="position:fixed;z-index:999;" class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
and you should achieve the same result.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#97423
Avatar

Community saint

temp1024 said

In v9, HEADER.tpl and FOOTER.tpl have been merged into GLOBAL_HTML_WRAP.tpl

It looks like the div that used .global_top style has been dumped in favour of using the <header> element. So you can probably just change:

Code

<header class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
to:

Code

<header style="position:fixed;z-index:999;" class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
and you should achieve the same result.
This is not working, it places the header over the top of global middle.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#97427
Avatar

Community saint

Actually it is working, you need just need to add padding described in step 2.

For your site you need to add:

Code

<div style="height:320px"></div>
after </header>, and you will get the desired spacing.


The only problem for your site, as it currently stands, is the fact that your header doesn't start at the very top of the page, so when you scroll the global middle will peak through the top few pixels.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#97428
Avatar

Community saint

Thanks Temp, will look to this again!.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#97433
Avatar

Community saint

Thanks, Temp!

This works wonderfully and will be quite useful in future designs.
:thumbs:

Jean
Back to the top
 
Posted
Rating:
#97444
Avatar

Community saint

Oke have try this solution, and yes its working, but at my theme I got the top menu on the right site of the header. See it on my first attachment.

But for a new theme its very usefull.

temp1024 said

Actually it is working, you need just need to add padding described in step 2.

For your site you need to add:

Code

<div style="height:320px"></div>
after </header>, and you will get the desired spacing.


The only problem for your site, as it currently stands, is the fact that your header doesn't start at the very top of the page, so when you scroll the global middle will peak through the top few pixels.



http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#109987
Avatar

Well-settled

Has anyone yet figured out how to move the header to the top so that when you scroll the global middle will peak through the top few pixels?

Robert W
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: