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!
Related
I have an HTML5 game built with NW.js that makes a GET request to my website to retrieve a static data file, file.json, hosted at www.example.com/file.json on Heroku.
One of my users can navigate to www.example.com/file.json and see the file properly, but when they open the game, this request returns HTML from a different site. After over 100,000 users, they are the first one to experience this.
The HTML response the user gets is this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=980,user-scalable=yes,maximum-scale=2.0" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" href="/steal-built/production.css" />
<script src="/js/thirdParty/jquery-1.8.3.min.js"></script>
<script src="/gui/js/jquery-utils.js"></script>
<script src="/gui/js/gui-core.js"></script>
<script src="/gui/js/gui-api.js"></script>
<script src="/js/thirdParty/modernizr.custom.js"></script>
<script src="/js/thirdParty/yepnope.1.5.4-min.js"></script>
<script src="/js/thirdParty/cssua.js"></script>
<script src="/js/thirdParty/moment.js"></script>
<!--noUI slider plugin: http://refreshless.com/nouislider/ -->
<script src="/js/thirdParty/jquery.nouislider.min.js"></script>
<!--jquery sort elements plugin: http://james.padolsey.com/javascript/sorting-elements-with-jquery/ -->
<script src="/js/thirdParty/jquery.sortElements.js"></script>
<!-- datepicker plugin: http://amsul.ca/pickadate.js/ -->
<![if gte IE 9]>
<script src="/js/thirdParty/pickadate.min.js"></script>
<![endif]>
<!-- datepicker: legacy for older browsers -->
<!--[if lte IE 8]>
<script src="/js/thirdParty/pickadate.legacy.js"></script>
<![endif]-->
<!-- jQuery plugin for parsing CSV file format: https://code.google.com/p/jquery-csv/ -->
<script src="/js/thirdParty/jquery.csv-0.71.min.js"></script>
<!-- MD5 encryption library -->
<script src="/js/thirdParty/md5.js"></script>
<!--ie polyfill for console.log and related -->
<script src="/js/modemUI/console-polyfill.js"></script>
<script src="/js/thirdParty/dust-full-0.3.0.js"></script>
<script src="/js/thirdParty/dust-helpers-1.1.1.js"></script>
<script src="/js/thirdParty/raphael.js"></script>
<!-- For calculating subnet masks https://github.com/franksrevenge/IPSubnetCalculator -->
<script src="/js/thirdParty/IPSubnetCalculator.js"></script>
</head>
<body>
<!--div that is used to identify if the user's browser is (likely) a mobile device. Will be hidden by css, then examined with js-->
<div id="div-is-smartphone"></div>
<div id="root-view"></div>
<!-- IE6 specific style here in case javascript disabled -->
<!--[if lte IE 6]><style type="text/css">#init-screen {position: absolute; height: 480px;}</style><![endif]-->
<!-- if we have no javascript, hide activity-indicator -->
<noscript><style type="text/css">#init-screen .activity-indicator{display: none}</style></noscript>
<div id="init-screen">
<div class="middle">
<div class="icon"></div>
<div class="title"></div>
<div class="activity-indicator"></div>
<div class="error-message">
<noscript>No javascript / Javascript absent</noscript>
</div>
</div>
<div class="logo"></div>
</div>
<div id="init-log" style="display: none;">
<div class="header">
<span class="close">x</span>
<span class="title">Initialization Log</span>
</div>
<div class="content">
<table></table>
</div>
</div>
<script src="/steal/steal.production.js?steal-built/production.js"></script>
</body>
</html>
Again, there is no chance that this is being served from my site. Could the user be affected by malware? They said they didn't mess with any configuration files in Windows, but I have my doubts. I checked their request headers, and everything looked completely normal.
Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.
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.
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
I am trying to use bootstrap scaffold for first time and wonder if I can do that.
<header class="row"></header> // this covers browsers width
<div id="main-container" style="maring:auto; max-width:1200px"> I want this to be centered and not more than 1200px
<div class="row" class="span12" id="main">
</div>
</div>
The idea is that I want to use the scaffolding feature in different areas inside my html document independently, can I do it or I am forced to go on a whole page perspective ?
Well.. the first thing you're going to want is to start with this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You do not have to do the entire page, you only put it around whatever you want.
<!-- The container is necessary for your rows -->
<div class="container">
<!-- Each row will hold a row of 'spans' -->
<div class="row">
<!-- This will center whatever content you want. -->
<div class="offset2 span8">
</div>
</div>
</div>