I am having trouble getting the jQuery easySlider working. Can anyone find where I am going wrong?
<%# Page Title="About me" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="About.aspx.cs" Inherits="About" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>About me</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</asp:Content>
The jQuery files name and paths are all correct. I can't seem to find where else the problem might be.
EDIT
When the page is rendered, this is what the HTML code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>About me</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type='text/javascript' src='Scripts/jquery.cookie.js'></script>
<script type='text/javascript' src='Scripts/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#accordion-menu').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
showCount: false,
speed: 'slow'
});
$('#slider').easySlider();
});
</script>
</head>
<body>
<div id="header">
<div class="headerLogo"><img src="Styles/images/reading_uni_logo.gif" /></div>
<div class="loginDisplay">Welcome <span id="HeadLoginName">Username</span>! | Logout</div>
<div class="news">
</div>
<div class="polls"><span id="question">Do you think the library should be open 24 hours?</span>
<br />See more</div>
</div>
<div id="addGadgetButton">Add gadget</div>
<div id="menu">
<ul class="menu" id="accordion-menu">
<li>Home</li>
<li class="current-parent">Getting Started</li>
<li>Apps
<ul>
<li>Apps 1</li>
<li>Apps 2</li>
<li>Apps 3</li>
</ul>
</li>
<li>Social
<ul>
<li>Social 1</li>
<li>Social 2</li>
<li>Social 3</li>
<li>Social 4</li>
</ul>
</li>
<li>About me</li>
</ul>
</div>
<div id="main">
<h2>
About me
</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
<div class="clear" />
<div id="footer">
<a id="FeedbackHyperLink" href="Feedback.aspx">Feedback</a> |
<a id="ContactHyperLink" href="Contact.aspx">Contact us</a> |
<a id="SitemapHyperLink" href="Sitemap.aspx">Sitemap</a> |
<a id="HelpHyperLink" href="Help.aspx">Help</a>
</div>
</body>
</html>
Try referencing jquery-1.7.js first:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
Since easySlider1.7.js extends jquery and expects it to be already defined.
Anytime you use a jquery plugin(jquery UI or whatnot), remember to reference jquery first. I looked at the examples for easySlider1.7, and the examples correctly references jquery first. A good debugging technique to use is to start with what works, i.e. the examples, and try to find the differences between what works and what doesn't. In this case the difference was that you referenced jquery after the plugin.
You need to load jQuery before you load easySlider, so just change the order of the scripts:
From:
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
To:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
That should do the trick :)
Related
I use a _layout cshtml to get all the same start screen. It works on the index page but when i go to the next the css of bootstrap is missing. I added a bootstrap layout but know it doesnt do the layout on the next screen. I could also send you the zip if you want with all the code. The index false exist out only the layout page without any content when you go to an other page you get the text of the layout but not the bootstrap css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Project</title>
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/favicon.png" />
</environment>
</head>
<body>
<div id="wrapper">
<header>
<div class="container ">
<!-- end toggle link -->
<div class="row nomargin">
<div class="span12">
<div class="headnav">
<ul>
<li><a asp-area="" asp-controller="Home" asp-action="Registreer"><i class="icon-user"></i>Registreer</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Login" data-toggle="modal">Inloggen</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span2">
<div class="logo">
<a asp-area="" asp-controller="Home" asp-action="Index"><img src="img/logo_kraan.jpg" alt="" class="logo" /></a>
</div>
</div>
<div class="span10">
<div class="navbar navbar-static-top ">
<div class="navigation">
<nav>
<ul class="nav topnav">
<li class="">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</i></a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Statuten">Statuten</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Bestuur">Raad van bestuur</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Seminaries">Seminaries</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="ESCL">Over ESCL</a>
</li>
<li class="dropdown">
Opdrachten <i class="icon-angle-down"></i>
<ul class="dropdown-menu bold">
<li><a asp-area="" asp-controller="Home" asp-action="OverheidsOpdrachten">OverheidsOpdrachten</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="PrivateOpdrachten">Private Opdrachten</a></li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Forum">forum</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact </a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</div>
</div>
</header>
</div>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
<hr />
</div>
<environment include="Development">
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jcarousel/jquery.jcarousel.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<script src="js/animate.js"></script>
<!-- Template Custom JavaScript File -->
<script src="js/custom.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
<footer>
<div class="container">
<div class="row">
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Browse pages</h5>
<ul class="link-list">
<li>About our company</li>
<li>Our services</li>
<li>Meet our team</li>
<li>Explore our portfolio</li>
<li>Get in touch with us</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Important stuff</h5>
<ul class="link-list">
<li>Press release</li>
<li>Terms and conditions</li>
<li>Privacy policy</li>
<li>Career center</li>
<li>Flattern forum</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Get in touch with us</h5>
<address>
<strong>Flattern studio, Pte Ltd</strong><br>
Springville center X264, Park Ave S.01<br>
Semarang 16425 Indonesia
</address>
<p>
<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
<i class="icon-envelope-alt"></i> email#domainname.com
</p>
</div>
</div>
</div>
</div>
<div id="sub-footer">
<div class="container">
<div class="row">
<div class="span6">
<div class="copyright">
<p>
<span>©BVBR-ABDC</span>
</p>
</div>
</div>
<div class="span6">
<ul class="social-network">
<li><i class="icon-facebook icon-square"></i></li>
<li><i class="icon-twitter icon-square"></i></li>
<li><i class="icon-linkedin icon-square"></i></li>
<li><i class="icon-pinterest icon-square"></i></li>
<li><i class="icon-google-plus icon-square"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</html>
Bootstrap template:
https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/
All the file references you use in this sample are relative to the page path, so the files need to be there. Since ASP.net will start the default "home" page at (for instance) at http://localhost:33333/ the browser will request that url + css/filename.css and this will work for the first page.
Although if you navigate to http://localhost:33333/Home/Index (which is essentially the same page) it won't work anymore, because the browser will request the css at url + /home/index relative path + css/filename.css (resulting in not finding http://localhost:333333/home/css/filename.css )
You can resolve this quite easily by altering your layout.cshtml from this:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
to this:
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" />
<!-- ^ --->
as you can see there is an added slash (/) before the file path. This will instruct the browser to always use the root of the url and not a relative path to the current location.
I cannot get the topbar to work on small screens (www.mco.ntx-designs.com is where you can see). When you press the menu icon, nothing happens. I know that JQuery is loading and I mut presume that the foundation.topbar.js is loading as well but I have racked my brain and cannot figure this out. Here's my code:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MCO.Master.cs" Inherits="mco.SiteMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head runat="server">
<title></title>
<link href="~/Styles/mco.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/foundation.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/foundation.min.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/normalize.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/vendor/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/vendor/modernizr.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!--<script type="text/javascript">
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
} else {
alert("jQuery library is not found!");
}
</script>-->
<form runat="server">
<script src="~/Scripts/foundation.js" type="text/javascript"></script>
<script src="~/Scripts/foundation/foundation.topbar.js" type="text/javascript"></script>
<Header class="row" id="masterpageHeader">
<div class="large-12 medium-12 small-12" id="logoTop">
<asp:Image ImageUrl="~/images/mcoLogo.png" runat="server" AlternateText="Melissa Community Outreach Logo" />
</div>
<div class="sticky large-12 medium-12 small-12">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
<ul class="title-area">
<li class="name">
<h1>Melissa Community Outreach</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">
<!-- Right Nav Section -->
<ul class="right">
<li runat="server" id="mainHomeLink" class=""><asp:HyperLink ID="HyperLink13" runat="server" NavigateUrl="~/">Home</asp:HyperLink>
</li>
<li runat="server" id="mainGivingLink" class=""><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
</li>
<li runat="server" id="mainVolunteeringLink" class=""><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
</li>
<li runat="server" id="mainHoursLink" class=""><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
</li>
<li runat="server" id="mainLocationLink" class=""><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
</li>
<li runat="server" id="mainAboutLink" class="has-dropdown">
<asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="~/about/">About</asp:HyperLink>
<ul class="dropdown">
<li class="active"><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/mission-statement/">Mission Statement</asp:HyperLink>
</li>
<li><asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="~/directors/">Directors</asp:HyperLink>
</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>
Privacy Policy
</li>
</ul>
</section>
</nav>
</div>
</Header>
<main class="row">
<div class="large-12 medium-12 small-12">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</main>
<footer class="row" id="footerMain">
<div class="large-12 medium-12 small-12" id="newsletterFooter">
<div class="large-6 medium-6 small-12 left column">
<span class="largerText2">Stay up to date with what's happening with Melissa Community Outreach</span><br />
<span class="smallerText">Sign up to receive monthly emails with our latest information:</span>
</div>
<div class="large-6 medium-6 small-12 right"><asp:TextBox ID="emailSignupMain" runat="server" Width="400px" Height="53px" CssClass="textBoxWhite left" ></asp:TextBox><span class="button left">Email</span>
</div>
<div class="clear"> <br /></div>
</div>
<div class="large-12" id="linksFooter1">
<div class="large-5 medium-5 small-12 borderRightSmall text-center columns"><span class="text-center" id="aboutFooterHead">Melissa Community Outreach</span><br /><br />
We are a non-profit organization that helps out needy families in Melissa, Texas. We provide food, clothing and other necessary items
for people who cannot afford to pay for these items themselves. If you or someone you know needs help please <asp:HyperLink ID="contactUs1" runat="server" NavigateUrl="~/contact">contact us</asp:HyperLink>
information about what services we offer.
</div>
<div class="large-7 medium-7 small-12 columns">
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">Important Links</span><br /><asp:HyperLink ID="feedingamerica" NavigateUrl="http://www.feedingamerica.org/" Target="_blank" runat="server">www.feedingamerica.org</asp:HyperLink>
<br />
<asp:HyperLink ID="theSamaritansInn" NavigateUrl="http://www.thesamaritansinn.org" Target="_blank" runat="server">The Samaritan's Inn</asp:HyperLink>
<br /><br /><br /></div>
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">More Text</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
<div class="large-4 medium-4 small-4 text-center columns"><span class="largerText">More Text 2</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
</div>
</div>
<div class="large-12 medium-12 small-12" id="footerRed">
<div class="large-6 medium-6 small-12 left column">
<span class="smallerText">Copyright © 2012 <strong><asp:HyperLink ID="ntxDesigns" runat="server" NavigateUrl="http://www.ntx-designs.com" Target="_blank">NTX Designs</asp:HyperLink></strong>. All right reserved.</span>
<span class="largerText"><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/about/">About</asp:HyperLink> </span>
</div>
<div class="large-6 medium-6 small-12 text-right right column">
<asp:Image ID="googleIcon" ImageUrl="~/images/social-049_google.png" runat="server" AlternateText="Google Social Media Icon" />
<asp:Image ID="Image1" ImageUrl="~/images/social-043_twitter.png" runat="server" AlternateText="Twitter Social Media Icon" />
<asp:Image ID="Image2" ImageUrl="~/images/social-046_facebook.png" runat="server" AlternateText="Facebook Social Media Icon" />
</div>
</div>
</footer>
</form>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
Any help with this would be greatly appreciated!
Yep! Added a runt="server" and everything works perfectly. Thanks!
I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.
Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL
I have placed a bootstrap navbar in a .net masterpage. This code runs perfectly when on another page without the masterpage, but if on the masterpage, it does not work.
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/pnotify/css/jquery.pnotify.default.icons.css" rel="stylesheet"
type="text/css" />
<script src="../plugins/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.15/jquery.form-validator.min.js"
type="text/javascript"></script>
<script src="../plugins/notify/notify.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Log Out</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Anyone? About to throw my computer out the window.
/Bob
if you check your browser inspection tool, I think you may be having this error:
Error("Bootstrap requires jQuery")
Bootstrap.js has a jQuery dependency. So you need to load the jQuery first script before bootstrap.js.
this should be the order. right above the </body> tab. The path should be relative to where you have placed your file.
NOTE: use /parent_folder/..path_to_your_files
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
Hope this helps. :-)
I have the following master page in asp .net:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<form id="form1" runat="server">
<div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div> <!-- /container -->
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The navigation is made like this for every page:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
What I cannot figure out is how could I make it so that, if admin is requesting the page, add the Boss Stuff link?
In terms of session management and all that it's all good, I'm able to determine in my code behind if the user is admin, what I do not know is how to add the boss link only if he is admin on page load.
What might be a 'best' or standard practice way to do this?
Thanks
I mean, literally, how do I, from my page load event, add links to my navigation. How do I go from the CS to the aspx?
Assuming you are using .Net membership, something as simple as this could be done if you want to do it in the page markup:
<% if (Page.User.IsInRole("Admin"))
{ %>
Boss Stuff
<% } %>