Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   HowTo: Main area scrolling (http://forum.bytesforall.com/showthread.php?t=6145)

Tamas Mar 4, 2010 07:16 AM

HowTo: Main area scrolling
 
Hi!

I would like to have the header, footer and side-widget areas fix on the screen.
The text and images from Posts and Pages should be displayed into a fix-sized main area.
If the info is more than the fixed size, than THAT area could be scrolled.

So, how to make the MAIN AREA scrollable?

Thanks,

Tamas

Eric Bobrow Mar 5, 2010 08:41 PM

I have the same question. In doing a Google search, I came across a comprehensive tutorial that covers this for web pages in general:
http://www.noobcube.com/tutorials/ht...inners-guide-/

It shows how to create fixed headers and/or footers that work in all major browsers, including IE6 (which is the most troublesome). I'm not sure how easy it will be to implement this in Atahualpa, but I may give it a shot. It doesn't deal with sidebars, but it's likely the approach could be extended to work for them too.

Eric Bobrow Mar 5, 2010 11:47 PM

SUCCESS!

It took a little while, but I succeeded in getting my header to remain fixed at the top of the screen in all browsers!

The tutorial article I referenced above gave all the tools, but of course I had to adapt things for use with Atahualpa. Here is a summary of what I added and changed to make this work:

In ATO > Style & edit HEADER AREA -
HTML Code:

<div id="header-wrap">
        <div id="header-container">

%pages %logo %bar1 %image %bar2

        </div>
</div>

In ATO > Add HTML/CSS Inserts > CSS Inserts -
Code:

#header-wrap {
        position: fixed;
        width: 1000px;
        top: 0px;
}

#header-container {
        height: 90px;
}

To keep the center and sidebars from running up underneath the fixed header, one needs to adjust the top padding to keep that part of the browser window clear. In ATO > Style & edit CENTER COLUMN > Center Column style - adjust the top padding, the first number in the padding list (the default is 10px) to accommodate the Header height - I set mine to 120px and my line became:
Code:

padding: 120px 15px;
In ATO > Style & configure SIDEBARS - adjust the top padding (first parameter in the padding list) for each relevant sidebar style - mine became:
Code:

border-right: dashed 1px #CCCCCC;
padding: 120px 10px 10px 10px;
background: #ffffff;

This completes the work for Firefox, Safari, Chrome, and IE 7 & 8!

Since IE6 does not handle CSS position: fixed properly, if one wants to keep the site working for IE6 visitors, one has to add a few additional things.

Return to ATO > Add HTML/CSS Inserts, and in the Header, put in conditional code that only IE6 will execute that loads a supplemental style sheet:
HTML Code:

<!--[if IE 6]>
<link href="http://www.yoursite.com/css/ie6-fixed-header.css" rel="stylesheet" type="text/css" />
<![endif]-->

One needs to create the CSS file for this, and name and place it in the proper directory and URL referenced above. The CSS file is simple:
Code:

html, body{
        height: 100%;
        overflow: hidden;
}
#header-wrap {
        position: absolute;
}
#header-container {
        margin-right: 17px;
}
#ie6-container-wrap {
        width: 100%;
        height: 100%;
        overflow: auto;
}

Finally, one needs to create an extra "ie6-container-wrap" DIV that will contain the entire BODY of the site, that only has an effect in IE6.

In ATO > Add HTML/CSS Inserts > Body Top - add the following line:
HTML Code:

<div id="ie6-container-wrap">
In Body Bottom, add the following to close the DIV:
HTML Code:

</div>
As far as I can remember, these are the steps that I did to achieve the effect.

I hope some others in the Atahualpa community find this useful!

P.S. One last thing - I noticed that the Flash videos on some of the pages on my site had a strange behavior. When I scrolled the page, they went up underneath part of the header (the page menu bar) normally, but slid on top of the header graphic images, which looked pretty odd. I was able to find an article that gave me a clue for how to deal with this:
http://www.communitymx.com/content/a....cfm?cid=e5141

