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 |
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. |
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"> Code:
#header-wrap { Code:
padding: 120px 15px; Code:
border-right: dashed 1px #CCCCCC; 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]> Code:
html, body{ In ATO > Add HTML/CSS Inserts > Body Top - add the following line: HTML Code:
<div id="ie6-container-wrap"> HTML Code:
</div> 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. |
Works for me in IE but not in Firefox. In Firefox all I get is a blank page.
|
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. |
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. |
Nice work Eric and thanks for sharing. That will save other hours of time.
|
Thank you so much! This has saved me so much time.
|
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.
|
Great Eric!
Have you any suggestion about locking sidebars and scrolling only the page/post area? Thanks Coldar |
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? |
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... |
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.
|
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"> HTML Code:
#left-wrap { |
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.
|
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 |
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 04:21 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.