Utilizing Jquery, I have implemented the .offset() method to precisely position two columns that span 100% of the page height, serving as drop shadows for the content margins.
The CSS styling applied to these columns is:
div#lshade,
div#rshade
{
width: 60px;
display: block;
position: fixed;
height: 100%;
}
div#lshade
{
background: url(/_private/display/layout/lshade.png) repeat-y;
}
div#rshade
{
background: url(/_private/display/layout/rshade.png) repeat-y;
}
Below is the JQuery code in use:
function loaded()
{
setInterval("fixShade()", 33);
}
function fixShade()
{
var left = $("#lshade");
var right = $("#rshade");
var cont = $("#content").offset();
left.offset({top: 0, left: cont.left});
right.offset({top: 0, left: cont.left + 900});
}
Initially, everything functioned seamlessly until the page content length necessitated scrolling. Post-scroll, the columns erroneously ascended with the page despite being set as fixed.
This behavior suggests that using offset() may override the fixed property.
The intended outcome is constant alignment at the top of the page and spanning the full height (akin to position: fixed;).
A potential solution involves setting horizontal positioning accurately while ensuring vertical attachment to the scrolled window position (the top).
To view the current embodiment of my project, please visit: