We Keep Coding

The modal close icon and the text of the modal are incorrect

<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "Kişisel Bilgiler"; } #EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
#EmployeeCardRes.FirstName #EmployeeCardRes.LastName
<div class="text">#Model.FirstName #Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
I want to do like that

You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
#EmployeeCardRes.PositionCode
</div>
<div class="text">
#ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}

Isotope filtering with bootstrap

I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});

2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/

Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

Prevent click on link wrapper using css

I have link with image in it. This all construction is wraped in some divs. Problem : except image, also is clickable area of div-wrapper. I don't know why it is possible. So i want to prevent this behaviour. Now i can just do this with javascript (return false on div click) and with css (change curson type on div hover).
Can i somehow done this just with css?
Thanks.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
JsFiddle Example
For those who don't know what i'm asking : I want to make clickable area that are limited by sides of image. Now i can click on div that are wrapper of image to be redirected by link.

Since you're using Bootstrap and the img-responsive class makes an image a block element, you need to change that behavior. Block elements take up the full width of their parent container. You can fix that by making the image an inline element:
img.img-responsive {
display:inline;
}
jsFiddle example
Or just don't use the img-responsive class.

pointer-event:none;
Ya, you can do this using CSS :)
pointer-event:none;
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap" class='no-link'>
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
</a><br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
<style>
.no-link{
}
</style>

Based on your jsFiddle example, simply change yor code to:
<div style="white-space: nowrap; width:200px; margin: auto;">
The cause of the "side effect" is because your A TAG is taking all the parent DIV area, thus the DIV itself is taking the whole space of its own Parent, making it appears as if the clickable area is stretching beyond of the A TAG (which is not true).
To prevent such behavior it is always a good practice to limit the size of the container to the size of the clickable element inside it (width AND height, whenever necessary).
Have a good coding day! :)

You should use display: inline-block; and set the width of the containing div.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
<div style="white-space: nowrap; display: inline-block; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
</a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>

just Add same margin and width in div also
--example
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap;margin: 0 auto; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>

Masonry: Images stack vertically, one image each row

I am using Masonry in my webpage. The problem is that after the page loaded, all images stack vertically, one image in a row. I would like them to stack both horizontally and vertically. See My Jsfiddle.
I use the following code in html:
<div class="container">
<div id="items">
<!-- the .box repeats several times -->
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
</div>
and the following javascript code:
$(document).ready(function(){
var $container = $('#items');
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
and also the CSS:
.box { margin: 5px; width: 214px; }
.box img { width: 100%; }
.panel .panel-heading {
color: #ffffff;
text-align: center;
margin-right: 0;
height: 150px
}
-------------------- Update ---------------------
The above code is just an abstraction of my webpage, in my first version of fiddle (http://jsfiddle.net/shapeare/saonpswu/), I accidentally put .box into separate #items, therefore, the code didn't work. This problem is pointed out by #Skelly. Thanks, Skelly. Now the fiddle works for the above demo (http://jsfiddle.net/shapeare/saonpswu/1), however, my webpage still cannot work. Now I have put almost the same content as my webpage in the following fiddle:
http://jsfiddle.net/shapeare/saonpswu/2

Fix your HTML so that there aren't separate DIV's with id="items"
<div id="items">
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
Demo: http://bootply.com/OD2uHuKupr

I forgot to mention that I am using Angular.js which probably caused this problem. I am now using the directive from http://passy.github.io/angular-masonry/ which resolved my problem.

Manipulating first child inside DIV as an UL element in jQuery

Currently I have the below HTML elements.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<div style="height: 190px; background: url(7.jpg) no-repeat;>
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I want to wrap the first DIV(inside DIV with id "avatar-console") with an LI tag and insert new LI tag at the end as shown below.
Below is the required ouput.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<ul>
<li>
<div style="height: 190px; background: url(7.jpg) no-repeat">
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
</li>
<li class="star">★</li>
</ul>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I tried the below code to start with but it gives unwanted results. I am not sure where and how to start on this.
$("#avatar-console div:first-child").append('<li class="star">★</li>')
Fiddle Link: http://jsfiddle.net/Purus/U3KC8/

This should work:
http://jsfiddle.net/da4dz/
$("#avatar-console > div:first")
.wrap('<ul><li></li></ul>')
.closest('ul').append('<li class="star">star</li>');

You can use the jQuery wrap() method:
$("div:first-child", "#avatar-console").wrap("<ul><li></li></ul>");