Hello, so, this may be hard to explain.

 

Take a look at this: http://funnyjunkstore.spreadshirt.co.uk/

 

You see the "Previous button on the left that scrolls with you? Well, I'm trying to get that on the outside of the store area but I can't find out how.

 

What's happening is spreadshirt (Who's hosting my store) let you code the store area, not around it. So, I can make the scrolling buttons on the right outside the store, but on the left it's limited to the edge of the store.

 

I've tried to add negative pixel values to push it out to the left, but it's not working. Anyone help? I'd be so grateful.

 

 

CODES USED:

 

Head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="/Public/Shop/Styles/icons.css" type="text/css" />
<link rel="stylesheet" href="/Public/Shop/Styles/checkout.css" type="text/css" />
<link rel="stylesheet" href="/Public/Shop/Styles/buttonset-6.css" type="text/css" />
<link rel="stylesheet" href="/Public/Shop/Styles/navigationset-5.css" type="text/css" />
<link rel="stylesheet" href="/Public/Shop/Styles/1/828/structure.css" type="text/css" />
<link rel="stylesheet" href="/users/3651000/3650626/619901/color.css" type="text/css" />
<link rel="stylesheet" href="/users/3651000/3650626/619901/shop.css" type="text/css" />
<link rel="shortcut icon" href="/Public/Common/images/favicon/lovetab.ico" />
<link rel="apple-touch-icon" href="/Public/Common/images/favicon/appletouch/lovetab.png" />

<script type="text/javascript">
var floatingMenu =
{
   hasInner: typeof(window.innerWidth) == 'number',
   hasElement: typeof(document.documentElement) == 'object'
       && typeof(document.documentElement.clientWidth) == 'number'
};

var floatingArray =
[
];

floatingMenu.add = function(obj, options)
{
   var name;
   var menu;

   if (typeof(obj) === "string")
       name = obj;
   else
       menu = obj;


   if (options == undefined)
   {
       floatingArray.push( 
           {
               id: name,
               menu: menu,

               targetLeft: 0,
               targetTop: 0,

               distance: .07,
               snap: true
           });
   }
   else
   {
       floatingArray.push( 
           {
               id: name,
               menu: menu,

               targetLeft: options.targetLeft,
               targetRight: options.targetRight,
               targetTop: options.targetTop,
               targetBottom: options.targetBottom,

               centerX: options.centerX,
               centerY: options.centerY,

               prohibitXMovement: options.prohibitXMovement,
               prohibitYMovement: options.prohibitYMovement,

               distance: options.distance != undefined ? options.distance : .07,
               snap: options.snap,
               ignoreParentDimensions: options.ignoreParentDimensions,

               scrollContainer: options.scrollContainer,
               scrollContainerId: options.scrollContainerId
           });
   }
};

floatingMenu.findSingle = function(item)
{
   if (item.id)
       item.menu = document.getElementById(item.id);

   if (item.scrollContainerId)
       item.scrollContainer = document.getElementById(item.scrollContainerId);
};

floatingMenu.move = function (item)
{
   if (!item.prohibitXMovement)
   {
       item.menu.style.left = item.nextX + 'px';
       item.menu.style.right = '';
   }

   if (!item.prohibitYMovement)
   {
       item.menu.style.top = item.nextY + 'px';
       item.menu.style.bottom = '';
   }
};

floatingMenu.scrollLeft = function(item)
{
   // If floating within scrollable container use it's scrollLeft
   if (item.scrollContainer)
       return item.scrollContainer.scrollLeft;

   var w = window;

   // Find top window scroll parameters if we're IFRAMEd
   while (w != w.parent)
       w = w.parent;

   return this.hasInner
       ? w.pageXOffset  
       : this.hasElement  
         ? w.document.documentElement.scrollLeft  
         : w.document.body.scrollLeft;
};

floatingMenu.scrollTop = function(item)
{
   // If floating within scrollable container use it's scrollTop
   if (item.scrollContainer)
       return item.scrollContainer.scrollTop;

   var w = window;

   // Find top window scroll parameters if we're IFRAMEd
   while (w != w.parent)
       w = w.parent;

   return this.hasInner
       ? w.pageYOffset
       : this.hasElement
         ? w.document.documentElement.scrollTop
         : w.document.body.scrollTop;
};

