how to solve "style sheet could not be loaded" in Bootstrap - javascript

I should at least get grey color navbar but I am getting red sign error in the bottom "Stylesheet could not be loaded". Even trying to remove one css at a time but nothing help.
I am also getting this error in console "ReferenceError: Popper is not defined".
Even I am not getting auto suggest in sublime related to bootstrap classes.
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta charset="UTF-8" name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="/" src="/images/logo.png" alt="your logo"/>
</div><!-- end container-->
</div><!-- end navbar-->
<div class="carousel slide" id="myCarousel">
</div><!-- end Carousel -->
<div class="row" id="bigCallout">
</div><!-- end bigCallout-->
<div class="row" id="featuresHeading">
</div><!-- end featuresHeading-->
<div class="row" id="features">
</div><!-- end features-->
<div class="row" id="moreInfo">
</div><!-- end moreInfo-->
<div class="row" id="moreCourses">
</div> <!-- end moreCourses -->
</div><!--end container -->
<footer>
</footer>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>

From Bootstrap site
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following s near the end of your pages,
right before the closing tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
<script src="path/jquery"></script>
<script src="path/popper"></script>
<script src="path/bootstrap"></script>
It seems you need to add popper.js in your application.Note the order of files from the above snippet

I had the same problem. I was using Bootstrap 3.3.7 and this message keeps appearing all the time. I solved this by changing from jQuery 3.3.1 (the latest as of now) to jQuery 1.12.4 which is an older version. The message disappears after I made the change. Hope this helps!
Related: twitter bootstrap 3 jquery minimum version

You can try Few things:
First and foremost - try using the CDN for bootstrap.
Try placing href before rel in the link tag.
add media="all"
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
Get back after the results.

Related

JQuery Steps Wizard CSS or JQuery not working

I am trying to work with jquery steps wizard, but I can not load the css apparently or it will be a problem with jquery and versions or the order in the header.
HTML The header:
<head>
<title>MY WIZARD STEP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="resources/images/icon_hand.png" type="image/png" />
<!-- BOOSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Font & fa icon (Awesome) -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<!-- Flatly Theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT"
crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- JQuery Steps (Wizard) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"
integrity="sha256-yUWanhHkxj+3ow0qZE6AtzP8lZkwLvPagULL6PnZMz0="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"
integrity="sha256-VyFbbsL+4WS8IrWijL0olTxDKbsCymITRf7zwexscMc="
crossorigin="anonymous"></script>
<!-- JQuery Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A="
crossorigin="anonymous"></script>
<!-- Jquery Steps CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/jquery.steps.css">
<!-- Personal styles -->
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<!-- Personal JS -->
<script src="resources/js/register.js"></script>
And the body:
<div id="example-vertical">
<h3>Main Info</h3>
<section>
<p>Proposal is a project idea that you bring together the Design Patterns as building blocks in order to solve a real life problem. Let's build one together!
<br>
<br> Name:
<br>
<input type="text" name="firstname">
<br> Description:
<br>
<textarea name="Text1" cols="40" rows="5"></textarea>
</p>
</section>
<h3>Sensors</h3>
<section>
<p>If your design includes any sensor please select a design patterns that best suits. If you can not find the design pattern that you want to use send it to us. We can add it to our library.
<br>
</p>
</section>
<h3>Processing</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Communications</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>User Interface</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Storage</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Voltage</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Physical</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
CSS jquery.steps.css:
https://github.com/rstaib/jquery-steps/blob/master/demo/css/jquery.steps.css
And register.js:
$("#example-vertical").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft"
});
I am deploying a war file to Apache Tomcat 9.0.0 but It looks like the css or steps js were not loaded
In jsfiddle work fine:
https://jsfiddle.net/yf1q3scc/62/
So, what is the problem here?
Thanks!

Uncaught Error: Bootstrap's JavaScript requires jQuery

