Web Analytics Made Easy -
StatCounter Trying to add a scroll bar for a long drop down list - CodingForum

Announcement

Collapse
No announcement yet.

Trying to add a scroll bar for a long drop down list

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to add a scroll bar for a long drop down list

    I'm trying to add a scroll feature to a long drop-down menu list, and I came across this:

    Code:
    <script>
    $(function(){
    
        $(".dropdown > li").hover(function() {
    
             var $container = $(this),
                 $list = $container.find("ul"),
                 $anchor = $container.find("a"),
                 height = $list.height() * 1.1,       // make sure there is enough room at the bottom
                 multiplier = height / maxHeight;     // needs to move faster if list is taller
    
            // need to save height here so it can revert on mouseout
            $container.data("origHeight", $container.height());
    
            // so it can retain it's rollover color all the while the dropdown is open
            $anchor.addClass("hover");
    
            // make sure dropdown appears directly below parent list item
            $list
                .show()
                .css({
                    paddingTop: $container.data("origHeight")
                });
    
            // don't do any animation if list shorter than max
            if (multiplier > 1) {
                $container
                    .css({
                        height: maxHeight,
                        overflow: "hidden"
                    })
                    .mousemove(function(e) {
                        var offset = $container.offset();
                        var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                        if (relativeY > $container.data("origHeight")) {
                            $list.css("top", -relativeY + $container.data("origHeight"));
                        };
                    });
            }
    
        }, function() {
    
            var $el = $(this);
    
            // put things back to normal
            $el
                .height($(this).data("origHeight"))
                .find("ul")
                .css({ top: 0 })
                .hide()
                .end()
                .find("a")
                .removeClass("hover");
    
        });
    
        // Add down arrow only to menu items with submenus
        $(".dropdown > li:has('ul')").each(function() {
            $(this).find("a:first").append("<img src='images/down-arrow.png' />");
        });
    
    });
    </script>
    But, I don't know how to integrate it with my successfully working Form code:

    Code:
    <script type="text/javascript">
    		$(document).ready(function() {
    		$("select[name='channel']").change(function() {
    		var channel_id = $(this).val();
    
    		console.log(channel_id);
    
    		$.ajax({
    		    type: "GET",
    		    url: "/ajax.php",
    		    data: "channel_id="+channel_id,
    		    success: function(data) {
    		    data = JSON.parse(data);
    		    $("select[name='sub_category']").html('<option value="All">Optional</option>');
    		    for(i = 0; i < data.length; i ++) {
    		    $("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
    		    }
    		    }
    		    });
    		});
    		});
    		</script>
    Any help will be appreciated.

  • #2
    Can you not just define the height of your <ul> element in your css code ?
    Something like this:
    Code:
     
    #dropDown li ul {
        height: 50px;
    }

    Comment


    • #3
      Thanks for your reply.
      But, the Form's sub-category gets it's data via the db via ../ajax.php, I believe, not from a ul list:

      Code:
      <form method="get" action="../search.php">
      <table class="table">
      <tr>
      <td>
      <input id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')" value="" />
      </td>
      <td>
      <select size="1" name="channel" class="dropdown">
      <option value="">SELECT</option>
      <option value="All">ALL</option>
      <option value="1">Channel1</option>
      <option value="2">Channel2</option>
      </select>
      </td>
      <td>
      <select size="1" name="sub_category" class="dropdown">
      <option value="All">OPTIONAL</option>
      </select>
      </td>
      <td>
      <input type="submit" value="VIEW">
      </td>
      </tr>
      </table>
      </form>
      Any help with a scroll bar for the sub-category drop-down list (and a height limit on that) will be appreciated.

      Comment


      • #4
        Originally posted by chrisjchrisj View Post
        Thanks for your reply.
        But, the Form's sub-category gets it's data via the db via ../ajax.php, I believe, not from a ul list:
        It doesn't make any difference to the HTML and CSS where the data comes from. If it is a selection list then it uses a <select> and puts the entries in <option> tags and gets a scrollbar automatically when required.
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment


        • #5
          You cannot change the built-in behavior of the SELECT element. Look into size attribute.
          Rethink how your doing this. Maybe a div with max-height and overflow-y(???)
          Last edited by sunfighter; Sep 24, 2016, 06:17 PM.
          Evolution - The non-random survival of random variants.
          Physics is actually atoms trying to understand themselves.

          Comment

          Working...
          X