floatingMenu.windowWidth = function()
{
   return this.hasElement
       ? document.documentElement.clientWidth
       : document.body.clientWidth;
};

floatingMenu.windowHeight = function()
{
   if (floatingMenu.hasElement && floatingMenu.hasInner)
   {
       // Handle Opera 8 problems
       return document.documentElement.clientHeight > window.innerHeight
           ? window.innerHeight
           : document.documentElement.clientHeight
   }
   else
   {
       return floatingMenu.hasElement
           ? document.documentElement.clientHeight
           : document.body.clientHeight;
   }
};

floatingMenu.documentHeight = function()
{
   var innerHeight = this.hasInner
       ? window.innerHeight
       : 0;

   var body = document.body,
       html = document.documentElement;

   return Math.max(
       body.scrollHeight,
       body.offsetHeight, 
       html.clientHeight,
       html.scrollHeight,
       html.offsetHeight,
       innerHeight);
};

floatingMenu.documentWidth = function()
{
   var innerWidth = this.hasInner
       ? window.innerWidth
       : 0;

   var body = document.body,
       html = document.documentElement;

   return Math.max(
       body.scrollWidth,
       body.offsetWidth, 
       html.clientWidth,
       html.scrollWidth,
       html.offsetWidth,
       innerWidth);
};

floatingMenu.calculateCornerX = function(item)
{
   var offsetWidth = item.menu.offsetWidth;

   if (item.centerX)
       return this.scrollLeft(item) + (this.windowWidth() - offsetWidth)/2;

   var result = this.scrollLeft(item) - item.parentLeft;
   if (item.targetLeft == undefined)
   {
       result += this.windowWidth() - item.targetRight - offsetWidth;
   }
   else
   {
       result += item.targetLeft;
   }

   if (document.body != item.menu.parentNode
       && result + offsetWidth >= item.confinedWidthReserve)
   {
       result = item.confinedWidthReserve - offsetWidth;
   }

   if (result < 0)
       result = 0;

   return result;
};

floatingMenu.calculateCornerY = function(item)
{
   var offsetHeight = item.menu.offsetHeight;

   if (item.centerY)
       return this.scrollTop(item) + (this.windowHeight() - offsetHeight)/2;

   var result = this.scrollTop(item) - item.parentTop;
   if (item.targetTop === undefined)
   {
       result += this.windowHeight() - item.targetBottom - offsetHeight;
   }
   else
   {
       result += item.targetTop;
   }

   if (document.body != item.menu.parentNode
       && result + offsetHeight >= item.confinedHeightReserve)
   {
       result = item.confinedHeightReserve - offsetHeight;
   }

   if (result < 0)
       result = 0;

   return result;
};

floatingMenu.computeParent = function(item)
{
   if (item.ignoreParentDimensions)
   {
       item.confinedHeightReserve = this.documentHeight();
       item.confinedWidthReserver = this.documentWidth();
       item.parentLeft = 0;  
       item.parentTop = 0;  
       return;
   }

   var parentNode = item.menu.parentNode;
   var parentOffsets = this.offsets(parentNode, item);
   item.parentLeft = parentOffsets.left;
   item.parentTop = parentOffsets.top;

   item.confinedWidthReserve = parentNode.clientWidth;

   // We could have absolutely-positioned DIV wrapped
   // inside relatively-positioned. Then parent might not
   // have any height. Try to find parent that has
   // and try to find whats left of its height for us.
   var obj = parentNode;
   var objOffsets = this.offsets(obj, item);
   while (obj.clientHeight + objOffsets.top
          < item.menu.offsetHeight + parentOffsets.top)
   {
       obj = obj.parentNode;
       objOffsets = this.offsets(obj, item);
   }

   item.confinedHeightReserve = obj.clientHeight
       - (parentOffsets.top - objOffsets.top);
};

