hello guys is there any way to add additional div on ng-repeat.
<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
</div>
i want to add <div class="clearfix"> everythime its loop 2 times
like this
<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
<div ng-if="$index % 2 == 0">
<div class="clearfix"></div>
</div>
</div>
so to sum it up after loop 2 times just under closed div for cols it will add a new div class clearfix. is it possible?
Your ng-if is outside the ng-repeat. Update based on your comment, add another div that will wrap the clearfix div and service div.
<div class="row">
<div ng-repeat="service in services">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
<div ng-if="$index % 2 == 0">
<div class="clearfix"></div>
</div>
</div>
</div>
Related
I am learning vue.js. I would like to pass the value of a rel attribute of an image to a method but I am unable to do that.
This is my html code:
<template>
<div>
<div class="row justify-content-center align-items-center">
<img src="images/retro.jpg" class="card img-fluid" id="pc_left" rel="0">
<img src="images/retro.jpg" class="card img-fluid" id="pc_center" rel="0">
<img src="images/retro.jpg" class="card img-fluid" id="pc_right" rel="0">
</div>
<div class="row">
<div class="col-3 d-flex justify-content-start">
<img src="images/retro.jpg" class="card img-fluid" id="pack_cards" rel="0">
</div>
<div class="col-6 d-flex justify-content-center">
<img src="images/retro.jpg" class="card img-fluid invisible" id="pc_game" rel="0">
<img src="images/retro.jpg" class="card img-fluid invisible" id="player_game" rel="0">
</div>
<div class="col-3 d-flex justify-content-end">
<img src="images/retro.jpg" class="card img-fluid" id="game_briscola" rel="0">
</div>
</div>
<div class="row justify-content-center align-items-center">
<img #click="play($event)" src="images/retro.jpg" class="card img-fluid" id="player_left" rel="5">
<img #click="play($event)" src="images/retro.jpg" class="card img-fluid" id="player_center" rel="6">
<img #click="play($event)" src="images/retro.jpg" class="card img-fluid" id="player_right" rel="7">
</div>
</div>
</template>
This is my js function:
play(event) {
var target_id = "#" + event.target.id;
alert(event.target.rel); //here not working
var src_image = this.num_to_src(event.target.rel);
$(target_id).addClass("invisible").removeClass("visible");
$("#player_game").addClass("visible").removeClass("invisible");
$("#player_game").attr("src", src_image);
$("#player_game").attr("rel", event.target.rel);
}
When I try to alert the id or the src everything works fine... but when I alert the rel appears an alert with undefined (I should see a number). No errors appear in the developer tools.
Can someone help?
You can use getAttribute
event.target.getAttribute("rel")
I am working in an Angular4 application,In this I have a carousel were I show the products and product name and price .Currently I have 6 products (3+3).I have 2 buttons if I clicked on left carousel will show 3 products from left side for right button will show 3 products from right ride.
The problem is when I add a new product carousel generate a new row instead showing like in the line of products.
How to resolve is .
HTML
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>iPhone</span>
<br>
<br>
3433 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname>Indian Spices</span>
<br>
<br>
747 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In stackblitz, there's no button to add a new product. Either you are adding the new product manually or the code is missed from the solution.
If adding manually, possibly you are adding it as a new row instead of another column. Since you are using bootstrap layout, your code divides the screen area in 12 parts, and each image is using 4 parts (sm-12, sm-4 respectively). Now when you add another product, that creates a new row since there's no space remaining in the current row.
To fix this out, rather than giving part by part allocation, give a fixed size to each product card, and then let the whole scroll horizontally.
Or, create another sm-12 row (3rd carousal) and add elements to it. You will be required to create a component hosting 3 products and each left/right button will cycle in the main carousal. Any product addition will go in the empty component and once filled, will create another instance to host the product.
--- pseudo code below, customize with actual values ----
#Component( {} }
export class ProductsContainerComponent {
products: Product[]
// template shows 3 products
}
#Component()
export class ProductCarousalComponent {
carousal: ProductsContainerComponent[]
btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed
addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
{ container = new ProductsContainerComponent(); carousal.push (container); }
// construct your new product here (url, images, text etc)
container.products.push (new Product() );
}
I m just hided the section 3 which contains #sec3 id. I m trying to do that whenever i going to live search if searchable content is in section 3 it will be shown or visible. Please anybody suggest me or help me to make that content visible. I m just posted only the #sec2 and #sec3 css not the hold css because it crosses the writing limit. So please help me. Thanks in Advance....
here is the html
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand" onclick="w3_open()"><i class="fas fa-bars"></i></div>
<div class="nav navbar-nav navbar-right">
<input type="text" class="live-search-box" placeholder="Search...">
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<center>
<div>
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</center>
</div>
</nav>
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none;" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<!-- Page Content -->
<section id="sec2">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
<h4>John Doe</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
<h4>Steve John</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
<h4>John Cenna</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
<h4>Mark William</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
<h4>William Wordssmith</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
<h4>Jason Wathson</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
<h4>Jimmy Coogan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
<h4>Mark Zuckerberg</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="sec3">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
<h4>Hrithik Roshan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
<h4>Salman Khan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
<h4>Shahid Kapoor</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
<h4>Dibendu Mondal</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
<h4>Sudip Barik</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
<h4>Masum Abdulla</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
<h4>Debabrata Maji</h4>
</div>
</div>
</div>
</div>
</div>
</section>
Css
#sec2{
position: relative;
width: 100%;
top: 80px;
display: block;
}
#sec3{
position: relative;
width: 100%;
top: 80px;
display: none;
}
Jquery
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parent().parent().show();
} else {
$(item).parent().parent().hide();
}
});
});
});
Try this on your js:
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parentsUntil('#sec3').parent().find('#sec3').hide();
$(item).parent().parent().show();
} else {
$(item).parentsUntil('#sec3').parent().find('#sec3').show();
$(item).parent().parent().hide();
}
});
});
});
The code below shows 3 images per row for desktops. When viewed on a mobile phone it shows 2 images, then 1, then 2, then 1, then 2, etc.
How can I make it when mobile to have 4 rows of 2, and still keep the 3 rows of 3 for desktop?
Thanks
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
Use the following format
(container)
row
col-md-4 col-xs-6
col-md-4 col-xs-6
...(6x)
The columns will wrap below each other, so on medium views, you'll get 3 columns in a row, and on mobile views, 2 columns in a row.
If the trailing columns bother you, just add the classes col-xs-offset-3 and col-md-offset-2 (for example). The offsets will changed based on view. You can image this offset as an "invisible" column placed before the first in that new row.
Try this :
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
</div>
Pull all inside single row class and Use col-sm-4 col-xs-6
For width (≥768px) col-sm-4 will work and for width (<768px) col-xs-6 will work.
I am trying to sort articles by a child div inside using js.
My article html using Expression Engine looks like this:
<article class="panel panel-default leaderBoard races hidden-xs">
<div class="panel-body">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs col-xs-3">
<div class="stat"><span>{count}</span></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h3>{first_name} {last_name}</h3>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="profilePic"><img src="{profile_image:Square}" alt="{title}" class="img-circle driver img-responsive" width="100" height="100" /></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
{relationship}
{if '{relationship:results_grid:total_rows search:session="Race" sort="desc"}' >= 10 && '{relationship:results_grid:total_rows search:session="Race" sort="desc"}' <= 24}
<div class="badgeHolder img-responsive" style=" background: url('/images/badges/100/bronze.png') no-repeat;" class="badgeSmall img-responsive">
<div class="totalRows">{relationship:results_grid:total_rows search:session="Race" sort="desc"}</div>
</div>
{if:elseif '{relationship:results_grid:total_rows search:session="Race"}' >= 25 && '{relationship:results_grid:total_rows search:session="Race"}' <= 49}
<div class="badgeHolder img-responsive" style=" background: url('/images/badges/100/silver.png') no-repeat;" class="badgeSmall img-responsive">
<div class="totalRows">{relationship:results_grid:total_rows search:session="Race" sort="desc"}</div>
</div>
{if:elseif '{relationship:results_grid:total_rows search:session="Race"}' >= 50}
<div class="badgeHolder img-responsive" style="background: url('/images/badges/100/gold.png') no-repeat;" class="badgeSmall img-responsive">
<div class="totalRows">{relationship:results_grid:total_rows search:session="Race" sort="desc"}</div>
</div>
{if:else}
<div class="badgeHolder img-responsive" style="background: url('/images/badges/100/locked.png') no-repeat;" class="badgeSmall img-responsive">
<div class="totalRows">{relationship:results_grid:total_rows search:session="Race" sort="desc"}</div>
</div>
{/if}
{/relationship}
</div>
</div>
I basically want to sort the articles by div.totalRows descending. I have so far only managed to return the values, but i'm not sure what to do next.
Heres what I have so far:
var badgeRaces = document.getElementById('races').getElementsByClassName("totalRows");
function badgeRacesCount(i){
for(var i = 0; i < badgeRaces.length; i++){
return badgeRaces[i].innerHTML;
}
}
Any help would be appreciated.