Hello. I'm trying to make my Categories Sidebox appear fixed but only after the user scrolls past the Header. Accordingly, when the user scrolls back to the top, the Categories Sidebox would no longer be fixed. How in the world can this be done?
A certain helpful member of this forum gave me the following code which essentially fixes the Categories Sidebox in place:
#categories {position: fixed;}
As mentioned before, however, I would only like to apply this code when the Header is no longer on the screen. I found two URLs where people have provided sample code to accomplish this very thing- but I'm having trouble applying the code. The first site provides Javascript. But I have no idea how to apply Javascript in Zencart- I imagine it should be in it's own separate file so it doesn't interrupt the delicate PHP. But at the same time it has to work with the CSS. Anyhow, here's the links, I hope someone here can help. Thanks.
http://www.codingforums.com/showthre...75#post1134675
http://www.webdeveloperjuice.com/201...-using-jquery/
Results 1 to 2 of 2
-
31 May 2012, 12:45 AM #1
New Zenner
- Join Date
- Jan 2006
- Posts
- 48
- Plugin Contributions
- 0
Fixed Categories Sidebox after scroll past Header
-
1 Jun 2012, 09:16 AM #2
New Zenner
- Join Date
- Jan 2006
- Posts
- 48
- Plugin Contributions
- 0
Re: Fixed Categories Sidebox after scroll past Header
Nevermind. I put in several hours on this today and finally got good results. However, if anyone else ever has a similar concern, here's what I did:
1) Make a scroll.js file and put it in includes/templates/custom/common/javascript/ .
2) The code in this file is exactly (you may change the numbers depending on the placement of your element):
function pageWidth(){
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
function pageHeight(){
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
function posLeft(){
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
function posTop(){
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
function posRight(){return posLeft()+pageWidth();}
function posBottom(){return posTop()+pageHeight();}
function moveObjTo(objectID,x,y){
var objs = document.getElementById(objectID);
objs.style.left = x+"px";
objs.style.top = y+"px";
}
var is_ie=function (){
if(!!(window['ActiveXObject'])){
return true;
}
else{
return false;
}
}
function scroll_with_page(target){
var x = (pageWidth() - 950)/2; //this gives us the width of the spacing on one side of the "main" div...
x = pageWidth() - (2 + 350 + x + 20); //this gives us the entire page's width, less the width of the player, the width of the side spacing, and the width of the padding set for "wrapper"
if(is_ie==true){
//if relevant, un-comment the line below and add whatever spacing IE's calculations leave off in your application...
// x = x + 10;
}
var y = posTop();
if(y<175){
//making the minimum top distance 185px so that the element only starts to scroll once we
//get past the original location in the page - it will then stop scrolling up with the page
//once we get back to the original location again.
y=185-y;
}
else{
y=10; //leaving 10px space intentionally
}
moveObjTo(target,x,y);
}
3) In html_header.php, add the following line directly above </head>: <script type="text/javascript" language="javascript" src="includes/templates/custom/common/javascript/scroll.js"></script>
4) In tpl_main_page.php, find the line that officially begins the body tag for the Zen-Cart html. I believe it starts with '<body id="<?php echo.....' and add the following inside the body tag (be careful not to interrupt any other code that's within that tag already):
onscroll="scroll_with_page('categories')" onload="scroll_with_page('categories')" onresize="scroll_with_page('categories')";
Notice, my element that I'm using is 'categories' but I suppose this could be done with anything else in Zen-Cart.
Reply With QuoteSimilar Threads
-
v150 Pages scroll past bottom of content
By mikebr in forum Upgrading to 1.5.xReplies: 11Last Post: 15 Jul 2012, 11:05 AM -
Fixed Sidepanel Categories during Scroll- Is This Possible??
By McCrockett in forum Templates, Stylesheets, Page LayoutReplies: 2Last Post: 21 May 2012, 10:01 PM -
Changing length of categories sidebox/header?
By ed7501 in forum Basic ConfigurationReplies: 0Last Post: 18 Aug 2009, 11:25 AM -
categories sidebox in the header?
By probablepossible in forum Templates, Stylesheets, Page LayoutReplies: 13Last Post: 29 Jun 2008, 09:50 PM -
Scroll baner on sidebox!
By kimsonvu in forum Basic ConfigurationReplies: 0Last Post: 9 Mar 2007, 04:33 PM
Bookmarks