Develop Reference

Dynamically set margin to vertical centered content

I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.
My div structure is as following.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>

Yes, rather simple too using line-height and height:
.operation .itemText{
line-height: 15px;
height: 30px; /* at least twice the line-height */
}
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span class="itemText">Ring</span>
</div>
The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.
Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.

With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>

How To Put Values Dynamically

I am trying to add comments at below post as like (Posted By : Some name from ny text box) and In next line (Comment: ) again in next line print that textarea's value below of that post, so please my trying code is here. Please let me know any mistakes in my code.
In my alert it's working fine but not appended every post.
var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
$('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
alert('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);
});
});
$('#newcoment').html('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);
});
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-justify{
text-align:justify;
}
.cursor{cursor:pointer;}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Samudrala's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>Friends</li>
<li>Family</li>
<li>Photos</li>
<li>Likes</li>
<li>DisLikes</li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
<h4>RECENT POSTS</h4>
<hr>
<h2>I Like Updated Technologies</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
<h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
<p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.
</p>
<p id="newcoment"></p>
<br><br>
<h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
<br/>
<form role="form" id="form1">
</form>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>

Move your appending function into your click event
var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
$('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
$('#newcoment').html('Posted by '+name+'</br>'+' Comment : '+'</br>'+cnt);
});
});
});
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-justify{
text-align:justify;
}
.cursor{cursor:pointer;}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Samudrala's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>Friends</li>
<li>Family</li>
<li>Photos</li>
<li>Likes</li>
<li>DisLikes</li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
<h4>RECENT POSTS</h4>
<hr>
<h2>I Like Updated Technologies</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
<h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
<p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.
</p>
<p id="newcoment"></p>
<br><br>
<h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
<br/>
<form role="form" id="form1">
</form>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>

Making a horizontal list using ng-repeat? Not sure what I'm missing here

Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!

Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)

Prevent screen down shift to the anchor at the responsive drop-down menu

menu screenshot
When drop-down menu appears (id="sub-menu-1" or "sub-menu-2", etc) after the click on top buttons (class="toggle-1" or "toggle-2", etc), it shifts the display down to the anchor and hides the top button menu (class="mobile-menu"). How I can prevent this shift? I tryed "pointer-events: none;", but then drop-down menu doesn't work at all.
$('.mobile-menu').each(function() {
var $_navbar = $(this);
var $_toggles = $_navbar.find('.toggle');
var $_panels = $_navbar.find('.sub-menu');
var active_classname = 'active';
$_toggles.each(function() {
var $_this_toggle = $(this);
var $_this_panel = $( $_this_toggle.attr('sm-id') );
$_this_toggle.click(function() {
$_toggles.not($_this_toggle).removeClass(active_classname);
$_this_toggle.toggleClass(active_classname);
$_panels.not($_this_panel).slideUp();
$_this_panel.stop().slideToggle();
});
});
});
<nav class="mob-nav">
<div class="mobile-menu">
<a sm-id="#sub-menu-1" class="hotdog toggle toggle-1" href="#sub-menu-1"></a>
<a sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
<a sm-id="#sub-menu-3" class="mob-menu-phone toggle toggle-3" href="#sub-menu-3"></a>
<a sm-id="#sub-menu-4" class="mob-menu-search toggle toggle-4" href="#sub-menu-4"></a>
</div>
<div class="sub-menu-wrapper">
<div id="sub-menu-1" class="sub-menu">
<ul>
<li>Продукция</li>
<li>Технологии применения</li>
<li>Объекты</li>
<li>Документация</li>
<li>О компании</li>
<li class="profile-links">
<span>
Заказчику
</span>
<span>
Проектировщику
</span>
</li>
<li class="profile-links">
<span>
Подрядчику
</span>
<span>
Частным клиентам
</span>
</li>
</ul>
</div>
<div id="sub-menu-2" class="sub-menu">
<form action="post" class="email-feedback">
<input type="text" name="user-name" class="mob-nav-input" placeholder="Ваше имя">
<input type="text" name="mobile-number" class="mob-nav-input" placeholder="Номер телефона">
<textarea name="interest" class="mob-nav-input" placeholder="Что Вас интересует?"></textarea>
Отправить
</form>
</div>
<div id="sub-menu-3" class="sub-menu">
<ul>
<li>+7 812 423-85-85</li>
<li>+7 812 423-85-85</li>
</ul>
</div>
<div id="sub-menu-4" class="sub-menu">
<form action="post" class="mobile-search">
<input type="search" class="mob-nav-input">
<input type="submit" class="search-param-sub" value="">
</form>
</div>
</div>
.mobile-menu {
overflow: hidden;
}
.mobile-menu a {
border: #3a3a3a 1px solid;
height: 60px;
display: block;
width: 25%;
float: left;
}
.sub-menu {
padding-top: 10px;
display: none;
}
Where I should search the solution? In CSS or JS?

You're looking for event.preventDefault()
$_this_toggle.click(function(e) {
e.preventDefault();
Since your anchors have an href which begins with a # and that hash value corresponds to an element on the page with the same id or name browsers will scroll the page down to the matching element, and also change the hash in the URL. You need to prevent the default browser behaviour.

add to a tag this onclick="event.preventDefault()"
<a onclick="event.preventDefault()" sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
the simplest solution is this. when you click a tag with attribute href="#example" naturally it is forcing browser to go a tag which has id="example" attribute. Avoid for this you should use event.preventDefault() properly

How can I disable parent background div when a child container div is active?

I want to disable a parent background div which contains grid with data. On the grid there are options like sorting and exporting the data into csv/pdf. Also, on this grid there is a filter button, on click of which(via ng-click= xyz();) a filter overlay comes. This is a child container div inside the parent div. I want to disable the parent grid div when this filter overlay div opens i.e., disable the sorting and export and any other functionalities on the parent div.
Any help form anyone? My entire project is in angular js. An example with a demo will be great!
In agg.service.js
angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {
var service = {
openFilterOverlay: function() {
console.log("Toggle Filter overlay00");
var filteroverlay = angular.element(".filter-overlay");
if(filteroverlay.hasClass('open')) {
filteroverlay.removeClass('open');
} else {
filteroverlay.addClass('open');
}
angular.element('.tooltip').hide();
},
};
return service;
}]);
In index.html
<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">
<div class="ddt-container">
<h2>
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
</div>
<!--div container for filter overlay starts here-->
<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
<h2 ng-hide="true" class="remove">
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
<div class="ddt-sidebar filter-overlay col-md-2">
<div class="row">
<div class="col-md-6">
<div class="form-group ddt-filter-box-group">
<select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
<option value="">My Saved Filters</option>
</select>
</div>
</div>
<div class="col-md-6">
<button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>
</div>
</div>
<!--The code continues having several filter box -->
<div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
<div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
<ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>
In summaryGrid.html
<div class="grid-header">
<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
<i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>
In styles.css
.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
}
.filter-overlay.open {
transition: 1s;
left: 0;
}
.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}
.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}
.container-fluid .row{
margin-left: 0;
margin-right: 0;}
.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}
.tab-content > .tab-pane {
display: none;}
.tab-content > .active {
display: block;}

If you disable the parent element then obviously the children elements will also be disabled. Instead of making them parent and children you can place those two divs as siblings and hide them individually depending on the visibility of the element.