First of all, thanks for your time looking at my problem!
Seccond, I have seen other questions like mine (for example:
Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs), but they didn't awnser my question.
So, here is the <head> of my <html>
<!DOCTYPE html>
<!-- metadata -->
<meta charset="UTF-8">
<!-- responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- [/] responsive -->
<!-- [/] metadata -->
<!-- links -->
<!-- bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- [/] bootstrap -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- [/] links -->
<!-- script -->
<!--<script src="js/action.js"></script>-->
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
<!-- [/] script -->
<title>standaard html</title>
</head>
<body>
<!-- hoofdnavigatie -->
<nav class="navbar navbar-default navbar-fixed-top bas_hoofdnav">
<!-- logo in menubalk -->
<a class="navbar-brand" href="#">
<img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >
</a>
<!-- [/] logo in menubalk -->
<ul class="nav nav-pills navbar-right bas_hoofdnav_knoppen">
<li role="presentation" class="active bas_hoofdnav_knp_actief">start</li>
<li role="presentation">over ons</li>
<li role="presentation">diensten</li>
<li role="presentation">winkel</li>
<li role="presentation">contact</li>
</ul>
</nav>
<!-- [/] hoofdnavigatie -->
</body>
as you can see I have included jquery and the bootstrap links. but even so... I get this error message:
Uncaught Error: Bootstrap's JavaScript requires jQuery
(anonymous function) # bootstrap.min.js:6
and here the error
Do I miss something here?
As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You need to put jQuery above the Bootstrap JS.
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
After sure you included jquery library and bootstrap using these commands?:
First, install jQuery using npm as follows:
npm install jquery --save
Second, install Bootstrap using npm as follows:
npm install --save bootstrap#3
My problem was in :
angular.json just change sorting for scripts files included under project .
"scripts": [
"node_modules/jquery/dist/jquery.js"
"node_modules/bootstrap/dist/js/bootstrap.js",
]
to be like this :
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/jquery/dist/jquery.js"
]

Errors mixup JQuery and Jquery mobile

I have some troubles with JQuery and JQuery mobile.
When i click on the links in my page, i have this error :
Uncaught Error: cannot call methods on page prior to initialization; attempted to call method 'bindRemove'
I have tried to change the position of the link rel and scripts, but it breaks my design...
Someone have an idea ?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accueil</title>
<!-- CSS -->
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- CSS splashscreen -->
<link rel="stylesheet" type="text/css" href="css/wemind/splashscreen.css" />
<link rel="stylesheet" type="text/css" href="css/wemind/styles_wemind.css" />
<!-- JS -->
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Scripts splashscreen -->
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script_splashscreen.js"></script>
</head>
<body>
<div id="promoIMG" />
<div data-role="page" id="main-page">
<div id="actionbar-main"><img src="img/ic_launcher.png" /></div>
<p class="text-accueil">Qui êtes-vous ?</p>
<div id="student-link"><img src="img/ic_student.png" /></div>
<p class="wemind-font">Student</p>
<div id="horiz-sep-main"><img src="img/ic_sep.png" /></div>
<div id="parent-link"><img src="img/ic_teacher.png" /></div>
<p class="wemind-font">Teacher</p>
</div>
Thank you in advance
Something in your js/ scripts is trying to act on a Mobile widget before it's initialized. Find whatever function is using bindRemove as a parameter and call it without any arguments first to initialize its widget before you call bindRemove.
I tried this :
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
window.location = $(this).attr("href");
});
});
</script>
i put this in the
but when i logout, i'm redirected to this page and the problem appear again...
I should be able to click a link without problem, it's very odd with a code that simple !

<head> JS scripts are not executing

I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.

MVC 5 Bootstrap template smartadmin - renderbody