floatingMenu.offsets = function(obj, item)
{
   var result =
   {
       left: 0,
       top: 0
   };

   if (obj === item.scrollContainer)
       return;

   while (obj.offsetParent && obj.offsetParent != item.scrollContainer)
   {  
       result.left += obj.offsetLeft;  
       result.top += obj.offsetTop;  
       obj = obj.offsetParent;
   }  

   if (window == window.parent)
       return result;

   // we're IFRAMEd
   var iframes = window.parent.document.body.getElementsByTagName("IFRAME");
   for (var i = 0; i < iframes.length; i++)
   {
       if (iframes[i].contentWindow != window)
          continue;

       obj = iframes[i];
       while (obj.offsetParent)  
       {  
           result.left += obj.offsetLeft;  
           result.top += obj.offsetTop;  
           obj = obj.offsetParent;
       }  
   }

   return result;
};

floatingMenu.doFloatSingle = function(item)
{
   this.findSingle(item);

   var stepX, stepY;

   this.computeParent(item);

   var cornerX = this.calculateCornerX(item);

   var stepX = (cornerX - item.nextX) * item.distance;
   if (Math.abs(stepX) < .5 && item.snap
       || Math.abs(cornerX - item.nextX) == 1)
   {
       stepX = cornerX - item.nextX;
   }

   var cornerY = this.calculateCornerY(item);

   var stepY = (cornerY - item.nextY) * item.distance;
   if (Math.abs(stepY) < .5 && item.snap
       || Math.abs(cornerY - item.nextY) == 1)
   {
       stepY = cornerY - item.nextY;
   }

   if (Math.abs(stepX) > 0 ||
       Math.abs(stepY) > 0)
   {
       item.nextX += stepX;
       item.nextY += stepY;
       this.move(item);
   }
};

floatingMenu.fixTargets = function()
{
};

floatingMenu.fixTarget = function(item)
{
};

floatingMenu.doFloat = function()
{
   this.fixTargets();
   for (var i=0; i < floatingArray.length; i++)
   {
       this.fixTarget(floatingArray[i]);
       this.doFloatSingle(floatingArray[i]);
   }
   setTimeout('floatingMenu.doFloat()', 20);
};

floatingMenu.insertEvent = function(element, event, handler)
{
   // W3C
   if (element.addEventListener != undefined)
   {
       element.addEventListener(event, handler, false);
       return;
   }

   var listener = 'on' + event;

   // MS
   if (element.attachEvent != undefined)
   {
       element.attachEvent(listener, handler);
       return;
   }

   // Fallback
   var oldHandler = element[listener];
   element[listener] = function (e)
       {
           e = (e) ? e : window.event;
           var result = handler(e);
           return (oldHandler != undefined) 
               && (oldHandler(e) == true)
               && (result == true);
       };
};

floatingMenu.init = function()
{
   floatingMenu.fixTargets();

   for (var i=0; i < floatingArray.length; i++)
   {
       floatingMenu.initSingleMenu(floatingArray[i]);
   }

   setTimeout('floatingMenu.doFloat()', 100);
};

// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSingleMenu = function(item)
{
   this.findSingle(item);
   this.computeParent(item);
   this.fixTarget(item);
   item.nextX = this.calculateCornerX(item);
   item.nextY = this.calculateCornerY(item);
   this.move(item);
};

floatingMenu.insertEvent(window, 'load', floatingMenu.init);


// Register ourselves as jQuery plugin if jQuery is present
if (typeof(jQuery) !== 'undefined')
{
   (function ($)
   {
       $.fn.addFloating = function(options)
       {
           return this.each(function()
           {
               floatingMenu.add(this, options);
           });
       };
   }) (jQuery);
}

</script>
</head>

 

Body:

<body>

<div id="floatdiv" style="  
   position:absolute;
 left:100px;
   width:105px;height:329px;   
   z-index:99">  

<center>
<img src="/users/3651000/3650626/619901/img/619901_nex.jpg" width="50" height="69" />

<img src="/users/3651000/3650626/619901/img/619901_mal.jpg" width="53" height="65" />

<img src="/users/3651000/3650626/619901/img/619901_fem.jpg" width="60" height="75" />

