Create a Max and Min For a Div Element Style "Top" That Makes onclick Function Inactive

Question

I have a ticketing plugin that I am working with that provides an html table of events. I want that table to appear scrollable through the events by clicking up and down arrows. Therefore, I have put the table behind a div that has the overflow hidden only showing 3 events in the div.

I then created some code that allows the top arrow and bottom arrow to add or subtract to the div element style's "top" in order to move the table up and down behind the restricted div.

The issue is the user can keep hitting the top and down arrow beyond the table's visibility. Meaning if the user hits the top arrow too many times the table essentially disappears to the user. I am hoping to achieve some JavaScript that says if the div element reaches top:0px then to disallow the top arrows click function. If the div element reaches top: -434px then it disallows the bottom arrow function.

These functions would then have to become active again once they are no longer those specific max and min values. I have created a rough codepen demonstration here: https://codepen.io/TheBrandsmen/pen/JjdEQgj

It does not have quite all the CSS and such but the general idea is there. If there is another better idea on how to make an html table scrollable please feel free to comment with that as well.




 


    
                                
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Runaway June                            
                                            
                    
                                            
                    
                                                                             Feb 29
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Clay Walker                            
                                            
                    
                                            
                    
                                                                             Mar 06
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Clay Walker                            
                                            
                    
                                            
                    
                                                                             Mar 07
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                JASON BOLAND & THE STRAGGLERS                            
                                            
                    
                                            
                    
                                                                             Mar 13
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Jerrod Niemann                            
                                            
                    
                                            
                    
                                                                             Mar 20
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Josh Gracin                            
                                            
                    
                                            
                    
                                                                             Mar 27
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                Aaron Lewis                            
                                            
                    
                                            
                    
                                                                             Mar 28
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                COPPER CHIEF                            
                                            
                    
                                            
                    
                                                                             Apr 03
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                106.7 The Bull Birthday Bash with Michael Ray and Carly Pearce                            
                                            
                    
                                            
                    
                                                                             Apr 08
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
                        
                                
                    
                                            
                    
                                                                    
                    
                                            
                    
                                                    
                                RAYNE JOHNSON                            
                                            
                    
                                            
                    
                                                                             Apr 17
                                                                                            
                    
                                            
                    
                                            
                    

                    
                    
                        
                                                        
                        
                                                            
                    
                
            
    

    


    
        
                            « Previous
                        |
            Page:
                                                1
                                                                2
                                        |
                            Next »

body {
  background: gray;
}

.slider-flex-2 tr:nth-child(odd), .slider-flex-2 .pricing-table>li:nth-child(odd), .slider-flex-2 .pricing-extra {
    background: transparent !important;
}

.main_color tr:nth-child(even) {
        background: transparent !important;
}

.slider-flex-2 table {
    background: transparent !important;
}

.slider-flex-2 tr th:first-child, .slider-flex-2 tr td:first-child {
    border: none;
}

.slider-flex-2 td {
    display: flex;
    justify-content: center;
}

td {
    display: flex;
}

.slider-flex-2 .tw-paginate {
    display: none;
}

.slider-flex-2 .tw-plugin-upcoming-event-list a {
    color: #ffffff;
}


span.tw-event-date {
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
}

span.tw-event-date:before {
    content: "-";
    padding-right: 10px;
}

.tw-event-name.tw-remove-when-empty {
    max-width: 20vw;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
}



.move-up {
    margin-top: -47px;
    transition: 1s;
        font-size: 40px;
}

.move-down {
    margin-top: 47px;
    transition: 1s;
        font-size: 40px;
}


.carousel-frame {
    height: 185px;
    overflow: hidden;
}

.tw-plugin-upcoming-event-list {
    position: relative;
    top:0px;
}

.tw-plugin-upcoming-event-list td {
        padding: 16px 12px;
}

.tw-plugin-upcoming-event-list span.tw-event-date {
    white-space: nowrap;
}


.tw-plugin-upcoming-event-list td {
    border-bottom: 1px solid #ffffff !important;
}


#tw-plugin-upcoming-event-list  {
        position: relative;
    top:0px;
}


.up-arrow {
    margin-bottom: 20px;
      max-width: 20vw; 
}

.up-arrow img {
    margin: auto;
    display: block;
}



.down-arrow {
    margin-top: 20px;
    max-width: 20vw; 
}

.down-arrow img {
  margin: auto;
    display: block;
}



$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) - 62 + "px";
            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) + 62 + "px";
            }

user_12953751 · Answer

Made the change for you all I did is to check the div current top and according to table height



$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");
              var tableOffset = 150; // teh offest until the end the height is  a bit bigger
              var top =  parseInt(div.style.top)
              var tblStyle =getComputedStyle(div.querySelector('table'))
              var tblHeight = parseInt(tblStyle.height)
              if(top  < ((tblHeight -tableOffset )*-1) ){ // chcek if the top is at the end of the table height
                div.style.top = parseInt(div.style.top)+ "px";
              }else{
                div.style.top = parseInt(div.style.top) - 62 + "px";
              }

            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");
              var top =  parseInt(div.style.top)
                if(top  == 0 ||top > 0){ // check if the the top is 0 or bigger then 0 and make it the same top as before

                                  div.style.top = top + "px";

                }
              else{
                                div.style.top = top + 62 + "px";

              }
            }

Create a Max and Min For a Div Element Style "Top" That Makes onclick Function Inactive

1 Answers