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:
- Make a scroll.js file and put it in includes/templates/custom/common/javascript/ .
- 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);
}
-
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>
-
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.
