Positioning of a sidebar element

[aronan]

Hi there,

First off, I much appreciate any and all help you can provide!

I've been struggling with this for some time but I'm not quite sure what to do...

On this page: http://www.acqyr.com/temp.php

I'm trying to have that scrolling feature so the sidebar is always the live chat/order button. The problem is that different resolutions and/or browser sizes mucks things up.

On my 23" screen with my regular browser width size, it fits into the white sidebar area with no problem... but once I resize the window (or view it on a 1024x768 screen), the scrolling sidebar goes all over the place.

(I haven't fully tested it on IE yet, so I have no idea if there are other issues)

The code is:

<div id="divTopLeft" style="padding:14px; width:10%; position:absolute;">
<p class="arial" align="center"><strong class="blue">Questions? Call...</strong> <br></p>
<div align="center">Live chat/order button goes here</div>

<p>
  <script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	var px = document.layers ? "" : "px";
	window[id + "_obj"] = el;
	if(d.layers)el.style=el;
	el.cx = el.sx = sx;el.cy = el.sy = sy;
	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

	el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 50);
	}
	return el;
}
JSFX_FloatDiv("divTopLeft", 850,300).floatIt();
                    </script>
  </div>	  
</p>

Any ideas how I can fix it within the white space sidebar so it won't move around depending on horizontal widths of the browser or resolutions?

Thanks ever so kindly for your help and guidance!!

[blakeelias]

The trouble is that you have position:absolute for that div, and it is going to be a certain distance from the left. That's not what you want because the ideal distance from the left will be different for different screens. Try getting rid of position:absolute on the div that contains the sidebar and replace it with float:right That should float it to the right side of the container that it's in. If that doesn't give you the desired results then you may need to adjust the width of whatever element contains the sidebar.

[aronan]

Hey Blake!

Much appreciate the help! We're almost there... it fits into the sidebar now, but it doesn't scroll like it did... since I removed the position:absolute, it won't allow the div to scroll down the page so that the live chat and order button is always within view (with the current page, below, it stays fixed in the sidebar and doesn't scroll down).

Any ideas?

http://www.acqyr.com/temp.php

Thanks!!

<div id="divTopLeft" style="padding:14px; width:20%; float:right;">
<p class="arial" align="center"><strong class="blue">Questions? Call...</strong></div>

<p>
  <script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	var px = document.layers ? "" : "px";
	window[id + "_obj"] = el;
	if(d.layers)el.style=el;
	el.cx = el.sx = sx;el.cy = el.sy = sy;
	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

	el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 50);
	}
	return el;
}
JSFX_FloatDiv("divTopLeft", 850,300).floatIt();
                    </script>
  </div>	  
</p>

[blakeelias]

Try applying the following CSS property:

position: fixed
bottom: 20px;

I don't know if this will cancel out the float: right, but position: fixed keeps the element in a specific place and it will not scroll with the page (stays in a specific spot). Bottom: 20px will move the element 20 pixels from the bottom.

[aronan]

Hey Blake... I tried putting different position: properties and they all didn't work.

See: http://www.acqyr.com/temp.php

that's with position:fixed and bottom:20px

Thanks again for your help... do you have any other ideas?

[sandeepkumarsh]

Dear
If you are a word press user then i know the solution for you, I was facing the same problem and find the solution.

don't put script in header, just go to appearance -> editer

open index.php, and paste the script just below div: container,
do the same with page.php and post.php
You may see example at http://www.estuaryviewresorts.com

For wordpress it was solved, but Iam facing same problem in magento, If any one have the solution for magento please tell me.