How i can iterate over nested section elements?

How i can iterate over nested section elements? - javascript

Hi I have the next strucutre in a web:
<section class="item-list clearfix jq-itemList">
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>
How I can iterate over the nested sections inside the parent section with pure javascript?
I tried with something like:
document.getElementById("section").getElementsByTagName("section");
but is not working, what is the best approach?
Thanks!

Use queryselector and use css selector section section :
document.querySelectorAll('section section').forEach(e => {
const id = e.getAttribute('data');
console.log(id);
});
<section class="item-list clearfix jq-itemList">
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>
Keep in mind that id should be unique to the element, you might want to consider changing the ids of the sections.

Using non unique id is illegal and will cause many problems. Use name attribute instead with querySelector
sections= document.querySelectorAll('section section[name=cart-section]');
sections.forEach(s=> console.log(s.getAttribute('data')) );
sections = document.querySelectorAll('section section[name=cart-section]');
sections.forEach(s => console.log(s.getAttribute('data')));
<section class="item-list clearfix jq-itemList">
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>

Related

OnClick on Tab button in keyboard not highlighting all the buttons or hyperlink in a DOM

There is a requirement here is when we click on Tab Button then on a browser it should highlight all the hyperlink ToolTip and button,
for for me in some case while clicking om tab key it is skipping some part of DOM and skipping some part of button.
How to achieve this
`<div class="tech-section" id="specs-1-0-0">
<div class="row heading-row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
<h3>Essentials</h3>
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-3 col-xl-3 export-container">
<a class="export-link" role="button" data-user-exit="SingleExport">Export Specifications
<span class="fa-arrow-right"></span></a>
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Collection
</div>
<div class="col-xs-6 col-lg-6 tech-data">
9 Series
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Code Name
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Mansion Beach
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Capacity
</div>
<div class="col-xs-6 col-lg-6 tech-data">
1.5 TB
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Status
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Launched
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Launch Date
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true">
<span class="fa-tooltip"></span>
</button>
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Q3'18
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Lithography Type
</div>
<div class="col-xs-6 col-lg-6 tech-data">
3D
</div>
</div>
</div>`
like that we have some page: Now when I click on Tab on a page then starting from header it is highlighting all the parts now when it comes to the above loop while clicking Tab key it highlight the line Mansion Beach but when again click on tab it moves out of this and goes to footer
instead it should also highlight Launch Date i.e. we can see in the bottom there is a button that is
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true"> <span class="fa-tooltip"></span> </button>
But it is not highlighting.
Can anyone help me with the concept like how this "tab key press" works and also how to resolve the above problem

You can check that does text-decoration: none is implemented on the :focus or :focus-visible of that element where Tab highlighting not working?
NOTE: Internet Explorer and Safari don't support:focus-visible.

wrap all elements after each specific tag

I need to wrap all divs after each h4 tag so then i can modify the column size depending on the results.
As is:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
To be:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
</div>
What I tried:
$(" h4.hotels-area").each(function(){
$(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});
When I do this it messed up my HTML. I do not have access to the html so i need to do it this way, once i wrap then i will count how many div are into the description-wrap class, but I can't get to wrap.
I thought on wrapping because what i need is to be able to count how many col-md-6 col-sm-12 col-xs-12 padding-banner-left are after each h4 and if the result is an unpaired number the first col-md-6 col-sm-12 col-xs-12 padding-banner-left i will change the cols to col-md-12 without knowing how col-md-6 col-sm-12 col-xs-12 padding-banner-left i have after each h4 i won't be able to achive my goal

You could add a div.description-wrap after each h4 tag inside .bannerPrincipales (with the jQuery.after function).
Then, you could cycle each div inside .bannerPrincipales, and say:
if it has description-wrap class, then it will be the wrapper;
else append it inside wrapper (with the jQuery.append function).
And, finally, you could count the number of divs inside wrapper with the length property.
$(function () {
$('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
let wrapper = null;
$('.bannerPrincipales div').each((i, div) => {
if ($(div).hasClass('description-wrap')) {
wrapper = div;
} else {
$(wrapper).append(div);
}
});
$('.bannerPrincipales .description-wrap').each((i, wrapper) => {
let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
let n = $(wrapper).find('div').length;
console.log(place + ' has ' + n + ' divs');
});
});
.description-wrap {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>

Auto Increment HTML class/ID to differentiate between divs

I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.

Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});

This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

How to vertically AND horizontally align img inside div?

I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!

Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>

Metro tile layout with Bootstrap?

I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>

It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!

Develop Reference

JavaScript is the programming language of the Web.

How i can iterate over nested section elements? - javascript

Related

OnClick on Tab button in keyboard not highlighting all the buttons or hyperlink in a DOM

wrap all elements after each specific tag

Auto Increment HTML class/ID to differentiate between divs

How to vertically AND horizontally align img inside div?

Metro tile layout with Bootstrap?

Categories

Resources