MVC page with Bootstrap layout, after loading the page, automatically scrolls up a bit, how to avoid that - asp.net-mvc

This is the main page
then after loading the page , it automatically scroll to this position.
This is layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("My Dashboard", "Index", "Client")</li>
<li>#Html.ActionLink("Domain Registration", "ClientRegistration", "User")</li>
<li>#Html.ActionLink("Employee", "EmployeeList", "Client")</li>
<li>#Html.ActionLink("Work Hour Manage", "WorkHourManage", "Client")</li>
<li>#Html.ActionLink("Department", "DepartmentList", "Client")</li>
<li>#Html.ActionLink("Company", "CompanyList", "Client")</li>
<li>#Html.ActionLink("Logout", "UserLogout", "Login")</li>
</ul>
<div style="color: #ada8a8;float: right;margin-top: 10px;">
#{
var UserType = Request.Cookies["UserType"];
var UserName = Request.Cookies["UserName"];
if (UserName != null && UserType !=null)
{
<text>#(UserType.Value+"-"+UserName.Value)</text>
}
}
</div>
</div>
</div>
</div>
<div class="container-fluid body-content">
#RenderBody()
<hr />
<footer>
<p>© #CommonFunction.GetCurrentDateTime().Year - Employee Tracking & Management Information System.</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the index page, not only index moves, but all pages scroll up automatically
#{
ViewBag.Title = "My Dashboard";
}
#Html.Raw(TempData["Status"])
<div class="HeadingSite">
My Dashboard <div style="float:right;font-weight:normal;">#(Session["DaysLeft"]) Days Left</div>
</div>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.box {
cursor: pointer;
}
.box > .icon {
text-align: center;
position: relative;
}
.box > .icon > .image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: #63B76C;
vertical-align: middle;
}
.box > .icon:hover > .image {
background: #333;
}
.box > .icon > .image > i {
font-size: 36px !important;
color: #fff !important;
}
.box > .icon:hover > .image > i {
color: white !important;
}
.box > .icon > .info {
margin-top: -24px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
padding: 15px 0 10px 0;
}
.box > .icon:hover > .info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box > .icon > .info > h4.title {
font-family: "Roboto",sans-serif !important;
font-size: 16px;
color: #222;
font-weight: 500;
}
.box > .icon > .info > p {
font-family: "Roboto",sans-serif !important;
font-size: 13px;
color: #666;
line-height: 1.5em;
margin: 20px;
}
.box > .icon:hover > .info > h4.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a {
color: #222;
}
.box > .icon > .info > .more a {
font-family: "Roboto",sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
color: #fff;
padding: 6px 8px;
background-color: #63B76C;
}
.box .space {
height: 30px;
}
</style>
<div class="row">
<div onclick="location.href = '../Client/WorkHourManage';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-cog"></i></div>
<div class="info">
<h4 class="title">Manage Work Hour</h4>
<p>
Manage and view work hours of the company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/CompanyList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-industry"></i></div>
<div class="info">
<h4 class="title">Manage Company List</h4>
<p>
Manage or view Company List of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeList';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-users"></i></div>
<div class="info">
<h4 class="title">Manage Employees</h4>
<p>
Manage or view Employee of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/DepartmentList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-tag"></i></div>
<div class="info">
<h4 class="title">Manage Department</h4>
<p>
Departments are added to employee details..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeBackgroundTrackHistory';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-street-view"></i></div>
<div class="info">
<h4 class="title">Employee Background Tracking</h4>
<p>
Details of Employee presence on different days.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeTrackRouteEstimateList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-map-marker"></i></div>
<div class="info">
<h4 class="title">Employee Track Route & Estimate</h4>
<p>
Details regarding traveling details, traveling report and conveyance calculation.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/TravelCostManage';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-money"></i></div>
<div class="info">
<h4 class="title">Manage Base Travelling Cost</h4>
<p>
Details regarding traveling cost of the company. This is a rough calculation and different employees are assigned different amounts for travelling modes.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeEnquiryReport';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-book"></i></div>
<div class="info">
<h4 class="title">Employee Visit Report</h4>
<p>
Reports of employee visits.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/ChatWithEmployee';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-comments"></i></div>
<div class="info">
<h4 class="title">Chat with Employee</h4>
<p>
You can send messages and view replies from you Employees.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/UnlockModules';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-unlock-alt"></i></div>
<div class="info">
<h4 class="title">Unlock Modules</h4>
<p>
Unlock or Activate modules. Also can temporarily turn of unwanted modules.
</p>
</div>
</div>
</div>
</div>
</div>


