Create dynamic html rows using angular 5 - javascript

I'm very new to Angular, but I have a bit of java background. I'm trying to place every 4 divs in a new row, but all the divs are appending in the same row. The below one is my HTML code. How can I achieve the same through angular? The below code contains 1 row. I have to repeat the same for each row.
<div class="row startRow">
<div class="col-md-2 hidden-lg"> </div>
<div class="col-lg-3 col-md-2 shop-list" *ngFor="let shop of shops" (click)="onClick(shop.shopId)">
<i class="material-icons UnSelectedImage">check_circle</i>
<img src="{{shop.brandingImage}}" alt="{{shop.name}}" class="img-responsive orgImage" />div 1
</div>
<div class="col-lg-3 col-md-2 shop-list"> div 2</div>
<div class="col-lg-3 col-md-2 shop-list">div 3</div>
<div class="col-lg-3 col-md-2 shop-list">div 4</div>
<div class="col-md-2 hidden-lg"> </div>
</div>

Related

Angular Repeat - Complex HTML loop

I want to loop through this HTML structure
Each loop should add an image inside
Then repeat the outer elements again and continue.
I am finding it difficult to isolate the index and append the correct image in the sequence - I ahve tried modulus but goes out of sync.
I kinda need to get the repeat in chunks of 5 do this block then continue for another chunk until all is complete.... not sure how.
<span ng-repeat="node in inspiration.data track by $index">
<div class="list__row row">
<div class="col-xs-12 col-lg-3 list__medium" style="background-image: url('https://z3photorankmedia-a.akamaihd.net/media/e/e/2/ee2ju34/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-2 list__small" style="background-image: url('https://z1photorankmedia-a.akamaihd.net/media/5/a/g/5ag3i44/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-5 list__large" style="background-image: url('https://photorankmedia-a.akamaihd.net/media/4/x/v/4xv6w34/mobile.jpg');"></div>
</div>
<div class="list__row row">
<div class="col-xs-12 col-lg-offset-1 col-lg-5 list__large" style="margin-top: -8.3%; background-image: url('https://z2photorankmedia-a.akamaihd.net/media/c/d/t/cdt4i44/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-3 list__medium" style="margin-top: 8.3%; background-image: url('https://z3photorankmedia-a.akamaihd.net/media/i/y/c/iycjf34/mobile.jpg');"></div>
</div>
</span>

:first selector checks against parents parent, instead of parent container

I need to shuffle large elements inside my layout due to floating them, and trying to display them. Essentially .gallery-item with class .gallery-large always needs to be first child inside .item, there are several .item containers inside main #gallery_slideshow. At the moment if there is a large item inside second, third etc.. item it gets placed as first element inside first item, where as I want it to stay inside it's own. For example, code below results in 5 elements inside first .item with 2 large ones, instead of initial 4 elements with 1 large one.
JS:
if($('.gallery-item').length > 1) {
$('.gallery-large').each(function(e) {
if(!$(this).is(':first')) {
$(this).insertBefore('.gallery-item:first');
//Reset height of owl carousel wrapper in case moved element was last
$('.owl-wrapper-outer').css('height', 'auto');
}
});
}
HTML:
<div id="gallery_slideshow" class="owl-carousel owl-theme">
<!-- Example page 1 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
<!-- Example page 2 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
</div><!-- END #gallery_slideshow -->
You can simply do,
$(".gallery-large").each(function() {
$(this).parent().prepend(this);
});
Loop through each 'gallery-large' item
Make it as first child by using prepend() method. Prepend it to its own parent to keep the correct context.

jQuery add new div element for each 3 div element and for each 6 div element

