I have a markup like this:
<div class="row">
<div class="col col-50" ng-repeat="picture in pictures.slice().reverse()">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
I'm trying to create an even layout, with two images every row. The issue is, I need to add a new row every two, so my ng-repeat isn't working. For example, the markup should look something like this once it's rendered:
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
Short of doing the output manually with Javascript, I'm not really sure how to do it. I've been looking at the docs, but I can't find a way to do it. Could someone suggest something, or point me in the right direction?
Using ng-switch should work as long as your pictures array is even in length.
<div class="row" ng-repeat="picture in pictures.slice().reverse()" ng-switch on="$index % 2" ng-show="$index%2==1">
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{pictures[$index-1].id}}" title="{{pictures[$index-1].caption.text}}" target="_blank">
<img ng-src="{{pictures[$index-1].images.standard_resolution.url}}" width="100%" height="auto" alt="{{pictures[$index-1].caption.text}}" />
</a>
</div>
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
Simple example of how this works in Fiddle:
http://jsfiddle.net/HB7LU/5711/
Related
I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.
You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".
I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010
The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>
Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>
Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
i have the following code in which i have images and on them i have dislike. i want to identify on which image the dislike has been clicked? how do i do that?
<div class="product_title">Levi's Men's Cotton T-Shirt</div>
<div class="product_img"><img src="images/T1.jpg" alt="" border="0" id="T1"/></div>
<div class="product_img"><img src="images/dislike.jpeg" onclick="getId();" align="right" id="d1"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">UB Stylish T-shirt</div>
<div class="product_img"><img src="images/T2.jpg" alt="" border="0" id="T2"/></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d2"/></a></div>
<div class="prod_price"><span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">Jacob n John T-Shirt</div>
<div class="product_img"><img src="images/T3.jpg" alt="" border="0" id="T3" /></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d3"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
You can bind the dislike image button with onclick event. Find the id of the element and then use the id to find the product id.
As your markup is structured, id of element is di then corresponding id of product is ti.
To elaborate some things. Im brand spanking new to coding (been at it around a week and a half and still not much further) My problem is im trying to figure out how to set up text underneath my thumbnails as viewed below (That code alone wont make it look right but I figured this is a stupid question with a really easy answer) I need to set a name under each thumbnail and i've been at this for like EVER this isn't copy and pasted code its something i've been grueling over for the last week and this one thing has given me immense problems -_- so far i've been going off the bootstrap page to put all this together but my answer for this hasn't came around yet so I figured i'd ask any idea's?
<div class="row">
<div class="top-listings">
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://1.bp.blogspot.com/-sAGd2pCpHgM/Tjr3vGeuPcI/AAAAAAAAAAU/llCHgjsh7Uc/s320/the+law+of+ueki.JPG" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://img2.wikia.nocookie.net/__cb20140529203802/voiceacting/images/7/7c/Berserk_1997_DVD_Cover.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:100%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div class="col-md-3">
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
</div>
</div><!-- /.container -->
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<a href="#">
<img src="http://s3-media3.fl.yelpcdn.com/bphoto/yhFlDqlSi6BE8L7eU1P8OA/ls.jpg" width="35" height="35" alt="google" />
Copyright © 2015. Powered by Zewa Design. All Rights Reserved.
</a>
</div>
</div>
</div>
</div>
</div>
either directly after each <img> Tag or before the closing DIV tags of those col-md-3DIVs insert a new DIV tag with your text, like
<div class="my_text">text 1 2 3</div>
and in your stylesheet, put the desired CSS rules for .my_text, like font-size, color, text-align: center; etc.
In the simplest form possible you can do this (thi is your first image):
<div class="col-md-3">
<div>
<a href="http://http://www.mp4upload.com/knx8txszxvhc">
<img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
</a>
</div>
<div>
<span>Image Name Comes here</span>
</div>
You can additionally style it the way you like.
I am using bootstrap and make one row with 2 column and one button , I want to do when i click on the button will show 4 column instead of 2 column.
JQuery
$('#more_service').on('click',function(){
$('.service_container').slideToggle('slow',function(){
var template = $('item_template').html();
$('.service_wrapper').html(template);
});
});
html
Creative Service
<div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div> <div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div>
</div> </script>
$('item_template').html(); is an element in your code like a class or an ID? If so, you need to add a dot or a hashtag like:
$('item_template').html();
becomes
$('#item_template').html(); or $('.item_template').html();
if item_template is id use # if it is class use . and use innerHTML:
var template = $('#item_template').innerHTML;