I downloaded and bought the https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0 template, however I cant get it to work in my mvc 5 project properly.
I created my layoutpage using the "blankpage.html" example included in download.
The layout page works fine, but when I add the renderbody call and try to show page through my template. The renderbody call, keeps adding an extra unwanted div.
Which looks like
<div id="main" role="main">
</div>
TEXTADDED
and adds the text in the page after that additional div tag.
Althought the page using the template only contain a single word. In other words, my page using the layout contains the text "test". But renderbody generates:
<div id="main" role="main">
</div>
TEXTADDED
Do you have any clue? This is my layoutpage
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
#*#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
<title> SmartAdmin </title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Use the correct meta names below for your web application
Ref: http://davidbcalhoun.com/2010/viewport-metatag
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Basic Styles -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/font-awesome.min.css">
<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-production.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-skins.css">
<!-- SmartAdmin RTL Support is under construction
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-rtl.css"> -->
<!-- We recommend you use "your_style.css" to override SmartAdmin
specific styles this will also ensure you retrain your customization with each SmartAdmin update.
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/your_style.css"> -->
<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/demo.css">
<!-- FAVICONS -->
<link rel="shortcut icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<!-- GOOGLE FONT -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
</head>
<body class="">
<!-- possible classes: minified, fixed-ribbon, fixed-header, fixed-width-->
<!-- HEADER -->
<header id="header">
<div id="logo-group">
<!-- PLACE YOUR LOGO HERE -->
<span id="logo"> <img src="~/Areas/Admin/Template/img/logo-white2.png" alt="SmartAdmin"> </span>
<!-- END LOGO PLACEHOLDER -->
</div>
<!-- pulled right: nav area -->
<div class="pull-right">
<!-- collapse menu button -->
<div id="hide-menu" class="btn-header pull-right">
<span> <i class="fa fa-reorder"></i> </span>
</div>
<!-- end collapse menu -->
<!-- logout button -->
<div id="logout" class="btn-header transparent pull-right">
<span> <i class="fa fa-sign-out"></i> </span>
</div>
<!-- end logout button -->
#Html.Partial("_LoginPartial")
</div>
<!-- end pulled right: nav area -->
</header>
<!-- END HEADER -->
<!-- Left panel : Navigation area -->
<!-- Note: This width of the aside area can be adjusted through LESS variables -->
<aside id="left-panel">
<!-- User info -->
<div class="login-info">
<span>
<!-- User image size is adjusted inside CSS, it should stay as it -->
<a href="javascript:void(0);" id="show-shortcut">
<img src="~/Areas/Admin/Template/img/avatars/sunny.png" alt="me" class="online" />
<span>
john.doe
</span>
<i class="fa fa-angle-down"></i>
</a>
</span>
</div>
<!-- end user info -->
<!-- NAVIGATION : This navigation is also responsive
To make this navigation dynamic please make sure to link the node
(the reference to the nav > ul) after page load. Or the navigation
will not initialize.
-->
<nav>
<!-- NOTE: Notice the gaps after each icon usage <i></i>..
Please note that these links work a bit different than
traditional hre="" links. See documentation for details.
-->
<ul>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">ElAvtal</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">LarmAvtal</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">MäklarAvtal</span>
</li>
</ul>
</nav>
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i> </span>
</aside>
<!-- END NAVIGATION -->
<!-- MAIN PANEL -->
<div id="main" role="main">
<!-- MAIN CONTENT -->
<div id="content">
#RenderBody()
</div>
<!-- END MAIN CONTENT -->
</div>
<!-- END MAIN PANEL -->
<!--================================================== -->
<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script data-pace-options='{ "restartOnRequestAfter": true }' src="~/Areas/Admin/js/plugin/pace/pace.min.js"></script>
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-2.0.2.min.js"><\/script>');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>
<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="~/Areas/Admin/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
<!-- BOOTSTRAP JS -->
<script src="~/Areas/Admin/js/bootstrap/bootstrap.min.js"></script>
<!-- CUSTOM NOTIFICATION -->
<script src="~/Areas/Admin/js/notification/SmartNotification.min.js"></script>
<!-- JARVIS WIDGETS -->
<script src="~/Areas/Admin/js/smartwidgets/jarvis.widget.min.js"></script>
<!-- EASY PIE CHARTS -->
<script src="~/Areas/Admin/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>
<!-- SPARKLINES -->
<script src="~/Areas/Admin/js/plugin/sparkline/jquery.sparkline.min.js"></script>
<!-- JQUERY VALIDATE -->
<script src="~/Areas/Admin/js/plugin/jquery-validate/jquery.validate.min.js"></script>
<!-- JQUERY MASKED INPUT -->
<script src="~/Areas/Admin/js/plugin/masked-input/jquery.maskedinput.min.js"></script>
<!-- JQUERY SELECT2 INPUT -->
<script src="~/Areas/Admin/js/plugin/select2/select2.min.js"></script>
<!-- JQUERY UI + Bootstrap Slider -->
<script src="~/Areas/Admin/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- browser msie issue fix -->
<script src="~/Areas/Admin/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>
<!-- FastClick: For mobile devices -->
<script src="~/Areas/Admin/js/plugin/fastclick/fastclick.js"></script>
<!--[if IE 7]>
<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>
<![endif]-->
<!-- Demo purpose only -->
<script src="~/Areas/Admin/js/demo.js"></script>
<!-- MAIN APP JS FILE -->
<script src="~/Areas/Admin/js/app.js"></script>
<!-- PAGE RELATED PLUGIN(S)
<script src="..."></script>-->
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
$(document).ready(function () {
pageSetUp();
})
</script>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
<!-- Your GOOGLE ANALYTICS CODE Below -->
</body>
</html>
I take it you are using Visual Studio 2013? Install the Web Essentials plug in then launch the application, then make browser window smaller - Use the inspect feature to hover over the div in browser - and it should highlight code in Visual Studio that is rendering the div.
You can find a great SmartAdmin integration to MVC .NET tutorial here:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5

Categories