First all i'm new on jQuery so my question is not relevant please forgive me.
I have some div elements in my Dom and i'm trying to make a book shelf for my products. I followed this fiddle and that works perfectly. But my products are coming from MySQL and i'm parsing them with foreach loop in PHP.
My HTML Looks like:
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
Question: How can i add new <div> element after each 3 <div> like;
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
And add new <div> element after each 6 <div> like;
<div class="col-xs-12 shelf"></div>
Shortly, desired HTML output;
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<!-- Here Is The After 3rd div -->
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<!-- Here Is The After 3rd div -->
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<!-- Here Is The After 6th div -->
<div class="col-xs-12 shelf"></div>
<!-- Here Is The After 6th div -->
I looked at some questions in SO some of them about wrapping every 3 element with new element. But i want to add new element.
So, Is it possible to make it with jQuery?
Thanks in advance.
PS: Sorry for my bad English.
You need to use .after() in conjunction with :nth-child() Selector
.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
:nth-child()
Selects all elements that are the nth-child of their parent.
Script
$(document).ready(function () {
$(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
$(".shelf:odd").removeClass('hidden-md hidden-lg');
});
DEMO
$(document).ready(function() {
$(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
$(".shelf:odd").removeClass('hidden-md');
$(".shelf:odd").removeClass('hidden-lg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 col-md-2 product-yarn"> 1
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 2
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 3
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 4
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 5
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 6
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 1
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 2
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 3
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 4
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 5
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 6
</div>
UPDATED :-
The jquery code you would need is
$(document).ready(function () {
$(".col-md-2").each(function (index, value) {
if ((index + 1) % 3 == 0) {
$(this).after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3rd div</div>');
}
if ((index + 1) % 6 == 0) {
$(this).after('<div class="col-xs-12 shelf">after 6th div</div>');
}
});
});
You can also check the working demo here - http://jsfiddle.net/esrab6dd/1/
(text is added within links for demo purpose , you can have it removed)
try :
$('div.col-xs-4').each(function (i, v) {
var index = parseInt($(this).index());
if ((i % 3 == 0) && (i % 6 != 0)) {
$('<div class="col-xs-12 shelf hidden-md hidden-lg"></div>').insertBefore($(this));
} else if (i / 6 != 0 && i % 6 == 0) {
$('<div class="col-xs-12 shelf"></div>').insertBefore($(this));
}
});
$('<div class="col-xs-12 shelf"></div>').insertAfter('div.col-xs-4:last');
http://www.bootply.com/GITjvbYqiq
Try this:
$(document).ready(function(){
total_elements = $(".col-xs-4.col-md-2").length;
var append_div = '<div class="col-xs-12 shelf hidden-md hidden-lg"> </div>';
for (var i=3; i<total_elements; i+3){
$(".col-xs-4.col-md-2").eq(i).append(append_div);
}
});

adding dynamically border to the nested div element using jquery

I have set of divisions.
I have to add the border to the nested div(trending-description) on clicking of the above div(trending) using jquery.
<div class="row">
<div class="col-md-2 col-xs-2 trending">
<div class="trending-description">Loan Count</div>
</div>
<div class="col-md-2 col-xs-2 trending">
<div class="trending-description">% of sample</div>
</div>
<div class="col-md-2 col-xs-2 trending">
<div class="trending-description">% of sample</div>
</div>
<div class="col-md-2 col-xs-2 trending">
<div class="trending-description">% of sample</div>
</div>
</div>
I have created JsFiddle Please tell me where have done the mistake.,
Something like this?
$(".trending").click(function () {
$('.trending-description').removeClass('trending-description-active ')
$(this).find('.trending-description').addClass('trending-description-active');
});
http://jsfiddle.net/zb14n86r/2/
$(".trending").click(function () {
$('.trending-description').removeClass('trending-description-active');
$(this).find('.trending-description').addClass('trending-description-active');
});

Change number of columns depending on screen size

I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?
Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.
Here's an example that follows your instructions:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2">first</div>
<div class="col-xs-6 col-md-4 col-lg-2">second</div>
<div class="col-xs-6 col-md-4 col-lg-2">third</div>
<div class="col-xs-6 col-md-4 col-lg-2">fourth</div>
<div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
<div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>
See Bootply Demo.
<div class="row">
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg hidden-md col-xs-4"></div>
<div class="hidden-lg hidden-md col-xs-4"></div>
</div>
<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>
It should be noted that having duplicate content in separate columns like this isn't great for SEO. You might want to instead approach this by using nested columns for more granular control over your content without having to duplicate it.

Categories

Resources