I have an Razor view with an href anchor tag. I have an onclick event.
When I click on the link, the confirm prompt appears. However, if I choose "Cancel" it still executes the code - the MVC method.
Here is the Razor view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
window.location = $(this).attr('href');
}
// Stop the default action.
e.preventDefault();
}
</script>
I tried using jQuery (adding a deleteaccount class to the link) and it does not prompt all. It just goes right to executing the code.
Here is the Razor view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw deleteaccount"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
$('.deleteaccount').click(function (e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
// The button's href will be = to: ?????????????.
window.location = $(this).attr('href');
}
e.preventDefault();
});
</script>
I tried solving your issue, and below is one of the solution:
The default behavior of the a tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false or the event hasn't been prevented.
In your case event is not prevented a you have not passed the event as parameter to your ConfirmDelete() method. Hence both onClick and Href is executed.
So try this Out:
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
return true;
} else {
return false;
}
// Stop the default action.
// e.preventDefault();
}
<i class="fa fa-table fa-fw"></i> Delete Account
Related
Im trying to find my element in my HTML file, but it returns null even though its there.
I cant find something wrong with my code, neither in the html.
I read the other suggested threads on stackoverflow and have already wrapped it in an onload function, but it still not seem to work.
This is my JS file
window.onload = run();
function run(){
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
This is the HTML file
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
I believe the issue is not get getElementById returns null
but this line
var archived = localStorage.getItem("arkiv");
Could you please specify if you are really storing the value at localstorage?
Your element is found, check the result before the error (localstorage security error, specific to stackoverflow)
window.onload = run();
function run(){
console.log(document.getElementById("archivedmovies"));
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
Looks more a problem with your local storage array perhaps? If I code archived by hand the loop is run and object found....
window.onload = run();
function run(){
var archived = 'asddasdasd,asdsdasdas'
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
alert(getUL);
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
}
http://jsfiddle.net/1hwdaL4c/3/
Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?
You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.
Im trying to build responsive website. To do that, Im using Bootstrap 3. I have downloaded Bootstrap 3 and imported to my website root directory:
I don't know why, but on small screen it doesn't show my icon:
My code:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/jquery-2.1.1.js"></script>
<script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script src="../js/script.js"></script>
<title>
title
</title>
</head>
<body>
<header class="top" role="header">
<div class="container">
<a href="../aplikacija/app.html" class="navbar-brand pull-left">
Application
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li>APP</li>
<li>UX</li>
</ul>
</nav>
</div>
</header>
<div id="app" class="content">
</div>
</body>
</html>
Your glyphicon span should have the following class: glyphicon glyphicon-align-justify as opposed to just glyphicon-align-justify
I would suggest not using align justify in the span as a class - just display the glyphicon and then justify it in an outside div.
<div class="text-justify">
<span class="glyphicon glyphicon-align-justify"></span>
</div>
here is some more info - http://getbootstrap.com/components/#glyphicons-how-to-use
I have a dynamic page that have a main structure and the different content loads in another page. I have a menu with active class, but it's doesn't apply because the page doesn't reload, it's a # url.
The main structure is:
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>ArqOS Scheduler</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/demo.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,900,500,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="divHead"></div>
<div class="divBody"></div>
<div class="footerrow"> </div>
JQuery:
$(window).load( function(){
$('nav navbar-nav li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
$('.divHead').load("head.html");
$('.divBody').load("home.html");
$('.footerrow').load("foot.html");
});
function fLoadPage(page){
$('.divBody').load(page);
}
DivHead, DivBody and footerrow loads in another document, and all it's called on the main menu here (in the head.html):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="width: 171px;">
<a class="navbar-brand" href="index.html">ArqOS Scheduler</a></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Nodes</li>
<li>Tasks</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Nodes and tasks.html have only the main content, not the nav and the footer (this is done to avoid repeating content such as header or footer). Because the url is #, it's not reload the page, so the class active doesn't apply to the new page, how can i solve this?
This is the foot.html:
<div class="col-sm-4">
<p class="info"> Copyright 2014 © xxx</p>
</div>
<div class="col-sm-8 text-right">
<p class="info2"> Acerca de | Contacto | Encontrar trabajo | Política de privacidad </p>
</div>
Thanks.
try this
$(window).load( function(){
$(document).on("click",".navbar-nav li a" ,function() {
$('.navbar-nav li').removeClass("active");
$(this).parent().addClass("active");
return false;
});
$('.divHead').load("head.html");
$('.divBody').load("home.html");
$('.footerrow').load("foot.html");
});
I think your event doesn't gets triggered properly. Check out this post to see how you would listen to a hashchange event. Also there is a jQuery plugin that would enable this functionality.
<li>Nodes</li>
Did you mean this?
i want to create a navigation bar in bootstrap
everything works fine except one. when ever I resize the browser to width of mobile and click on the toggle button the dropdown menu does not open.
Please help me. All I wanted is "when ever i click on the stacked toggel button i want the drop down to open".
I have also made changes to class as well as ids in data-toggle attribute of the button.
I have included jquery, bootstrap js and bootstrap css. I have displayed the entire code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
Try the following code to include jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Updated :
Are you sure that you linked bootstrap js file properly ?
Remove bootstrap js from ,Try by adding them before </body> and after jQuery library. Below is the correct code (Hope :) )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>