The javascript toggle element of my toggle collapse and expand doesn't work. This is my first project in javascript and i feel i must be doing something basic wrong.
I have the Nav bar set up so that the toggle is active at all screen sizes and the logo is central as this is a one page Game.
<!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.0">
<title>SPLANETS</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/splanetsfavicon.png" rel="icon">
<!-- Main Bootstrap Css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Main CSS File -->
<link href="/assets/css/style.css" rel="stylesheet">
<!--Icons-->
<script src="https://kit.fontawesome.com/128d236a07.js" crossorigin="anonymous"></script>
</head>
<body id="bg-space">
<!-- === Header === -->
<header>
<nav class="navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span ><i class="earth-icon fa-solid fa-earth-americas"></i></span>
</button>
<a class="navbar-brand mx-auto" href="index.html"><img src="assets/img/templogo.png" alt="Splanets Logo" class="img-fluid "></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- End of Header -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>
I have included both bootstrap js file links at the bottom of the file and tested and everything loads correctly.
I have taken away my code and copied over the bootstrap nav and still i get no interactivity from the toggle.
Related
I want my toggler menu to work but it does not i want to know why it does not work?I will like to also know want links that i need to remove and how to improve my website speed.I resize the broewser and find out that the website is not show the toggle menu icon but it is there but it will not open a new menu
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.6">
<title>Pipes and Wheels</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/jumbotron/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- Favicons -->
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-white">
<a class="navbar-brand" href="#"><img style="height: 100px;" src="logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#jumbotron1" style="color: black;">Our goals <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</body>
</html>
After reviewing your HTML code, I can see that you're using two different versions of Bootstrap. You're using 4.4.1 for CSS and 5.0.2 for JS. I believe it should work if you first unified the versions, then based on the selected version check docs for proper HTML markup
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
You can follow these links for relevant docs for each version Bootstrap 4.4, Bootstrap 5
I am not familiar with javascript and copied the javascript portion from a tutorial I was watching. However, it does not seem to be working and the Navbar is not changing color when scrolled. I am not sure if the javascript is not working, the css, or if I should add 'scrolled' to the Navbar class as well. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){ $('nav').toggleClass('scrolled', $(this).scrollTop() > 1080);
});
</script>
<style>
navbar.scrolled{
background-color: darkgray !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-light navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#uniqueIdentifier">
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;">
</div>
</header>
</body>
</html>
Add your script tag at the bottom of the body in order to register your event listener once the DOM has loaded. You're also not targetting the right DOM element in your CSS/jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
div.navbar.scrolled {
background-color: darkgray !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-light navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 1080);
});
</script>
</body>
</html>
Script should be placed at the bottom of the body tag so that it works after the dom has finished loading.
I am making an android app with the Webview technique. To make a look and feel like an android I am using a Material CSS (https://daemonite.github.io/material/) framework.
Now my problem is the drawer is not touch-sensitive. I can't push it back like an android drawer. The drawer can only close by touching outside of this. Please solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<title>Material</title>
<!-- CSS -->
<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Add Material CSS, replace Bootstrap CSS -->
<link href="/material/css/material.min.css" rel="stylesheet">
<!-- Additional CSS for documentation site -->
<link href="/material/docs/css/docs.min.css" rel="stylesheet">
</head>
<body class="bg-light h-100">
<header class="navbar navbar-dark navbar-full bg-primary doc-navbar-default">
<button aria-controls="navdrawerDefault" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler" data-target="#navdrawerDefault" data-toggle="navdrawer"><span class="navbar-toggler-icon"></span></button>
<span class="navbar-brand mr-auto">Navdrawer</span>
</header>
<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
<div class="navdrawer-content">
<div class="navdrawer-header">
<a class="navbar-brand px-0" href="javascript:void(0)">Navdrawer header</a>
</div>
<nav class="navdrawer-nav">
<a class="nav-item nav-link active" href="javascript:void(0)">Active</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
<a class="nav-item nav-link" href="javascript:void(0)">Link</a>
</nav>
<div class="navdrawer-divider"></div>
<p class="navdrawer-subheader">Navdrawer subheader</p>
<ul class="navdrawer-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="material-icons mr-3">link</i> Link with icon</a>
</li>
</ul>
</div>
</div>
<!-- JavaScript -->
<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Add Material JavaScript on top of Bootstrap JavaScript -->
<script src="/material/js/material.min.js"></script>
</body>
</html>
I am using bootstrap tooltip as explained # https://getbootstrap.com/docs/4.3/components/tooltips/
I have successfully created tooltip but tooltip is appearing un-formatted. I believe this is because the tooltip is not getting initialized. I have the code added as shown on the page below.Tried initialization code at different places on page as well.
<!-- # TBD - Make this page look like https://getbootstrap.com/docs/4.0/examples/sign-in/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>
<body>
<!--
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #00aeef;">
<a class="navbar-brand" href="/"> Martious Data Science Hub </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-link inactive">
 
</li>
<!--
<li class="nav-link inactive">
|
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-minus-circle"></i> Score Card</a>
</li>
-->
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Welcome, "Test User!"<span class="sr-only">(current)</span></a>
</li>
<li class="nav-link inactive">
|
</li>
<!--
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Team <span class="sr-only">(current)</span></a>
</li>
-->
<li class="nav-item active">
<a class="nav-link" href="/authorization/logout/"> <i class="fa fa-sign-out"></i> Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<div class="mx-auto" style="max-width: 70%">
<div class="container text-center text-muted">
<div class="container align-middle">
<BR><BR><BR>
<div class="display-4">Sentiment Analysis
<!-- <span class="text-warning"><small>ⓘ</small></span>-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" data-placement="right" title="<b>Upload a text (*.txt) file to analyze sentiment using Vader algorithm</b>">
<span class="oi oi-info" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<!-- https://www.npmjs.com/package/bs-custom-file-input -->
<script src="/static/js/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Tooltip style is not picked up as shown on bootstrap page.
Tooltip Rendered
Expected Tooltip
I cannot find what is wrong with code. Looking for help...
I was able to fix this issue by adding bootstrap import in head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
This is NOT as per bootstrap recommendation (https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template), but it works.
The fix came from code described # https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp
I suggest you to just use the bundle Popper + Bootstrap: bootstrap.bundle.min.js or bootstrap.bundle.js. That should bypass any problem you may have with correct file order initialization. I mean, whether you place your files in header and/or body (in my case, it worked after placing the bundle at the bottom of the body, before closing the body tag).
https://getbootstrap.com/docs/5.1/components/tooltips/#overview
And remember to initialize the tooltips correctly from your local scripts:
https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere
This Vanila JS code should be enough for that:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
By the way, I placed this code after the aforementioned bundle.
I am using jquery image slider in laravel. it is working with this scripts as well
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="jQuery Logo Slider Ticker by webdesignandsuch.com">
<meta name="viewport" content="width=device-width, initial-scale=1"<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<i><h2>Paper Articals</h2></i>
<div class="slider-container">
<ul id="slider">
<li><a href="#"><p>kkkkkkk</p></li>
<li><img src="{{asset('/imgs/2.jpg')}}"></li>
<li><img src="{{asset('/imgs/3.jpg')}}"></li>
<li><img src="{{asset('/imgs/4.jpg')}}"></li>
<li><img src="{{asset('/imgs/5.jpg')}}"></li>
<li><img src="{{asset('/imgs/6.jpg')}}"></li>
<li><img src="{{asset('/imgs/7.jpg')}}"></li>
<li><img src="{{asset('/imgs/8.jpg')}}"></li>
</ul>
</div><!-- /slider -->
</html>
but is is not working with this #extends('layouts.app')
#section('content') in laravel I am using 5.2
#extends('layouts.app')
#section('content')
//above code here
#endsection
not error but not moving slider hold it? how can fix it???
updated app.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">
<!-- 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="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.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="{{asset('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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default
<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=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#yield('content')
<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
app.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">
<!-- 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="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<!-- BxSlider css from library -->
<link href="{{asset('css/jquery.bxslider.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default">
<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=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Content goes here -->
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('#slider').length > 0) {
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
}
});
</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
otherpage.blade.php
#extends('layouts.app')
#section('content')
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
#endsection