<img src="/users/3651000/3650626/619901/img/619901_che.jpg" width="86" height="41" />

<img src="/users/3651000/3650626/619901/img/619901_sho.jpg" width="105" height="40" />

<img src="/users/3651000/3650626/619901/img/619901_sha.jpg" width="72" height="39" />
</center></div>  

<p>
 <script type="text/javascript">  
   floatingMenu.add('floatdiv',  
       {  
           // Represents distance from left or right browser window  
           // border depending upon property used. Only one should be  
           // specified.  
           // targetLeft: 0,  
           targetLeft: 900,  

           // Represents distance from top or bottom browser window  
           // border depending upon property used. Only one should be  
           // specified.  
           targetTop: 70,  
           // targetBottom: 0,  

           // Uncomment one of those if you need centering on  
           // X- or Y- axis.  
           // centerX: true,  
           // centerY: true,  

           // Remove this one if you don't want snap effect  
           snap: true  
       });  
 </script>

// PREVIOUS!!!!!!!!!!!!!

<div id="floatdiv2" style="  
   position:absolute; 
   left: -100px;
   width:52px;height:67px;   
   z-index:100">  

<center>
 <img src="/users/3651000/3650626/619901/img/619901_prev.jpg" width="52" height="67" />
</center></div>  

<p>
 <script type="text/javascript">  
   floatingMenu.add('floatdiv2',  
       {  
           // Represents distance from left or right browser window  
           // border depending upon property used. Only one should be  
           // specified.  
           // targetLeft: 0,  
           targetLeft: - 100,  

           // Represents distance from top or bottom browser window  
           // border depending upon property used. Only one should be  
           // specified.  
           targetTop: 70,  
           // targetBottom: 0,  

           // Uncomment one of those if you need centering on  
           // X- or Y- axis.  
           // centerX: true,  
           // centerY: true,  

           // Remove this one if you don't want snap effect  
           snap: true  
       });  
 </script>
 </body>

 

Shop.css:

body {
width: 1280;
}

 

 

 

I hope you can help. :/

 

Thanks a lot.

Try margin-left: something px or %;

Try margin-left: something px or %;

 

 

It worked a treat!

It worked a treat!

 

Glad I could help!

Glad I could help!

 

 

Thanks so much!

 

Now I just need to work out how to keep it exactly the same distance from the store area no matter what resolution it is in. ^^

Thanks so much!

 

Now I just need to work out how to keep it exactly the same distance from the store area no matter what resolution it is in. ^^

 

Use %.

That way if you set it to margin-left: 10%; then it would be 10% away from the side of the screen on every single resolution; therefore being the same!

Use %.

That way if you set it to margin-left: 10%; then it would be 10% away from the side of the screen on every single resolution; therefore being the same!

 

 

Ahh, so, Could I do, "margin-left: 10%;" and then do "margin-left:30%;" or something on the actual store and then "margin-left:50%" for the scroll buttons on the right, then they'll always stay in the distance?

Ahh, so, Could I do, "margin-left: 10%;" and then do "margin-left:30%;" or something on the actual store and then "margin-left:50%" for the scroll buttons on the right, then they'll always stay in the distance?

 

Yup as long as all of those margin-left: %;'s are in different CSS classes.

 

so:

.store {
margin-left: blah%;
}

.scrollbuttons {
margin-left: blah%;
}

 

Because obviously this wouldn't work:

 

.something {
margin-left: 10%;
margin-left: 30%;
margin-left: 50%;
}

 

Don't ask why I even mentioned that, because it's common sense really :L

Yup as long as all of those margin-left: %;'s are in different CSS classes.

 

so:

.store {
margin-left: blah%;
}

.scrollbuttons {
margin-left: blah%;
}

 

Because obviously this wouldn't work:

 

.something {
margin-left: 10%;
margin-left: 30%;
margin-left: 50%;
}

 

Don't ask why I even mentioned that, because it's common sense really :L

 

Hahahahaha, yeah, I get you. I'll give it a go later and see what I can do. I may come running back crying though. :3