Bootstrap navbar links don't work - javascript

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!

Related

Simple Bootstrap theme not working on localhost

I downloaded this basic header theme, and added to my index.php on localhost, using uwamp. Click here for link
<!DOCTYPE html>
<html lang="hu">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Generate classes to fix InternetExplorer bugs -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<head>
<!-- ~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Set the website title -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<title></title>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Google Webmasters code for the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta name="google-site-verification" content="">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Meta tags for the website seo -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Language" content="hu-hu">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="revisit-after" content="">
<meta name="distribution" content="local">
<meta name="language" content="hu">
<meta name="rating" content="general">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add OpenGraph meta tags for sharing the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:locale" content="hu_HU">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add the websites base href link -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--<base href="">-->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Canonical link -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="" rel="canonical">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add the favicon to the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="/images/assets/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/images/assets/favicon.ico" rel="icon" type="image/x-icon">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Include css style files -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<nav class="navbar navbar-default navigation-clean-button">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<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="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li class="active" role="presentation">First Item</li>
<li role="presentation">Second Item</li>
</ul>
<p class="navbar-text navbar-right actions"><a class="navbar-link login" href="#">Log In</a> <a class="btn btn-default action-button" role="button" href="#">Sign Up</a></p>
</div>
</div>
</nav>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Include jQuery library, Bootstrap responsive framework, and other javascript files -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
If i view the site source in the browser, i can find and open all the css and js files, so the way to the files is correct.
My problem is, that i dont get anything on the page, no css style, i cant see the nac items...Only just the logo text.
Whats going wrong? The bootstrap css and js are downloaded from the offical bootstrap site. I commented the base href also, beacuse the site isnt on a server.

Bootstrap responsive not working after including Viewport meta

As the title says the responsive feature of Bootstrap 3.0 is not working on any mobile device (Android, iPad) in my website. It works perfectly in chrome and firefox by making the window smaller.
I know a common problem is forgetting to include the
<meta name="viewport" content="width=device-width, initial-scale=1">
but I already have it inside my header tag like this:
Full HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<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="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.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>
<!-- HTML5 shim and Respond.js for 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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" 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>
</nav>
<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.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
Custom CSS Code
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
Am I missing something else? I have found a lot of posts related to this problem but all seem to be solved by adding the meta tag.
I even tried with two default templates from getbootstrap.com adding the meta tag manually and other meta tags found on other websites but it wont work. Any idea why?
Also I already added the root for the javascript functions at the bottom of the code (not sure if this helps but it enabled the slide menu coming from the 3 line button of the responsive feature).
Website
Your site pulls in http://sales-person-fish-27838.bitballoon.com/ via an iframe. Go directly there and it works fine. What host or how are you loading your content.

jQuery problems with Bootstrap

need to learn the basics of bootstrap for a new project coming up but so far its hurting my brain.
For some reason, I cannot get basic jQuery to function on the website.
Heres a jsFiddle of the basic bootstrap:
http://jsfiddle.net/D2RLR/6891/
Here is the pay structure:
<!DOCTYPE html>
<?php
// require the database connection / action class
require('libs/PHP_Classes/class.database.php');
require('libs/PHP_Classes/class.table.php');
?>
<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>PHPGamble</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.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="js/ie-emulation-modes-warning.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>
<!-- Begin page content -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Players On Table</h3>
</div>
<div class="panel-body" id="playerList">
Player 1 Player 2
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Copyright Craig Lovelock 2014</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function(){
$('#playerlist').html('ss');
});
</script>
</body>
</html>
The playerlist will not change the html, The .html() is just to test. Nothing I try is working...
A you can see in the example it doesnt work, have tested it in a blank fiddle and ofcourse it works fine.
Cannot see why this is failing, its so simple.
Craig.
You are calling playerlist when you should playerList. JavaScript is case sensitive:
http://jsfiddle.net/D2RLR/6892/
jQuery is working well just what you have to do is pass correct id to jQuery. Change
$(document).ready(function(){
$('#playerlist').html('ss');
});
to
$(document).ready(function(){
$('#playerList').html('ss');
});

Load links inside container (Bootstrap Stater-Template)

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.

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