lost_in_magento lost_in_magento - 6 months ago 10
HTML Question

Codrops - Select Inspiration and Bootstrap

I'm using Bootstrap and Codrops -Click this link for demo, I have nine divs containing select options whenever I hover over the column-1 or column-2 and so on it'll open the select options as in the demo,

My problem is, When options are opening it shouldn't overlay on the 2nd line so I gave padding bottom on the hover for all columns so that I'll get space for the showing the options of the select element, It works fine but whenever it opens it collapses the entire structure and gets the last div in the 2nd line, I tried giving display: table; for rows and display: table-cell; for columns nothing worked out

These are the entire markup

<section>
<div class="row">
<div class="col-lg-4">
<select class="column-1 cs-select cs-skin-border">
<option disabled selected value="">
Glat Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-2 cs-select cs-skin-border">
<option disabled selected value="">
URL Redirect
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-3 cs-select cs-skin-border">
<option disabled selected value="">
Campaign Registration
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-4 cs-select cs-skin-border">
<option disabled selected value="">
Users
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-5 cs-select cs-skin-border">
<option disabled selected value="">
Pixel Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-6 cs-select cs-skin-border">
<option disabled selected value="">
CRO Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-7 cs-select cs-skin-border">
<option disabled selected value="">
Your Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-8 cs-select cs-skin-border">
<option disabled selected value="">
Some Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-9 cs-select cs-skin-border">
<option disabled selected value="">
Campaign
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
</div>
</section>


JS

(function() {
[].slice.call(document.querySelectorAll('select.cs-select')).forEach(
function(el) {
new SelectFx(el);
});
})();

$(document).ready(function() {
$(".column-1").hover(function() {

//For opening the select element

$('div.column-1').addClass('cs-active');

if ($(this).hasClass('cs-active')) {

//Padding bottom for adding space for the opened element

$('div.column-1').css('padding-bottom', '80px');
}


}, function() {

//On hover out actions

$('div.column-1').removeClass('cs-active');
$('div.column-1').css('padding-bottom', '0px');
});
$(".column-2").hover(function() {
$('div.column-2').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-2').css('padding-bottom', '80px');
};

}, function() {
$('div.column-2').removeClass('cs-active');
$('div.column-2').css('padding-bottom', '0px');
});
$(".column-3").hover(function() {
$('div.column-3').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-3').css('padding-bottom', '80px');
}

}, function() {
$('div.column-3').removeClass('cs-active');
$(this).css('padding-bottom', '0px');
});
$(".column-4").hover(function() {
$('div.column-4').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-4').css('padding-bottom', '80px');
}

}, function() {
$('div.column-4').removeClass('cs-active');
$('div.column-4').css('padding-bottom', '0px');
});
$(".column-5").hover(function() {
$('div.column-5').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-5').css('padding-bottom', '80px');
}

}, function() {
$('div.column-5').removeClass('cs-active');
$('div.column-5').css('padding-bottom', '0px');
});
$(".column-6").hover(function() {
$('div.column-6').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-6').css('padding-bottom', '80px');
}

}, function() {
$('div.column-6').removeClass('cs-active');
$('div.column-6').css('padding-bottom', '0px');
});
$(".column-7").hover(function() {
$('div.column-7').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-7').css('padding-bottom', '80px');
}

}, function() {
$('div.column-7').removeClass('cs-active');
$('div.column-7').css('padding-bottom', '0px');
});
$(".column-8").hover(function() {
$('div.column-8').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-8').css('padding-bottom', '80px');
}

}, function() {
$('div.column-8').removeClass('cs-active');
$('div.column-8').css('padding-bottom', '0px');
});
$(".column-9").hover(function() {
$('div.column-9').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-9').css('padding-bottom', '80px');
}

}, function() {
$('div.column-9').removeClass('cs-active');
$('div.column-9').css('padding-bottom', '0px');
});


});

CSS

.col-lg-4 {
display: inline-block;
margin-bottom: 3%;
}

.row {
margin-left: 15px;
margin-right: 15px;
}

div.cs-skin-border {
font-size: 16px;
font-weight: 300;
}

Answer

I solved it by myself by counting the all the divs on 'mouseover' slicing it by three when screen is big and slicing it as two when screen is smaller and so on and wrapped up with another 'div' where it works perfectly for me and 'mouseout' I unwrapped and leave the divs as it is.

Here is the code

$(document).ready(function() {
loadMenus();
w = $(window).width();
});
$(window).resize(function() {
    if (w != $(window).width()) {
        console.log('window resized..');
        this.location.reload(false);
        w = $(window).width();
        delete w;
    }
});

function loadMenus() {
    var divs = $("div > div.col-lg-4:visible");
    $(".toolWrapper .col-lg-4").on('mouseover', function() {
        var screen = parseInt(parseInt($(".col-lg-4").css('width')) /
            $(window).innerWidth() * 100);
        var csOptions = $('div.cs-options').height();
        var countContent;
        if (screen >= 90) {
            countContent = 1;
        } else if (screen >= 40) {
            countContent = 2;
        } else if (screen >= 30) {
            countContent = 3;
        }
        for (var i = 0; i < divs.length; i += countContent) {
            divs.slice(i, i + countContent).wrapAll(
                "<div class='divWraper' style='width:100%;float:left;'></div>"
            );
        }
        $(this).find('div.cs-select').addClass('cs-active');

    });
    $(".toolWrapper .col-lg-4").on('mouseout', function() {
        $(".col-lg-4").unwrap();
        $(this).find('div.cs-select').removeClass('cs-active');

}