#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    67
    Rep Power
    21

    Help with adding scroll bar/effects to existing jQuery script


    I have a Search Form that works successfully, and is using this jQuery plug-in code:

    Code:
     <script>
    $(document).ready(function(){
    $("select.ui-select").selectWidget({
    change: function(changes) {
    
    var channel_id = changes;
    var Parent = $('select[name=sub_category]').parent();
    
    Parent.html('<select  name="sub_category"><option value="All">Sub Category</option></select>');
    
    $.ajax({
    type: "POST",
    url: "/ajax.php",
    data: "channel_id="+channel_id,
    dataType: 'json',
    statusCode: {
    200: function(data) {
    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>");
    }
    }
    }
    });
    return changes;
    },
    effect: "slide",
    keyControl: true,
    speed: 200,
    scrollHeight: 120
    });
    });
    </script>
    I've attached a few images for visual aid. SearchForm1.png shows the Search Form.

    As you can see in (SearchForm2.png), when the Category is selected it drops down a list and the jquery scroll bar.

    After a Category is selected and then the Sub-Category is selected, the list comes down, but no jQuery scroll bar (SearchForm3.png).

    I'm not sure, but this line:

    Code:
    var Parent = $('select[name=sub_category]').parent();
    maybe should be like this instead:

    Code:
    var Parent = $('select[name=channel]').parent();
    AND then some additional sub-category function should be added (maybe), something like this, possibly:

    Code:
    function ??????????? ()
           {
               $('select[name=sub_category]').selectWidget({
                   change       : function (changes) {
                       return changes;
                   },
                   effect       : "slide",
                   keyControl   : true,
                   speed        : 200,
                   scrollHeight : 200
               });
           }
    so, that the sub-category has its own scroll bar/effects.
    I believe this script just needs the sub-category to have its own:

    Code:
    effect: "slide",
    keyControl: true,
    speed: 200,
    scrollHeight: 120
    I look forward to your thoughts/suggestions/solutions.

    ok, well it looks like I'm having trouble uploading SearchForm2.png here

    SearchForm1.png

    SearchForm3.png
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    351
    Rep Power
    0
    What happened when you tried to make the changes you suspect should be made?

IMN logo majestic logo threadwatch logo seochat tools logo