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.
Related
I'm wondering whats the right way to include js plugins into laravel to use them in every file in project....
I first included them in the file /public/index.php, worked in general but caused some issues that are not acceptable.. So I'm looking for a better way to do it.
I now tried it in my master template master.blade.php that's included in every view.. There I used:
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
But it's not working, getting $ is not defined... Using the CDN doesn't change anything as well, so it doesn't seem to be about the path...
Can anybody help me? Been struggling around for days with this now, testing around different ways, but nothing works....
Edit: That's the complete file master.blade.php
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Shopping Portal') }}#yield('page')</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<link href="/css/sweetalert.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Shopping Portal') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<!-- some nav items -->
</div>
</div>
</nav>
#yield('content')
<div class="container">
<div class="row">
<footer class="text-center">
© 2016
<ul>
<li class="btn btn-default">Impressum</li>
<li class="btn btn-default">Kontakt</li>
</ul>
#yield('footer')
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
Edit2: I noticed one thing now: When I'm loading jquery again out of a view (so the view starts with that:
#extends('master')
<script src="/js/jquery-3.1.1.min.js"></script>
#section('content')
), then it works (at least in that specific view), but I'm wondering why... Am I wrong that if I load jQuery in the master template its included to every tempalte using the master template as well?
on layout you can add this
#yield('scripts')
and on page.blade.php
#section('scripts')
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
#endsection
if you want script to be on all pages add it to layout
directly like this
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
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!
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.
When I click away the menu doesn't hide, I found this code at:
http://getbootstrap.com/components/#navbar
but doesn't work as it should.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php">
<img class="desktop-logo" src="img/logo.png" alt="Company title">
<img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">List</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Yes, I got: proper libraries installed: Bootstrap v3.0.3.
There are no javascript errors, and the HTML code is valid.
Steps to reproduce:
Download the bootstrap 3.0.3 zip package, make an index.html file, insert the css and js stuff for bootstrap.
Enter the above code, and it's not closing when click or touched away.
So is the code meant to hide the menu or not ?
I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem.
<script src="/js/bootstrap.min.js"></script>
Do not load it more than once!
This should do
<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script>
This is the reference gist
https://gist.github.com/winnyboy5/8750551
In addition, I would like to point out; this problem may be caused by reference to both bootstrap.js and bootstrap.bundle.js in the HTML file. If you are referencing both bootstrap.js and bootstrap.bundle.js, removing either one will solve this problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapse Test Application</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-3">
<h2>Simple Collapsible</h2>
Collapse
<div id="demo" class="collapse">Simple Collapsible</div>
</div>
<!-- Collapse will open but not close if you use both of the references below. -->
<!-- Adding one of the following references to the project solves this problem. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#bs-example-navbar-collapse-1').hasClass('in')){
$('.collapse').collapse('hide');
}
})
There is another solution here, which also works when having sub-menus.
<script>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
</script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
^ I had the .js file too far down. Change your lines to look like the above and the responsive button should also close the menu.
I had my Bootstrap.min.js file after jquery and css files. i moved it above and it worked for me.
I had the same problem. Don't using script "hack". Just try to use jquery 2.1.4 or older.
I've just started using Twitter Bootstrap 3.0, I've been reading the documentation and I'm trying to create a responsive navigation bar, my code is the same structure as the example in the documentation but it doesn't seem to be working for some reason.
Below is the HTML code I'm using, I'm just using the default CSS and Javascript files.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Efar Communication Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- For screen readers and mobiles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">Efar</a>
<p class="navbar-text">Business Infrastructure Solutions</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products</li>
<li>Client Area</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div> <!-- End of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The problem was that where I had <script src="//code.jquery.com/jquery.js"></script>, it turns out that the site wasn't responding and so the page couldn't use jquery, which it needs to work. So I downloaded a local copy of jquery and changed it to <script src="js/jquery.js"></script>. Now it's working fine