i have a bootstrap row that has to contain tow rows to encapsulate two array values using angular js . I want to loop through an array of friends using ng-repeat and fill the rows accordingly but am failing any help? my code is here
<div class="panel panel-default" style="height:2240px;">
<div class="panel-body" ng-repeat="friend in fullUser.friends">
<div class="row" style="padding-top:40px;">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="user_profile.php" class="black2">
<span>
<table>
<tr>
<td>
<img ng-src="{{friend.avatar}}" class="img-circle" style="width:100px;height:100px" alt="Generic placeholder thumbnail">
</td>
<td>
<span style="margin-bottom:0px;font-size:12px;font-weight:bold;"> {{friend.name}}
Friend</span>
<hr style="margin-bottom:-15px;margin-left:0px;margin-top:0px;height:8px;width:248px;"></hr>
<span style="margin-top:-10px;font-size:25px;margin-left:223px;color:#BD2532;" class="icon icon-caret-down"></span>
</td>
</tr>
</table>
</span>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6" ng-if="$index % 2 === 0" >
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="user_profile.php" class="black2">
<span>
<table>
<tr>
<td>
<img ng-src="{{friend.avatar}}" class="img-circle" style="width:100px;height:100px" alt="Generic placeholder thumbnail">
</td>
<td>
<span style="margin-bottom:0px;font-size:12px;font-weight:bold;"> {{friend.name}}
Friend</span>
<hr style="margin-bottom:-15px;margin-left:0px;margin-top:0px;height:8px;width:248px;"></hr>
<span style="margin-top:-10px;font-size:25px;margin-left:223px;color:#BD2532;" class="icon icon-caret-down"></span>
</td>
</tr>
</table>
</span>
</a>
</div>
</div>
</div>
</div>
<br/><br/>
</div>
Related
I have an input that will filter out a list of users.
<!-- Input -->
<input type="text" ng-model="search">
<div ng-repeat="obj in data | filter:search" ng-show="search.$touched" >
<div class="row">
<!-- Country -->
<div class="col-xs-4 text-center" >
<p>[[obj.country]]</p>
<img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
</div>
<!-- Main Info -->
<div class="col-xs-4" >
<p class="company-name">[[obj.user.username]]</p>
<p>[[obj.obj.phone_public]]</p>
<p>[[obj.user.email]]</p>
[[obj.obj.url]]</span> <span class="col span_2_of_6">
</div>
<!-- Logo -->
<div class="col-xs-4 pull-right" >
<img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
</div>
</div>
<br><hr>
</div>
The filter functionality working great, but I am trying to hide it at first and only show it when the input has been modified.
Before adding ng-show="search.$touched"
After adding ng-show="search.$touched"
Should I use a different directive ?
Now nothing is displaying ...
The key part is : ng-show="search" will check for the presence of any search characters
<!-- Input -->
<input type="text" ng-model="search">
<div ng-repeat="obj in data | filter:search" ng-show="search" >
<div class="row">
<!-- Country -->
<div class="col-xs-4 text-center" >
<p>[[obj.country]]</p>
<img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
</div>
<!-- Main Info -->
<div class="col-xs-4" >
<p class="company-name">[[obj.user.username]]</p>
<p>[[obj.obj.phone_public]]</p>
<p>[[obj.user.email]]</p>
[[obj.obj.url]]</span> <span class="col span_2_of_6">
</div>
<!-- Logo -->
<div class="col-xs-4 pull-right" >
<img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
</div>
</div>
<br><hr>
</div>
I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>
It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
How to switch the size of one column when there is a click on a sidebar?
Im developing an application with a map in a column and a second column to the right displaying information. There is a sidebar that slides in from the right when activated.
When the sidebar is extended, the main column with the map is col-lg-6 and the column on the right is col-lg-4
Now when the sidebar is closed by clicking on a button, I would like to map column to switch to col-lg-8. Is there a way to do this?
Code for page and sidebar:
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-heading">
<h3 class="panel-title">Projects
<button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-8 col-md-8">
<input type="text" class="form-control search" placeholder="Filter" />
</div>
<div class="col-xs-4 col-md-4">
<button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i> Sort</button>
</div>
</div>
</div>
<div class="sidebar-table">
<table class="table table-hover" id="feature-list">
<thead class="hidden">
<tr>
<th>Icon</th>
<tr>
<tr>
<th>Name</th>
<tr>
<tr>
<th>Chevron</th>
<tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:0px;">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
<div id="map"></div>
</div>
<div class="col-xs-6 col-lg-4" style="padding-top:0px">
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-2x"></i>
</div>
<div class="panel-body" style="text-align:center">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list fa-2x"></i>
</div>
<div class="panel-body" style="text-align:left">
<div id="projects"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code for activation of sidebar and menu button:
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 50; // Calculate the top offset
$('#map').css('height', (h - offsetTop));
}).resize();
$("#list-btn").click(function() {
$('#sidebar').toggle();
map.invalidateSize();
return false;
});
$("#sidebar-toggle-btn").click(function() {
$("#sidebar").toggle();
map.invalidateSize();
return false;
});
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
map.invalidateSize();
});
EDIT
I have tried using toggleClass and addClass/removeClass but its not working. Here is a jsfiddle to show what happens when the sidebar is hidden.
http://jsfiddle.net/Monduiz/dzo5yg72/
Try this type of trick:
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
$('#mapDiv').removeClass('col-lg-6');
$('#mapDiv').addClass('col-lg-8');
});
I have some radio buttons and I am adding checked attribute to selected radio button but having one problem. I want to remove checked="checked" attribute from radio button which selected.
HTML Code:
<div class="tabtwo-info">
<div class="tab-two">
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Unsecured Loans
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Secured 2nd Charge Lending
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Overdrafts
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Trade Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Business Cash Advance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Working Capital
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Stock Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Acquisition Finance
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
</div>
</div>
jQuery Code:
$(".tabtwo-info .brokersector").click(function () {
$(this).find('input:radio').attr('checked', true);
});
My JSFiddle: https://jsfiddle.net/jj57q8fs/
JSFiddle Screenshot:
To force a remove of the attribute, before checking a new:
$(".brokersector").click(function () {
$('input[type=radio]').removeAttr('checked');
$(this).find('input[type=radio]').attr('checked', 'checked');
});
This will force an removal of all checked on any radio button, before a new radio is set. The selector can be more specific of course, like in Idir's example.
Also, #Regent posted a fiddle using prop instead. I would suggest you use this, as it states in the documentation:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.
try this,
$(".tabtwo-info .brokersector").click(function() {
$('input[name=brokersector]').removeAttr('checked');
$(this).find('input:radio').attr('checked', 'checked');
});
I agree with [Rory McCrossan][1], you don't need jQuery for that. but here is what you can do this:
$('input[name=brokersector]:checked').removeAttr('checked');
$(".tabtwo-info .brokersector").click(function () {
$("input:radio").removeAttr("checked");
$(this).find('input:radio').attr('checked', true);
});
});