www.webdeveloper.com
Results 1 to 6 of 6

Thread: Positioning of a sidebar element

  1. #1
    Join Date
    Jul 2007
    Posts
    3

    Question Positioning of a sidebar element

    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:

    Code:
    <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!!

  2. #2
    Join Date
    Nov 2006
    Posts
    28
    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.
    Last edited by blakeelias; 07-29-2007 at 06:30 PM.

  3. #3
    Join Date
    Jul 2007
    Posts
    3

    Float:right

    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!!


    Code:
    <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>

  4. #4
    Join Date
    Nov 2006
    Posts
    28
    Try applying the following CSS property:
    Code:
    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.
    Last edited by blakeelias; 07-30-2007 at 08:24 AM.

  5. #5
    Join Date
    Jul 2007
    Posts
    3
    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?

  6. #6
    Join Date
    Sep 2012
    Location
    New Delhi
    Posts
    1

    resolved Put code in Container Class

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles