Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.09.2013, 08:59
Новичок на форуме
Отправить личное сообщение для cannabis Посмотреть профиль Найти все сообщения от cannabis
 
Регистрация: 12.09.2013
Сообщений: 3

перемещение scroll'а вправо внутри div'а
Добрый день уважаемые,

Помогите решить проблему, никак не получается сдвинуть автоматически скроллер направо, когда появляется четвертый блок select, чтобы было видно четвертый блок полностью (возможен также и пятый блок)

HTML-код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.chained.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
             jQuery("#cats2").chained("#cats1");
             jQuery("#cats3").chained("#cats2");
             jQuery("#cats4").chained("#cats3");
});
</script>


<form action="/my/category/action" method="post">

<div style="overflow-x: auto; width: 500px; height: 210px; white-space: nowrap;">
<select id="cats1" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
                <option value="296">Agriculture</option>
                <option value="297">Apparel</option>
                <option value="298">Automobiles & Motocycles</option>
</select>
<select id="cats2" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="344" class="296">Grain</option>
</select>
<select id="cats3" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="345" class="344">Rice</option>
</select>
<select id="cats4" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="354" class="345">Other Rice</option>
</select>

</div>

<br />
<button class="btn btn-primary">Change category</button>
</form>


jquery.chained.js:

/*
* Chained - jQuery non AJAX(J) chained selects plugin
*
* Copyright (c) 2010-2013 Mika Tuupola
*
* Licensed under the MIT license:
* [url]http://www.opensource.org/licenses/mit-license.php[/url]
*
* Project home:
* [url]http://www.appelsiini.net/projects/lazyload[/url]
*
* Version: 0.9.4
*
*/

;(function($, window, document, undefined) {
    "use strict";
    
    $.fn.chained = function(parent_selector, options) {
        
        var settings = $.extend( {}, $.fn.chained.defaults, options);
        
        return this.each(function() {
            
            /* Save this to self because this changes when scope changes. */
            var self = this;
            var backup = $(self).clone();
                        
            /* Handles maximum two parents now. */
            $(parent_selector).each(function() {
                                                
                $(this).bind("change", function() {
                    $(self).html(backup.html());

                    /* If multiple parents build classname like foo\bar. */
                    var selected = "";
                    $(parent_selector).each(function() {
                        selected += "\\" + $(":selected", this).val();
                    });
                    selected = selected.substr(1);

                    /* Also check for first parent without subclassing. */
                    /* TODO: This should be dynamic and check for each parent */
                    /* without subclassing. */
                    var first = $(parent_selector).first();
                    var selected_first = $(":selected", first).val();
                
                    $("option", self).each(function() {
                        /* Remove unneeded items but save the default value. */
                        if (!$(this).hasClass(selected) &&
                            !$(this).hasClass(selected_first) && $(this).val() !== "") {
                                $(this).remove();
                        }
                    });

                    /* If we have only the default value disable select. */
                    if (1 === $("option", self).size() && $(self).val() === "") {
                        $(self).hide();
                    } else {
                        $(self).show();
                    }
                    $(self).trigger("change");
                });
                
                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }
      
                /* Force updating the children. */
                $(this).trigger("change");

            });
        });
    };
    
    /* Alias for those who like to use more English like syntax. */
    $.fn.chainedTo = $.fn.chained;
    
    /* Default settings for plugin. */
    $.fn.chained.defaults = {};
    
})(jQuery, window, document);


гуглинг ничего не дал подходящего, в самом JS я не силен

заранее благодарен за ответы

Последний раз редактировалось devote, 12.09.2013 в 12:54. Причина: replace to html tag
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2013, 11:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,292

Сообщение от cannabis
сдвинуть автоматически скроллер направо, когда появляется четвертый блок select, чтобы было видно четвертый блок полностью (возможен также и пятый блок)
... и десятый и сотый

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
(function (a, h, k, l) {
    a.fn.chained = function (e, f) {
        a.extend({}, a.fn.chained.defaults, f);
        return this.each(function () {
            var b = this,
                f = a(b)
                    .clone();
            a(e)
                .each(function () {
                    a(this)
                        .bind("change", function () {
                            a(b)
                                .html(f.html());
                            var c = "";
                            a(e)
                                .each(function () {
                                    c += "\\" + a(":selected", this)
                                        .val()
                                });
                            var c = c.substr(1),
                                d = a(e)
                                    .first(),
                                g = a(":selected", d)
                                    .val();
                            a("option", b)
                                .each(function () {
                                    a(this)
                                        .hasClass(c) || a(this)
                                        .hasClass(g) || "" === a(this)
                                        .val() || a(this)
                                        .remove()
                                });
                            1 === a("option", b)
                                .size() && "" === a(b)
                                .val() ? a(b)
                                .hide() : (a(b)
                                    .show(), d = b.parentNode.scrollWidth - b.parentNode.offsetWidth, 0 < d && a(b)
                                    .parent()
                                    .scrollLeft(d));
                            a(b)
                                .trigger("change")
                        });
                    a("option:selected", this)
                        .length || a("option", this)
                        .first()
                        .attr("selected", "selected");
                    a(this)
                        .trigger("change")
                })
        })
    };
    a.fn.chainedTo = a.fn.chained;
    a.fn.chained.defaults = {}
  })(jQuery, window, document);
  </script>
  <script type="text/javascript">
jQuery(document).ready(function(){
             jQuery("#cats2").chained("#cats1");
             jQuery("#cats3").chained("#cats2");
             jQuery("#cats4").chained("#cats3");
  });
  </script>
</head>

<body>
  <form action="/my/category/action" method="post">
    <div style="overflow-x: auto; width: 500px; height: 210px; white-space: nowrap;">
      <select id="cats1" size="10" name="primary_category_id[]">
        <option selected value="">
          Select category
        </option>

        <option value="296">
          Agriculture
        </option>

        <option value="297">
          Apparel
        </option>

        <option value="298">
          Automobiles & Motocycles
        </option>
      </select> <select id="cats2" size="10" name="primary_category_id[]">
        <option selected value="">
          Select category
        </option>

        <option value="344" class="296">
          Grain
        </option>
      </select> <select id="cats3" size="10" name="primary_category_id[]">
        <option selected value="">
          Select category
        </option>

        <option value="345" class="344">
          Rice
        </option>
      </select> <select id="cats4" size="10" name="primary_category_id[]">
        <option selected value="">
          Select category
        </option>

        <option value="354" class="345">
          Other Rice
        </option>
      </select>
    </div><br>
    <button class="btn btn-primary">Change category</button>
  </form>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2013, 12:21
Новичок на форуме
Отправить личное сообщение для cannabis Посмотреть профиль Найти все сообщения от cannabis
 
Регистрация: 12.09.2013
Сообщений: 3

Работает, огромное спасибо!

Для меня этот фрагмент кода темный лес. А есть ли что-то такое в jQuery? И если есть, то каким запросом гуглить это?
Ответить с цитированием
  #4 (permalink)  
Старый 12.09.2013, 13:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,292

Сообщение от cannabis
А есть ли что-то такое в jQuery? И если есть, то каким запросом гуглить это?
а это не jQuery? это ваш код только добавлен скролл в право
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение скролла внутри блока DarkDiabolik Events/DOM/Window 7 23.06.2012 15:15
css3 размер scroll'а у div'а cmygeHm (X)HTML/CSS 9 29.03.2011 20:05
Перемещение div внутри другого Danila74 jQuery 1 24.09.2009 16:31