Блог

Главная - Вопросы по программированию - Адаптивная высота начальной загрузки на лету для элементов, добавленных с помощью Javascript

Адаптивная высота начальной загрузки на лету для элементов, добавленных с помощью Javascript

#javascript #css #twitter-bootstrap #responsiveness

#javascript #css #twitter-bootstrap #отзывчивость

Вопрос:

Для прототипа веб-сайта я скачал бесплатный шаблон начальной загрузки, который можно найти на этом веб-сайте:http://themes.3rdwavemedia.com/demo/prettydocs/index.html

Как вы можете видеть на странице индекса шаблона, все шесть полей элементов имеют одинаковый размер, несмотря на объем их содержимого. Если мы проверим DOM с помощью Firebug, мы увидим, что каждое поле элемента определено как div :

 <div class="item item-green col-md-4 col-sm-6 col-xs-6">
    <div class=item-inner" style="height: 237px;">
        ...
    </div>
</div>

Теперь, когда я редактирую index.html страница, загруженная вместе с пакетом шаблонов, я вижу, что у этих элементов div нет предопределенной высоты. Кажется, что свойство добавляется после загрузки страницы.

Что я хочу сделать, так это сделать список ящиков динамическим в соответствии с параметром. В зависимости от значения этого параметра может быть 2, 3, 7, 15 полей, каждое с определенным значком, цветом, заголовком, содержимым и ссылкой.

В index.html файл, я добавил следующий метод onLoad, связанный с персональным файлом Javascript : 

 <body class="landing-page" onload="addItemBoxes()">

Затем в моем файле Javascript у меня есть несколько функций для определения списка добавляемых блоков, а затем я использую цикл, вызывающий функцию, подобную этой : 

 function addBox(boxId) {
    var boxDetails = getBoxDetails(boxId);
    /*
    Example of boxDetails content : 
    {
        boxId : "1",
        boxTitle : "Cars",
        boxDescription : "This is a page that talks about cars",
        boxIcon : "fa-automobile",
        boxIconSource : "font-awesome",
        boxLink : "cars.html"
    }
    */

    if (boxDetails) {
        //Main div
        var cardsWrapperDiv = document.getElementById("cards-wrapper");

        //Get color from the global var
        var nbrOfItems =  cardsWrapperDiv.getElementsByClassName("item").length;
        var nbrOfColors = COLORS.length;
        var colorIndex = nbrOfItems % nbrOfColors;
        var color = COLORS[colorIndex];

        //Create the box
        var itemDiv = document.createElement("div");
        itemDiv.className = "item "   color   " col-md-4 col-sm-6 col-xs-6";

        //Content of the box
        var innerItemDiv = document.createElement("div");
        innerItemDiv.className = "item-inner";

        //Icon
        var iconHolderDiv = document.createElement("div");
        iconHolderDiv.className = "icon-holder";
        if (boxDetails.boxIconSource == 'font-awesome') {
            var i = document.createElement("i");
            i.className = "icon fa "   boxDetails.boxIcon;
            iconHolderDiv.appendChild(i);
        } else if (boxDetails.boxIconSource == 'elegant_font') {
            var iconSpan = document.createElement("span");
            iconSpan.setAttribute("aria-hidden", "true");
            iconSpan.className = "icon "   boxDetails.boxIcon;
            iconHolderDiv.appendChild(iconSpan);
        } else {
            console.log("No icon!");
        }        
        innerItemDiv.appendChild(iconHolderDiv);

        //Title
        var h3 = document.createElement("h3");
        h3.className = "title";
        h3.innerText = boxDetails.boxTitle;
        innerItemDiv.appendChild(h3);

        //Description
        var p = document.createElement("p");
        p.className = "intro";
        p.innerText = boxDetails.boxDescription;
        innerItemDiv.appendChild(p);

        //Link
        var a = document.createElement("a");
        a.className = "link";
        a.href = boxDetails.boxLink;
        var span = document.createElement("span");
        a.appendChild(span);
        innerItemDiv.appendChild(a);

        itemDiv.appendChild(innerItemDiv);
        cardsWrapperDiv.appendChild(itemDiv);
    }
}

Код работает нормально, за исключением того, что полям не назначена высота стиля. Когда я проверяю их с помощью Firebug, я вижу их определение, такое как :

 <div class="item item-green col-md-4 col-sm-6 col-xs-6">
    <div class=item-inner">
        ...
    </div>
</div>

Следовательно, их высота зависит от длины содержимого, и это совсем не красиво…

Я подозреваю, что высота назначается одним из скриптов, на которые ссылаются в нижней части index.html код : 

 <script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>

Но я понятия не имею, как их вызывать, чтобы проблема с высотой была устранена. Большое вам спасибо за вашу помощь!

Ответ №1:

Если вы хотите добавить стиль в div с помощью javascript, вы можете использовать:

 //Content of the box
var innerItemDiv = document.createElement("div");
innerItemDiv.className = "item-inner";
innerItemDiv.style.height="237px"; // This is the line to add

Не тестировал код, но я думаю, что это должно сработать.

Комментарии:

1. Значение «237» не является фиксированным. Из-за адаптивной природы сайта, если я изменяю размер окна, чтобы оно соответствовало экрану планшета или мобильного телефона, высота адаптируется. Я думаю, добавление этого параметра в качестве свойства div сделает его постоянным, что не является ожидаемым поведением.

2. @nouklea Если вы хотите сделать его адаптивным более простым способом, тогда используйте медиа-запросы в вашем css. Однако, если вы все еще хотите сделать это на javascript, вы можете изменить это значение в зависимости от размера экрана с помощью window. увеличьте размер и замените высоту новым значением.

Ответ №2:

Вы можете попробовать выполнить автоматическое переполнение или использовать имена / идентификаторы классов bootstrap elements для настройки размера. Также есть возможность выполнять запросы nedia

Ответ №3:

Я нашел в main.js скрипт, связанный с шаблоном этими несколькими строками : 

 /* ======= jQuery Responsive equal heights plugin ======= */
/* Ref: https://github.com/liabru/jquery-match-height */

 $('#cards-wrapper .item-inner').matchHeight();
 $('#showcase .card').matchHeight();

Если я добавлю два вызова jquery в конце моей личной функции addBox, это сработает. Все новые поля имеют одинаковый размер, который правильно настраивается при изменении размера экрана.

Спасибо вам всем за вашу помощь.