For the life of me, I can't get google event tracking to work. I'm trying to track clicks on certain images in my site. I've waited a number of days, I've tried using firebug and google chrome debugger with no luck. I would be really, really indebted if someone could tell me what I'm doing wrong. My code is below. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hug Addicts | A variety of hug t-shirts.</title>
<!-- js -->
<script type="text/javascript">
var subMenus = new Array();
subMenus[0] = "shirt1";
subMenus[1] = "shirt2";
subMenus[2] = "shirt3";
subMenus[3] = "shirt4";
subMenus[4] = "shirt5";
subMenus[5] = "shirt6";
subMenus[6] = "shirt7";
subMenus[7] = "shirt8";
subMenus[8] = "shirt9";
subMenus[9] = "shirt10";
function revealshirt(id)
{
for (var i = 0; i < subMenus.length; i++)
{
document.getElementById(subMenus[i]).style.background = "transparent";
}
document.getElementById(id).style.background = "#e0e0e0";
}
</script>
<!-- end js -->
<!-- Style Sheet -->
<link href="_css/reset.css" media="screen" type="text/css" rel="stylesheet" />
<link href="_css/layout.css" media="screen" type="text/css" rel="stylesheet" />
<!-- End Style Sheet -->
<meta name="verify-v1" content="G4CQZIfIEXbhZZcpfWDJnAJe+R4lTGtVhzYsKhcRzS4=" />
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47147009-1', 'hugaddict.com');
ga('send', 'pageview');
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47147009-1']);
_gaq.push(['_trackPageview']);
</script>
<!-- Google Analytics -->
</head>
<body id="homeid">
<div id="wrapper">
<div id="container">
<div id="container_inner">
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul id="nav">
<li id="prints">
Tees
</li>
<li id="about">
About
</li>
<li id="contact">
Contact
</li>
</ul>
</div>
</div><!-- header -->
<div id="main">
<div id="notice">Hello, my name is . . . and I am an addict.</div>
<div id="mac_nav">
<ul>
<li id="shirt1">
Link
</li>
<li id="shirt2">
Link
</li>
<li id="shirt3">
Link
</li>
<li id="shirt4">
Link
</li>
<li id="shirt5">
Link
</li>
</div>
<div id="content">
<iframe src="shirts/dealing_huggie.html" width="520px" height="600px" name="shirts" scrolling="no"></iframe>
</div>
<div id="pc_nav">
<ul>
<li id="shirt6">
Link
</li>
<li id="shirt7">
Link
</li>
<li id="shirt8">
Link
</li>
<li id="shirt9">
Link
</li>
<li id="shirt10">
Link
</li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
You are using the relatively new universal analytics tracking code (analytics.js) but the event tracking code is for the older analytics version (ga.js). Either use the older version of analytics code or use the proper event tracking code for universal analytics:
instead of:
onClick="_gaq.push(['_trackEvent', 'Click', 'FemaleHugAddicted']);"
Use (you can use spaces for the category / action / label fields):
onclick="ga('send', 'event', 'Click', 'Female Hug Addicted', 'optional label name');"
You can read more here:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events
Related
I've a page in MVC which I want to reload automatically every 2 seconds without doing a refresh, I have seen examples
with Ajax but all referenced using buttons or in POST-GET events. I only want it to reload without refresh,
What can I do to perform that function?
Thank you
This's my view
#model MVC_PCMonitoring_Dash.Models.TablesPCModels
#{
ViewBag.Title = "Home Page";
}
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="~/Content/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
</div>
<div class="img bg-wrap text-center py-4" style="background-color: #A40033;">
<div class="user-logo">
<div class="img" style="background-image: url(Images/logo.jpg)"></div>
<h3>TOTAL PC</h3>
</div>
</div>
<ul class="list-unstyled components mb-5">
<li class="active">
Home
</li>
<li>
PC 1
</li>
<li>
PC 2
</li>
<li>
Exit
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<p align="right">#DateTime.Now</p>
<center>
<img src="~/Images/welcome.png" alt="centered image" />
</center>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use timer and ajax in this case.
setInterval(function(){ --ajax call to refresh---},2000) //2000 means 2 min
I am Using Bootstrap 3 class col-md-8 and the col-md-4.but the left column will not pull all the way to the left.
The original page works on Safari, and Firefox on Mac and Windows. IE8 does not work using header section html5shiv.js, responds.js,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Store Sale</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!--End Bootstrap-->
<!--Font Awesome-->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!--End Font Awesome-->
<!--<link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="css/style.css">
<!-- Pushy CSS -->
<link rel="stylesheet" href="css/pushy.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--DD Search-->
<script src="js/jquery.ddslick.js"></script>
<script src="js/main.js"></script>
<!--End DD-->
<!--[if lt IE 8]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
</head>
<body>
<!-- Pushy Menu -->
<nav class="pushy pushy-left">
<ul>
<li class="pushy-submenu">
Submenu 1
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 2
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 3
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 4
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
<li class="pushy-link">Item 4</li>
</ul>
</nav>
<!-- Site Overlay -->
<div class="site-overlay"></div>
<!-- Your Content -->
<!-- Menu Button -->
<div class="headerT">
<div class="col-md-2">
<div class="headerL menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<div class="col-md-8">
<div class="headerM">
<div class="logo"><img src="images/logo_1.gif" alt="Store Sales" class="img-responsive"></div>
<div class="navM">
<ul>
<li><img src="images/stores.png" alt="Stores" class="fade"><br/>Stores</li>
<li><img src="images/brands.png" alt="Brands" class="fade"><br/>Brands</li>
<li><img src="images/offers.png" alt="Offers" class="fade"><br/>Offers</li>
<li><img src="images/loyalty-cards.png" alt="Loyalty Cards" class="fade"><br/>Loyalty Cards</li>
<li><img src="images/vouchers.png" alt="Vouchers" class="fade"><br/>Vouchers</li>
<li><img src="images/favourites.png" alt="Favourites" class="fade"><br/>My Favourites</li>
<li><img src="images/shopoholic.png" alt="Shopoholic" class="fade"><br/>Shopoholic</li>
<div class="clearfix"></div>
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div class="headerR"><i class="fa fa-search" aria-hidden="true"></i><i class="fa fa-user" aria-hidden="true"></i><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>
</div>
<div class="clearfix"></div>
<!--Drop Down Animation Search Box-->
<div class="searchM">
<div class="container">
<div class="col-md-3 searchL">
<div id="demoBasic" class="dd-container">
</div>
</div>
<div class="col-md-6 searchMB searchMM">
<div id="searchMM">
</div>
</div>
<div class="col-md-3 searchF searchR">
<button type="button" class="btn btn-danger btn-dan">Search</button>
<i class="fa fa-filter" aria-hidden="true"></i>Filter Search
</div>
</div>
</div>
<!--End Drop Down Animation Search Box-->
<div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like</p>
</div>
<!-- Pushy JS -->
<script src="js/pushy.min.js"></script>
<script>
$( document ).ready(function() {
$( ".search" ).click(function() {
$( ".searchM" ).toggle( "blind" );
});
});
</script>
</body>
</html>
i think this should be ie9, so it just can search < ie9.
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
I've found this similar error mentioned since Foundation 3, usually because foundation.min.js was not included. I have this included but links in the dropdown menu are not working.
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>dashboard</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>chapters</li>
<li>sections</li>
<li>paragraphs</li>
<li>references</li>
<li>annotations</li>
<li>help</li>
<li class="has-dropdown">
Create
<ul class="dropdown">
<li>new chapter</li>
<li>new section</li>
<li>new paragraph</li>
<li>new annotation</li>
</ul>
</li>
</ul>
</section>
</nav>
</body>
</html>
Am I missing a setting? I've seen preventDefault() mentioned as a possible culprit, but why on earth would the default click behavior be prevented...for clickable menu links?
The $(document).foundation(); line must be invoked before the closing BODY tag, not HEAD tag. I was loading foundation before the DOM elements had loaded.
This explains the whacky behavior.
I use angular-ui-router for routing pages. The problem is like the title of this. The first ui-view displays the page normally. the second ui-view display
the first loaded page and unchanged. I don't want to display second one.
'use strict';
angular.module('test').config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
<html lang="en" ng-app="RedCA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RedCA Admin</title>
<link rel="stylesheet" href="css/main.min.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-loader.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-sanitize.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-touch.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="components/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="components/ng-table/dist/ng-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-3.0.3/js/bootstrap.min.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<!-- Ace settings handler -->
<script type="text/javascript" src="components/ace.min/js/ace-extra.min.js"></script>
<!-- Ace Script -->
<script src="components/ace.min/js/ace-elements.min.js"></script>
<script src="components/ace.min/js/ace.min.js"></script>
<!-- Ace Styles -->
<!-- <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-fonts.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-rtl.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-skins.min.css"/> -->
<script type="text/javascript" src="components/angular-1.2.5/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/routingConfig-thirdparty.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/st-openpms.concat.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/dashboard.min.js"></script> <!-- rdash augular ui -->
<script type="text/javascript" src="openpms-st-test.templates.js"></script> <!-- openpms st -->
</head>
<body ng-controller="redcaCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
<!-- <li class="sidebar-list">
Test <span class="menu-icon fa fa-tachometer"></span>
</li> -->
<li class="sidebar-title"><span>Demonstration</span></li>
<li data-access-level="accessLevels.admin" active-nav>Demo Page</li>
<!-- ///smart town
{{DOC_BASE}} -> # -->
<li class="sidebar-title"><span>SmartTown Sample</span></li>
<br>
<li data-access-level="accessLevels.user" active-nav>Home</li>
<!--<li>Select Project </li>-->
<li data-access-level="accessLevels.user" active-nav>Main Menu</li>
<!--<li data-access-level="accessLevels.user" active-nav>Chat</li>-->
<li data-access-level="accessLevels.user" active-nav>ChatMulti</li>
<li data-access-level="accessLevels.user" active-nav>Noti</li>
<!--<li data-access-level="accessLevels.anon" active-nav>Log in</li>-->
<li data-access-level="accessLevels.anon" active-nav>Register</li>
<li data-access-level="accessLevels.admin" active-nav>Comm Pic</li>
<!--<li data-access-level="accessLevels.admin" active-nav>CRUD sample</li>-->
<li data-access-level="accessLevels.admin" active-nav>Comm</li>
<li data-access-level="accessLevels.admin" active-nav>Punch</li>
<li data-access-level="accessLevels.admin" active-nav>Register</li>
<!--<li data-access-level="accessLevels.user" active-nav>Private</li>-->
<li data-access-level="accessLevels.admin" active-nav>Admin</li>
<li data-access-level="accessLevels.user">Log out</li>
<!-- ///smart town -->
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Redca Administration
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
try to call .otherwise on $routeProvider:
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/a.html',
controller: 'ctrlA'
})
.when('/b/:tagId', {
templateUrl: '/b.html',
controller: 'ctrlB'
})
.when('/another', {
templateUrl: '/another.html',
controller: 'ctrlC'
})
.otherwise({ redirectTo: '/' });
});
since sveral days i am trying to fix issues with Jquery-ui i am using Visual 2010 and the MVC 4 i correct the bundle and the layout to render scripts and the CSS here my code :
#{
ViewBag.Title = "About";
}
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<article>
<div>
<label for="date">Select a date:</label> <div id="mydate"> < #Html.JQueryUI().Datepicker("mydate") </div>
</div>
</article>
<aside>
<h3>Aside Title</h3>
<p>
Use this area to provide additional information.
</p>
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</aside>
and here is the sources code from Chrome :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.js"></script>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<hgroup class="title">
<h1>About.</h1>
<h2>Your app description page.</h2>
</hgroup>
<article>
<div>
<label for="date">Select a date:</label> <div id="mydate"> < <input data-jqui-dpicker- dateformat="dd/mm/yy" data-jqui-type="datepicker" id="mydate" name="mydate" type="text" value="" /> </div>
</div>
</article>
<aside>
<h3>Aside Title</h3>
<p>
Use this area to provide additional information.
</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</aside>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
</body>
</html>
Solved
i was missunderstanding the way it wroks it was solved by adding some javascript