Develop Reference

Create dynamic html rows using angular 5

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>

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>

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);
}
});

FadeIn happens multiple times automatically

I my webpage I want background image to be changed each time when mouse hover happens on menu buttons. My code for it is like this
<div class="container-fluid ">
<div id="home-banner-1" class="active-banner">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-2" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg_rigging.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-3" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg-Hatches.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>The around the world.</p>
</div>
</div>
</div>
<!--content-->
<div class="container-fluid">
<div class="main-logo-panel">
<div class="box">
<div class="col-md-12 col-sm-12 ">
<div class="col-md-3 col-sm-3 col-xs-4 main-logo"><img src="images/logo_frontpage.png" class="img-responsive"></div>
<div class="col-md-9 col-sm-9 col-xs-8 main-menu">
<ul class="list-inline home-menu-list">
<li>Rigging</li>
<li>Hatches </li>
<li>Stoppers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".home-menu-list li a").hover(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').fadeOut();
$('.active-banner').removeClass('active-banner');
$(bannerClass).fadeIn();
$(bannerClass).addClass('active-banner');
});
});
</script>
everything looks okay, Except when the hover happens multiple back ground images fadeIn's not only the required one. Can any one point out what I am doing wrong here?

I think the problem is the animation queue, use .stop() to stop the execution of any previous animations in the queue
$(document).ready(function () {
$(".home-menu-list li a").mouseenter(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').not(bannerClass).stop().fadeOut().removeClass('active-banner');
$(bannerClass).stop().fadeIn().addClass('active-banner');
});
});
Also since you are not doing any operation on mouseleave, use mouseenter event directly instead of using hover

Implement Jquery show()?

How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});

This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.