Help with javascript code to make next and previous button dissapear

[ajmancilla]

Hi folks.
I need some help writing a JavaScript code to make the next and previous buttons disappear when there is no more to scroll.

Since it is all dynamic i need to make the JavaScript read the margins and width of the slide (inline which are created dynamically) and depending on that it will show or not the buttons. (hope I'm explaining myself)

So here is the logic;


LEFT BUTTON: (ID="prevBtn")

get the value of "margin-left" (inline style) in the div with ID="ppslider"

If its 0 or nothing then not visible
Else visible

RIGHT BUTTON: (ID="nextBtn")

get value of "width" (inline style) in div with ID="ppslider"
get the value of "margin-left" (inline style) in the div with ID="ppslider"

If margin-left is 0 or nothing and width>970 then show

Else
var x = margin-left / (divided) -970
var total width = ppslider width(inline) / (divided) 970
If x<total width then show


THE CODE

<div id="slider" class="jshop_list_product">
    <ul id="ppslider" class="jshop" style="margin-top:0px width: 970px; height: 582px; overflow: hidden;">

This is what i started with but it is probably wrong and definitely incomplete

<script language="javascript" type="text/javascript">


function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}


var mydiv = document.getElementById("ppslider");
var curr_width = parseInt(getStyle(mydiv, "width"));
var curr_marginLeft = parseInt(getStyle(mydiv, "marginLeft"));


if (curr_width == 968)
   {
		document.getElementById("prevBtn").style.display="none";
		
	}

 </script>

You can see the site here to have a better idea of what i want to do.
http://t.bluelightit.com/index.php?o...&category_id=1


Thank you all for you help in advance

[ajmancilla]

No one???