I had this same issue, and disabling Browser Link in Visual Studio fixed it for me. From what I observed on the console, Browser Link runs some Javascript which shifts the page. Hope this helps!


I think it is something wrong with my system. Works perfectly in other pcs.
I used Webessential with autoreload on change options like that. May be my debugger problem.

Related

drag and drop Div columns and Div rows using JQuery ui

we are creating a table structure using html div, inside that we need to drag and drag and drop the columns and rows , but the row head should be fixed. ie, Drag and drop Div columns and Div rows without moving row head
anybody knows how to solve this.
I need to create this using JQuery , html and css.
$(function() {
$("#tblcols").sortable({
items: '.rtab:not(.rtab:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
ui.item.addClass("selected");
},
stop: function(e, ui) {
ui.item.removeClass("selected");
$(this).find(".rtab").each(function(index) {
if (index > 0) {
$(this).find(".ctab").eq(2).html(index);
}
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>

I'm a little unsure what you mean. I hope I captured the main idea, that you want the first cell in each row to remain in order after items are sorted. Here is an example that might work for you.
$(function() {
$(".Table .Heading").sortable({
items: '> .htab:not(:eq(0))',
cursor: 'pointer',
axis: 'x',
dropOnEmpty: false,
placeholder: "htab placeholder",
start: function(e, ui) {
var ind = ui.item.index();
$(".Table .rtab").each(function() {
$(".ctab", this).eq(ind).css("opacity", "0.25");
});
ui.item.data("orig-index", ind);
},
stop: function() {
$(".Table .rtab .ctab").css("opacity", "");
},
update: function(e, ui) {
var oInd = ui.item.data("orig-index");
var cInd = ui.item.index();
var cols = $(".Table .htab").length;
$(".Table .rtab").each(function() {
var cell = $(".ctab", this).eq(oInd).detach();
if (cInd < (cols - 1)) {
// Mid Col
cell.insertBefore($(".ctab", this).eq(cInd));
} else {
// Last Col
$(this).append(cell);
}
})
}
});
$(".Table").sortable({
items: '> .rtab',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
$(".ctab", ui.item).eq(0).html(" ");
},
stop: function(e, ui) {
$(".Table .rtab").each(function(ind, el) {
$(".ctab", el).eq(0).html((ind + 1));
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab.placeholder {
background: #ccc;
width: 20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
For the Header, we can sort the header items and then move the cells that correspond with it. Due to the relationship of the elements in Rows, there is not an element that contains all the column items. It effectively does what is needed, yet looks a little weird in doing it. With items we can exclude the first header.
When using Sortable for the Rows, you want to target the parent and then using items option, you can target the rows that you want to sort and those you want to exclude. Since we're sorting the rows and not the items inside, there is not a good way to exclude an item in the row.
When Sort starts, cell 0 is change to so it does not shrink too much. Once sort is stopped, it re-indexes the rows back into order. If we use update it will only fire when a change is performed. So if the user grabs a row and doesn't move it, there is not update. To address this, we can use stop to re-index.
Hope that helps.

Shopify Website is giving white space on right side in Ipad Only

I'm facing an issue on this website fearofmissingoutfomo.com where there is a white bar on the right side when viewing in iPad.
my code is
html,body {
margin: 0;
padding: 0;
border: 0;
#include smooth_font();}
{% if settings.use_bg_image %}
body {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
}
body.index-template {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
padding-top: 40px;
padding-bottom: 40px;
}
Help will be really appreciated. I also see some related threads but can't relate that to my issue. Thanks.

The problem is happenning because of this section:
Currently you section has HTML like that
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</section>
</div>
You should fix it and add container and row like that:
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="container">
<div class="row">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</div>
</div>
</section>
</div>

Bootstrap CSS not working in Internet Explorer & Background Image Over Scaling in iOS

I am using a free Bootstrap landing page theme, on my current site the code snippet and be run from below, which gives the desired effect on Chrome with Parallax and images. But, there are two issues which I am not able to figure out the reason for:
1.[Solved] In IE, all the sections of the page are displaying fine and Parallax works, but the content for those section is just all displaying on 1st section.
Solution : The v-center class , was causing this issue as pointed by #Fester . Removed it from the markup, and issue fixed but no solution found yet.
Un - Solved Issue
On iOS, the background image is scaled to much and just a bit from the center is displayed. Works fine on iMac, not on iPhone or iPad.
Please bear in mind I am new to CSS and trying to work my way thru, and have tried a few things suggested on different questions for the iOS issue but it does not work. The CSS is not minified, so can be easily viewed.
PS: I know, I need to try something first before asking the question but being a developer not a clue on where to start. Even a bit of pointer will be much appreciated.
Edit 1: Tried modernizr with HTML5shiv but still giving the same issue. Just included the modernizr and HTML5shiv js file. No changes were made to the code.
EDIT 2: The Issue with IE was caused by v-center class. Removed it, and everything fine. But, now actual reason or solution found.
Code is As Below:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 52
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 800);
if (this.hash=="#section1") {
$('.scroll-up').hide();
}
else {
$('.scroll-up').show();
}
// activte animations in this section
target.find('.animate').delay(1200).addClass("animated");
setTimeout(function(){
target.find('.animated').removeClass("animated");
},2000);
return false;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:300,400);
#import url(http://fonts.googleapis.com/css?family=Bitter:400);
html,body {
height:100%;
background:center no-repeat fixed url('http://dd.e-wizardbathrooms.co.uk/background.jpg');
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
color:#444;
font-family: 'Lato', sans-serif;
}
#media (min-width:768px) {
h1 {
font-size:68px;
}
}
a {
color:#999;
}
a:hover {
color:#111;
}
.btn,.well,.panel {
border-radius:0;
}
.btn-danger {
background-color:#f44d3c;
}
.btn-main {
color: #ffffff !important;
border-radius: 10px;
background-color: rgba(244,77,60,0.7);
padding-bottom: 10px;
}
.text-danger, a.text-danger {
color:#f44d3c;
}
.btn-huge {
padding:17px 22px;
font-size:22px;
}
.lato {
font-family: 'Lato', sans-serif;
}
.bitter {
font-family: 'Bitter', serif;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#273a60;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#cdcdcd;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#f44d3c;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#f44d3c;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:1px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 40px;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: -15px;
display: block;
padding: 7px;
text-align: center;
z-index:-1
}
.scroll-up {
position: fixed;
display: none;
z-index: 999;
bottom: 2em;
right: 2em;
}
.scroll-up a {
background-color: rgba(135, 135, 135, 0.5);
display: block;
width: 35px;
height: 35px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 30px;
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
min-height:calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#media (min-width:768px) {
.v-center {
height: 50%;
overflow: visible;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#section1, #section3 {
background-color: rgba(0,0,0,0.3);
color:#fff;
font-family: 'Bitter', serif;
}
#section4 {
background-color: #f6f6f6;
color:#444;
}
#section2 {
background-color: #fff;
}
#section3 {
background-color: rgba(0,0,0,0.9);
}
#section5 {
background-color: #fff;
}
#section6 {
background-color: #eee;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
#section7 {
background-color: #273a60;
color: #f6f6f6;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
footer {
background-color:#2b2b2b;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding: 3px;
color: #f44d3c;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>David Dixon Garden Machinery</title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">David Dixon</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><strong>Phone: </strong>01434-606060</li>
<li><strong>E-Mail:</strong>info#daviddixons.co.uk</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">David Dixon</h1>
<h2 class="text-center lato animate slideInDown"><b>Garden Machinery</b></h2>
<h4 class="text-center lato animate slideInDown">Please Select one of the Following or Scroll Down for More Info.</h4>
<p class="text-center">
<br>
Online Shop
Servicing & Parts
Equipment Hire
</p>
</div>
<a href="#section2">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section class="container-fluid" id="section2">
<div class="container v-center">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInLeft animate">
<div class="panel-heading">
<h3>Online Shop</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInUp animate">
<div class="panel-heading">
<h3>Servicing & Parts</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInRight animate">
<div class="panel-heading">
<h3>Equipment Hire</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/row-->
<div class="row">
<br>
</div>
</div>
<a href="#section3">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
<!--/container-->
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">David Dixon</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center lato slideInUp animate">The Best for <strong>Garden and Forest Machinery</strong> in the North East.</h3>
<br>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Additional Information about David Dixon Company and History</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Additional Information about David Dixon Company and History</div>
</div>
<br>
<p class="text-center">
<img src="//placehold.it/10x10/444/FFF" class="img-responsive thumbnail center-block ">
</p>
</div>
</div>
<h3 class="text-center">Brands we Work with</h3>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<a href="#section4">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section id="section4">
<div class="container v-center">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact US</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row form-group">
<div class="col-sm-5">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Message" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<button class="btn btn-default btn-lg pull-right">Send Message</button>
</div>
</div>
</div>
<div class="col-sm-3">
<address>
<strong>Opening Hours:</strong><br>
Monday to Friday: 8am - 5pm<br>
Saturday: 8.30am - 12.30pm<br>
</address>
<address>
<strong>Phone: </strong>01434-606060
</address>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>David Dixon Ltd.</strong><br>
18, Haugh Lane Industrial Estate<br>
Hexham, Norhtumberland<br>
United Kingdom - NE46 3PU<br>
</address>
<address>
<strong>Email Us</strong><br>
info#daviddixons.co.uk
</address>
</div>
</div>
<div class="row">
<div class="row"> </div>
<a href="#">
<div class="col-sm-2 col-sm-offset-3 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
</a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<!--/row-->
<p class="text-center">David Dixons Ltd. ® 2015</p>
</div>
</footer>
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

jQuery UI sortable with bootstrap 3 grid thumbnail

I have some problems with the plugin jQuery UI sortable with bootstrap 3 grid.
I can't place the placeholder in the correct place, but I will show up.
Also, you could make the action of sortable more accurate, sometimes the action is not performed, perhaps by slowing the action?
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Photos</h1>
</div>
<div class="panel-body">
<div class="row sortable">
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">1
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">2
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">3
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">4
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">5
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">6
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">7
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">8
</a>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$( ".sortable" ).sortable({
items : 'div:not(.unsortable)',
placeholder : 'sortable-placeholder'
});
$( ".sortable" ).disableSelection();
CSS
.sortable-placeholder {
margin-left: 0 !important;
border: 1px solid #ccc;
background-color: yellow;
-webkit-box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;
}
DEMO
Any suggestion to solve my problem is welcome. Thanks

You need to specify the width and the height of the placeholder and the properties of the items. (the same properties of col-md-3 class)
.sortable-placeholder {
margin-left: 0 !important;
border: 1px solid #ccc;
background-color: yellow;
-webkit-box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;
float: left;
width: 25%;
height: 0px;
padding-bottom: 20%;
}
Demo link http://www.bootply.com/PX4Q9h4vSD#
(the placeholder might cause some alignment issue because the placeholder and the actual thumb column doesn't have the exact same height)

Rendered HTML differs from source

I've come across some strange behaviour when I want to view a page in my ASP.NET MVC app.
I've created a small HTML helper that should generate a specific layout to display one of my classes.
It is invoked as such:
<div id="tabs-3" style="display:block; float:left;width:95%;">
#foreach (Trade trade in ViewBag.Trades)
{
#Html.Trade(trade, userLanguage)
}
</div>
The expected HTML that is generated looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold;">
User
</span>
<span style="font-size:8pt; display:block;">
<br/>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;" />
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br/>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</a>
</div>
<!-- Other records-->
</div>
I've used breakpoints to look at the generated string and it does look like it should. When I look at the source in a browser it also looks like the above.
However the rendered HTML differs from it (I've checked it with the debugging tools of IE 11, FF 28 and Chrome 34), it looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
</a>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<a href="/en/Trade/Details/1" class="blocklink">
<span style="font-size:16pt; display:block; font-weight:bold;"></span>
</a>
User
<span style="font-size:8pt; display:block;">
<br>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;">
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</div>
<!--Other records-->
</div>
In case it isn't clear at first sight the Hyperlink (with class="blocklink" on the 3rd row of the good HTML) is not rendered as a single tag around the div, but is rendered several times within the code either with nothing in between or around a <span> tag, breaking what should be in that tag.
The blocklink style class is something I found looking for a way to add a link around a div:
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
Has anyone come across such an issue? I'm really in the dark on why the rendered HTML looks different.
All is done on the build-in IIS Express directly from within VS 2012.4. I can't try it on an external server, since the app is still being developed and no server has been assigned yet.

That's because your html contains nested <a> elements, which is not standards compliant HTML. From the W3C spec for <a>:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
You also have related discussions on SO, like in this question. The way the browsers render this scenario is discussed here which explains why you see a different rendered html.
I have created this fiddle with a simplified html code that reproduces this issue:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Link with inner link</h1>
<a class="innerLink" href="#">inner link</a>
</div>
</a>
The rendered html looks like this on Chrome:
<a class="blockLink" href="#">
</a>
<div class="blockLinkContent"><a class="blockLink" href="#">
<h1>Link with inner link</h1>
</a><a class="innerLink" href="#">inner link</a>
</div>
In order to fix this, you can get rid of one of the links. Then use Javascript\CSS to handle the click event and add any styling you might need like active/hover states or text underline.
For example, you could get rid of the inner link, replacing it with a span and use Javascript to handle clicking on the new inner span:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Outer link only</h1>
<span class="innerLink">inner link</span>
</div>
</a>
$(function(){
$(".innerLink").click(function(){ alert("inner clicked"); return false; });
});
You can play around with this code in this other fiddler.
Hope this helps!

Resources