Results 1 to 2 of 2

Thread: Help with javascript code to make next and previous button dissapear

  1. #1
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with javascript code to make next and previous button dissapear

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

  2. #2
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No one???

Bookmarks

Posting Permissions

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