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
Related
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.
For most of today I can't get my bootstrap v4 collapsable hamburger menu to work on my local xampp server. Strangely, it works just fine on my public website! The hamburger appears at 768 px wide display. This is problem is present in Chrome and Firefox.
I'm at a loss. I've combed through similar stackoverflow threads but haven't found anything that addresses my problem. My navbar code block is also identical to the navbar example in the Bootstrap class on lynda.com.
I know this much:
I am using the latest minified version of jquery, and the order of the javascript script files in the "head" section of my xampp/local "index.html" doc is identical to the one in my hosted/public server index.html file. Here's a difference that may or may not matter: I use CDN links to access all bootstrap files for my public/hosted page, and use relative link paths to access the JS/CSS files on my computer for my XAMPP/local website ("htdocs" is the root folder for my xampp setup).
To rule out some things, I copy/pasted the nav bar code block from my public page (the code that makes the hamburger icon expand upon click) into my local index.html file which is hosted on xampp. No joy. I know the relative folder paths are correct for the javascript files in my local xampp server (htdocs is the root folder, and the JS files are in the "js" folder).
I also tried re-downloading the newest version of jQuery (3.2.1) into my local folder thinking maybe the file I was using was corrupted, but still nothing. I'm assuming the hamburger menu functionality is a jQuery thing, but perhaps it's javascript.
Finally: I checked the console for my local "index.html" page and there were no errors.
So what gives? Why isn't my hamburger menu working on my local production server but works fine on my public page? Does it have to do with the javascript files being loaded via CDN vs locally on my hard drive?
Please see below my head and nav bar code block for my local production/xampp server (this is the code that doesn't work) and then the code block for my head and nav bar (this is the code that does work). I think the problem lies in the "head" section and how js is linked/accessed.
Thanks for any help!
<head>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html" http-equiv="Content-Type"/>
<meta content="Steve Gladwin" name="description"/>
<meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Local CSS File -->
<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
<title>Steve Gladwin</title>
<!-- Bootstrap Javascript/jQuery -->
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap JS Tether -->
<script src="/js/tether.min.js"</script>
<!-- Bootstrap JS -->
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<!-- <div class="container">
<div class="row">
<div class="col-md-12"> -->
<nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
<!-- <div class="container"> -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
<!-- </div> -->
<div class="collapse navbar-collapse" id="burgercollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
<li class="nav-item"><a class="nav-link" href="#">Social</a></li>
</ul>
</div> <!--collpase-->
</nav>
<head>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html" http-equiv="Content-Type"/>
<meta content="Steve Gladwin" name="description"/>
<meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Bootstrap Javascript/jQuery -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> -->
<!-- script src="css/bootstrap-4.0.0-alpha.6-dist/tether-1.3.3/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
</script> -->
<!-- <script src="css/bootstrap-4.0.0-alpha.6-dist/js/jquery-3.2.1.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
</script> -->
<!--<script src="css/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>-->
<!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-reboot.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen">
<title>Steve Gladwin</title>
</head>
<body>
<!-- <div class="container">
<div class="row">
<div class="col-md-4">
<h2>Steve Gladwin</h2>
</div> -->
<!-- <div class="container">
<div class="row">
<div class="col-md-12"> -->
<nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
<!-- <div class="container"> -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
<!-- </div> -->
<div class="collapse navbar-collapse" id="burgercollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
<li class="nav-item"><a class="nav-link" href="#">Social</a></li>
</ul>
</div> <!--collpase-->
</nav>
your markup on the 1st code block is malformed
<script src="/js/tether.min.js"</script>
you're missing the closing >
You reference CDNs in your other code block also and relative files on your local version. Be sure that they are referenced correctly.
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!
My friends have asked me to make a website for their production company, which I've been working on, but as I am not a professional web designer, I've run into some issues. I've worked on this site by customizing a template I found online. However, I've come across an issue that I can't seem to fix despite searching here and on several other sites. The links in the navbar do not function when clicked. I was hoping someone could take a look and see if they've got any suggestions. The site can be found here.
This is my index HTML file-
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="robots" content="all,follow">
<meta name="googlebot" content="index,follow,snippet,archive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great Red Spot Productions | New Orleans, LA</title>
<meta name="keywords" content="">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'>
<!-- Bootstrap and Font Awesome css -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme stylesheet -->
<link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes -->
<link href="css/custom.css" rel="stylesheet">
<!-- owl carousel css -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<!-- CSS Animations -->
<link href="css/animate.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png">
<!-- Mordernizr -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- Responsivity for older IE -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navigation" data-offset="120">
<!-- *** NAVBAR ***
_________________________________________________________ -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<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>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
<div id="all">
<!-- *** INTRO IMAGE ***
_________________________________________________________ -->
<div id="intro" class="clearfix">
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span>
</div>
</div>
</div>
</div>
</div>
<!-- *** INTRO IMAGE END *** -->
<!-- /#all -->
<!-- #### JAVASCRIPT FILES ### -->
<!-- js base -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- for demo purpose -->
<script src="js/jquery.cookie.js"></script>
<!-- waypoints for scroll spy -->
<script src="js/waypoints.min.js"></script>
<!-- maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/gmaps.js"></script>
<!-- masonry layout -->
<script src="js/masonry.pkgd.min.js"></script>
<!-- owl carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- jQuery scroll to -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- jQuery counter -->
<script src="js/jquery.counterup.min.js"></script>
<!-- jQuery parallax -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- main js file -->
<script src="js/front.js"></script>
</body>
</html>
I'm not sure what other files would be necessary for help, please just let me know if you need any other info.
There are errors in your javascript.Open the developer tools you can view that.That errors may be preventing that links from functioning.
The problem is your jquery.Please use of the latest jquery version 3.1.1,it may help you,And define them in the correct place of your code.Download the bootstrap and set it in your html page.
It looks like the tutorial/example you used had the links scroll to the section it referred to. We can see this is the case as when we click on a link the error comes from jquery.scrollTo.min.js.
There must be a function that is called every time you click the menu items. This would either be inline in your index file, or in one of the many js files you included.
One debug method would be to comment out js files included until the links correctly, this should work as when javascript on the page is turned off the links work just fine.
Good luck!
I am trying to load links/urls in a container field using Bootstrap Starter Template found at the following link: http://getbootstrap.com/examples/starter-template/
The following source code of the above page is given below.
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
My final goal is to load the links i.e. options from the navbar/menu bar inside the container. As of now, adding a url to
"About"
opens the link in a new webpage without my navbar. Instead I would like to open the link in the the following location:
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
This would ensure that the navbar would be present while I navigate through the pages.
Please let me know if you need any confirmation. The following link can be used to see the website:
http://getbootstrap.com/examples/starter-template/
There are global sections on each page, such as the logo, navbar, footer, and so forth. The .container and it's columns may or may not change per page. If you just want to change the text inside the .container you would make a page called about.html, link to it from all instances in your menu, and copy over the entire page. You can use includes, use a CMS, or copy the entire html and then changing the html inside the section you want. To load content inside a certain div from another source you can use jQuery or javascript or an iframe, but that is not the way to do create a site normally. You can look up iframes and loading html inside a div, there's help all over for that, but normal sites are not built that way.