The solution to this problem is to change the "wmode" parameter for the Flash video from its default value ("window") to "opaque". This makes the Flash video position itself directly within the page, rather than being in a separate layer; this makes it both opaque (you can't see through it, even if part of the video is transparent), but ALSO makes it possible for other graphic elements (e.g. the header images) to cover it up as they cover up neighboring elements on the page.

For more details on this topic, please visit the web page referenced here.

lmilesw Mar 6, 2010 07:16 AM

Works for me in IE but not in Firefox. In Firefox all I get is a blank page.

Eric Bobrow Mar 6, 2010 11:58 AM

Thanks for letting me know! I continued work for several hours last night, adding a feature to the header for rotating random quotes. All was well when I last checked in all the browsers, but when I checked again this morning after your posting, there was a big problem in Firefox.

Since the rotating quotes aren't strictly necessary for the site, I've commented out the jQuery code I added, and the site shows properly in Firefox again. I don't think this affects the instructions I gave for making the main area scroll while keeping the header fixed. I'll post again after I've figured out what's going on with my jQuery code for the rotating quotes.

Eric Bobrow Mar 7, 2010 01:29 PM

It turned out I had some errors in the code that I put in later that evening for rotating quotes in the header. After I fixed that, everything worked nicely. So my original lengthy posting of code and instructions seems to be just fine.

Again, for anyone who wants to see a fixed header in Atahualpa, with the rest of the page scrolling below it, please visit:
[site URL removed, no longer using Atahualpa]

Note that I also have implemented a slideup panel for capturing leads for our email list. It currently waits about 15 seconds after you get to the website, then slides up from the bottom of the screen. After it appears, it acts as a fixed footer, and works nicely in all browsers including IE6.

A visitor can fill in the form to be added to our email list, or click the active text in the bottom left to close the panel. This is all done with jQuery code added to Atahualpa's js.php file. When I get a chance, I'll write up some documentation here so that others can reuse the code.

lmilesw Mar 8, 2010 06:19 AM

Nice work Eric and thanks for sharing. That will save other hours of time.

bosscakes Oct 4, 2010 06:58 PM

Thank you so much! This has saved me so much time.

Eric Bobrow Oct 12, 2010 01:26 AM

By the way, I had to change the URL for our website since I no longer am a reseller for Graphisoft (the developer for the software product ArchiCAD) and they requested that I stop using their trademark ArchiCAD as part of the domain name.

coldar75 Dec 2, 2010 06:26 AM

Great Eric!
Have you any suggestion about locking sidebars and scrolling only the page/post area?

Thanks

Coldar

rhenium3 Dec 15, 2010 04:56 AM

Eric, Thank you so much for this post, it looks fantastic!

I have a little problem with google ads though, if you go to my site on www.swedishfreak.com you can see that the header is locked, but for some reason only google ads goes over the header instead of under it. Any suggestions?

rhenium3 Dec 15, 2010 07:43 AM

I found this:

http://www.google.com/support/forum/...1a452c1b&hl=en

But I don't know where the #nav li ul is in the theme, or what it is called...

lmilesw Dec 15, 2010 10:42 AM

The z-index won't help. This is a wmode issue and I am not sure you can fix unless a plugin for Google ads is available that that can take care of it. See this post.

bswb97 Aug 23, 2011 09:06 PM

For future reference, I got this to work on the sidebars. For example, on the left:

Place this AFTER the TD in the Header.php file. You have to hard code it.
HTML Code:

<div id="left-wrap">
        <div id="left-container">

content...

        </div>
</div>

And in the CSS/HTML Inserts

HTML Code:

#left-wrap {
        position: fixed;
        width: 250px;
        left: 0px;
}

#left-container {
        height: 1000px;
}

For the right sidebar, simply do the same thing on the right side in the Footer.PHP file (hard code). Note that you MUST use "left" or "right" in the CSS, if you leave that out, everything will poop.

sober Dec 27, 2012 03:39 PM

Just curious, are the codes mentioned valid in this year and Atahualpa and Wordpress versions ? I tried the demo sites and did not see it working in chrome.

juggledad Dec 27, 2012 04:20 PM

When you say you tried the demo sites, what do you mean?

The post from Eric was from 2010 and that site is not using atahualpa any more. You should try it and see what happens

Eric Bobrow Dec 27, 2012 11:19 PM

Sober and Juggledad -

You're right, the site I referred to earlier in this thread has been changed to use a different theme. I still use Atahualpa for some of my sites, but haven't implemented this fixed header concept in them.

I'm pretty sure that the principles still apply, but you would need to study the current version of Atahualpa to see where line numbers and file references need to be updated.

Eric Bobrow


All times are GMT -6. The time now is 11:39 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.