From this code i have three button ,now i cliked ** Reply button 1** means i want to show one textarea for bottom of the button( Reply button 1).else i have to select Reply button 2 means i want show the textarea for under this Reply button 2..i don't know how to do.i am new developer please help me some one
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 1
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 2
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 3
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
After click that button i want to show this
<textarea class="the-new-com"></textarea>
Now this should help you surely. You need not use seperate ids for each
JS
$('.reply-btn').on('click',function() {
$(this).closest('.comment').next('.reply').html("<div><textarea class='the-new-com'></textarea></div>");
})
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 1
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 2
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 3
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
use this below jQuery...and also include this below js library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$('.reply-btn').on('click',function() {
$(this).after("<div><textarea class='addedText'></textarea></div>");
});
try this
$('div [id |=reply-btn]').on('click',function() {
$(this).after("<div><textarea class='the-new-com'></textarea></div>");
});
https://jsbin.com/
Related
I am trying to use check boxes in order to filter my results at an html page. Through a django view a pass my data in a list, and then through a loop like this:
</div>
{% for r in rows %}
<div class="res_show">
<div class="btitle">
<p style="text-align:left"><b>{{r.name}}</b></p>
</div>
<div class="baddress">
<p>{{r.address}}</p>
</div>
<div class="reviewstar">
{% if user.is_authenticated %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% else %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% endif %}
</div>
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
<div class="diraddress">
<p style="text-align:left">{{r.duration}}' {{r.distance}} χλμ <b>{{r.open}}</b></p>
</div>
<hr style="border:3px solid #333333">
</div>
i want to use this class for filtering:
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
Category has 4 possible values: cafe, bar, nigh_club, reastaurant
I have found the following code but i can't figure out what i should change in order to work in my code:
http://jsfiddle.net/x1av5809/
Category may contain more tha one values seperated by comma, for example
bar or cafe, bar
An example of use would be choosing the bar check box and showing only results that contain category bar. I i choose both bar and cafe check boxes i should show results that contain bar or cafe category
Thanks in advance
You can loop through your checked checkboxes and then using b:contains.. check the element have that checked values or not depending on this hide/show divs .
Demo Code :
$("input[name='filterStatus']").change(function() {
//check if the checkbox checked length is > 0
if ($("input[name='filterStatus']:checked").length > 0) {
$(".res_show").hide() //hide all divs
$("input[name='filterStatus']:checked").each(function() {
var values = $(this).val() //get valeu of checked checkboxess
$(".b_category b:contains(" + values + ")").closest(".res_show").show() //show same
})
} else {
$(".res_show").show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b_category">
<input type="checkbox" name="filterStatus" value="Cafe" /><label>Cafe</label>
<input type="checkbox" name="filterStatus" value="Restaurant" /><label>Restaurant</label>
<input type="checkbox" name="filterStatus" value="Bar" /><label>Bar</label>
<input type="checkbox" name="filterStatus" value="Night club" /><label>Night club</label>
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some1</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somethins</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Night club</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some4</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Bar</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Restaurant</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
When user goes from fullscreen to window view in chrome or any browser. The main class mdl-layout__content seems to add a vertical (up and down) scrollbar, which means there are now two scrollbars on the right side of the users screen.
From what I have read, people are saying it is the footer that causes this issue, however I don't believe that to be the case, as I can do an easy fix by changing MDL css from
.mdl-layout__container {
position: absolute;
width: 100%;
height: 100%;
}
to
.mdl-layout__container {
position: absolute;
width: 100%;
height: auto !important;
}
However this fix is horrible, and means changing the code Google supplies.
Picture of issue:
Browser is full screen
Browser is now in a window and NOT full screen
Code
header.tpl
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">TEST</span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
</div>
</div>
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">chat</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<div class="mdl-navigation card">
<div class="up background-tint">
<div class="text">
<h2>Russell Harrower</h2>
</div>
<div class="add"><i id="tooltip1" class="fa fa-paw" aria-hidden="true"></i>
<div class="mdl-tooltip" for="tooltip1">Your Pet's</div>
</div>
</div>
<div class="down">
<div>
<p>Followers</p>
<p>26</p>
</div>
<div>
<p>Following</p>
<p>21579</p>
</div>
<div>
<p>Like</p>
<p>976</p>
</div>
</div>
<div class="back">
<p>Users Pets goes here.</p>
</div>
<br>
</div>
<!-- END OF ANIMATED MENU -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
Feed.tpl
{*********************************************************
Multi line comment block with credits block
# author: Harrower.xyz
# maintainer: support#harrower.xyz
**********************************************************}
{* The header file with the main logo and stuff *}
{include file='./tpl-files/header.tpl'}
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="
">
<!-- this is the status box -->
<div id="show-dialog" class="mdl-card mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp card-height-small">
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
<div class="card__author">
<img src="http://lorempixel.com/40/40/sports/" alt="user">
</div>
</div>
<div class="mdl-cell mdl-cell--10-col mdl-cell--top">
<div class="mdl-card__title">
<h1 id="what_are_u_up_too" class="mdl-card__title-text">What are you up to?</h1>
</div>
</div>
<div id="tt3" class="icon material-icons">add_a_photo</div>
</div>
</div>
</div>
<!-- end status box -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-thumbs-o-up"></i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--hide-phone mdl-cell--top">
<!-- LOST PET WIDGET -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl" style="background-image:url('//static.pexels.com/photos/7720/night-animal-dog-pet.jpg');">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text card-lost_header">LOST: MELBOURNE CDB</h1>
</div>
<div class="mdl-card__supporting-text">
<p><b>Name:</b> SAMMY
<br>
<b>Last Seen:</b> 2 Days Ago, Bourke Street
<br>
<b>Kid Friendly:</b> Unsure
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">View Pet Profile</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-share"></i></button>
</div>
</div>
<!-- LOST PET -->
</div>
</div>
{include file='./tpl-files/footer.tpl'}
footer.tpl
<div id="footer" class="navbar navbar-fixed-bottom">
<nav class="navbar navbar-gray" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>FAQ</li>
<li {if {$smarty.get.t} eq 'tos'}class="active"{/if}>Terms Of Service</li>
<li {if {$smarty.get.t} eq 'privacy'}class="active"{/if}>Privacy</li>
<li {if {$smarty.get.t} eq 'contact'}class="active"{/if}>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>- In Loving Memory Of OneSpot</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script src="{$smarty.current_dir}/javascript/bootstrap.min.js"></script>
</body>
</html>
Solution for the above
Make the Users image smaller - from 330px to 200px;
Come up a with a better menu system for your users: for example - if a user
wants to fav a community group, this menu navigation will continue
to have this issue.
Don't over complicate the navbar.
By doing the above it solved your issue, note any small small screens may still have issues.
I want to show comments array data in html but it is not showing data properly. What should I do? Data is showing same like in comments array. What am I doing wrong? What should I do?
<ul class="media-list" ng-controller="dishDetailController as menuCtrl">
<li class="media" ng-repeat="dish in menuCtrl.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p><strong>Customers Comment </strong>
sort by: <input type="text" ng-model="dish.comment">
</p>
<blockquote>
<p>{{dish.comments }}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</div>
var dishes=[
{
name:' Salad with Eggs',
image:'images/image-2.jpg',
label:'Delicous',
price:'10',
description:' Health salad with eggs and wonder taste with reasonable price !',
comments:[
{
rating:5,
comment:'',
author:'John Doe',
date:Date
}
],
https://i.stack.imgur.com/2e35Y.jpg
you should use ng-repeat to iterate through the array and show relevant data from the array elements:
<blockquote ng-repeat="comment in dishes.comments">
<p>{{comment.comment}}</p>
<p>{{comment.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
EDIT:
Here is a demo
Your ng-repeat should be like this,
<ul class="media-list" ng-controller="dishDetailController">
<li class="media" ng-repeat="dish in dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<blockquote>
<p><strong>Customers Comment </strong> sort by:
<input type="text" ng-model="comment">
</p>
<blockquote ng-repeat="eachline in dish.comments | filter:comment">
<p>{{eachline.comment}}</p>
<p>{{eachline.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</blockquote>
</div>
</li>
</ul>
DEMO
I guess you want something like this.
<blockquote>
<p> {{dish.comments.rating }}</p>
<p> {{dish.comments.comment }}</p>
<p> {{dish.comments.author }}</p>
<p> {{dish.comments.date | date: 'dd/MM/yyyy' }}</p>
</blockquote>
<div class="row row-content" ng-controller="DishDetailController as DishCtrl">
<div class=" col-xs-12 "> <div class="media ">
<div class="media-left media-middle ">
<a href="# ">
<img class="media-object img-thumbnail " ng-src={{dish.image}} alt="Uthappizza ">
</a>
</div>
<div class="media-body ">
<h2 class="media-heading ">{{dish.name}}
<span class="label label-danger ">{{dish.label}}</span>
<span class="badge ">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<ul class="list-inline">
<li>
<h2>customer comments </h2>
</li>
<li>Sort by: <input type="text" ng-model="query"></li>
</ul>
<ul class="list-unstyled">
<li ng-repeat="comment in dish.comments | orderBy:query">
<blockquote>
<p> {{comment.rating}} stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
I am having trouble getting multiple Masonry type portfolios to work correctly on a webpage. For reference a Masonry type portfolio should look like this.
Here is an example from the templates site
(http://ottavio.kleis.agency/portfolio.html), if you can't view that page then essentially what it is, is a 4*3 image display where the 3 images on either side are of base size 1*1, and there are to images in the middle that are of sizes 2*2 and 2*1.
However when I try to add a second portfolio the second image down from the top left moves to the bottom of the portfolio and leaves white-space where it should be.
Which if the explanation wasn't clear looks like this
The code for the portfolio is this
<section id="portfolio-gallery" data-folder="/portfolio" class="sep-top-md">
<div class="container">
<div id="filters" class="sep-bottom-lg">
<button data-filter="*" class="btn btn-sm btn-primary upper">show all</button>
<button data-filter=".branding" class="btn btn-sm upper">branding</button>
<button data-filter=".design" class="btn btn-sm upper">design</button>
<button data-filter=".photography" class="btn btn-sm upper">photography</button>
<button data-filter=".videography" class="btn btn-sm upper">videography</button>
</div>
</div>
<!-- Start Ajax Section-->
<div style="position:relative;" class="ajax-section section-gray">
<div class="closeProject"><i class="fa fa-times"></i></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin fa-2x"></i></div>
<div class="container">
<div class="status-message"></div>
<div class="ajax-content-outer">
<div class="ajax-content-inner"></div>
<div class="project-navigation nav-arrows"><span class="nav-arrow-next"></span><span class="nav-arrow-prev"></span></div>
</div>
</div>
</div>
<!-- End Ajax Section-->
<ul id="isotope" class="portfolio isotope">
<li class="item videography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/05.jpg" alt="Extreme Freestyle" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Extreme Freestyle</h4><span>Mood is a crucial component of well-being. It is an emotional state that can be influenced by personality or a variety of specific circumstances. This sub-category identifies worry, anxiety, happiness, mood fluctuations, and fatigue. Monitoring and managing mood can be vital for a student with regard to their life in general and school success.</span>
</div>
</div>
</div>
</li>
<li class="item photography width2x height2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/11asw5.jpg" alt="Looking at The Horizon" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Looking at The Horizon</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item photography design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/wr4c5.jpg" alt="Design Studio" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Design Studio</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/mac.jpg" alt="Minimalist Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Minimalist Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding width2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/2048asxsax.jpg" alt="Business Card" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Business Card</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20aaaaa48.jpg" alt="Horst brand identity" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Horst brand identity</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design photography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20sshsh48.jpg" alt="Infinity Mirror" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Infinity Mirror</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/247610222_460fa350b6_o.jpg" alt="Simple Desk Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Simple Desk Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
</ul>
</section>
And all I have done to create the second portfolio is copy and paste that code. I am stuck and have tried to resolve the issue in a number of ways, but I have still not been able to fix it. Any help would be much appreciated
There is a plugin that can do as you like. Try this one https://github.com/sapegin/jquery.mosaicflow
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO