Bootstrap slider not working: slider is not a function - javascript

my Bootstrap slider is not working. I'm not sure why. Here' my HTML where all css and js loading correctly. I get an error in console: slider is not a function. I downloaded the latest version of bootstrap slider (using Chrome). The slider, if triggered from console also doesn't work.
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="/static/css/header.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider();
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse" 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 collapsed" 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="#"></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 navbar-right">
<li class="active">How it works</li>
<li>Find Vet</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Company</li>
<li>Team</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="content">
<input type="text" class="" value="" data-slider-min="2" data-slider-max="25" data-slider-step="1" data-slider-value="25" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="show">
</div>
<link rel="stylesheet" href="/static/css/bootstrap-min.css"/>
<link rel="stylesheet" href="/static/css/header.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-side-notes.css" />
<link rel="stylesheet" href="/static/css/animate.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-formhelpers-min.css" media="screen"/>
<link rel="stylesheet" href="/static/css/slider.css"/>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-formhelpers-min.js"></script>
<script type="text/javascript" src="/static/js/validator.min.js"></script>
<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
</body>
</html>

<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
Typo on the type, missing a 'c' in javascript should be:
<script type="text/javascript" src="/static/js/bootstrap-slider.js"></script>
I'd suggest looking into a good IDE/Editor.

Related

Disabling nodejs files in vsCode to client side js files

I am having tremendous difficulty coding with java script. My Java script file is using nodejs, which means i cant perform any DOMS. For examples this code here:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
There are 4 nav-items which are displayed in the developer tools on the browser but the length is 0, where it should be 4. Why is this happening? Is there a way to disable nodejs or switch ? I know nodejs is server side, so how do i disable it or create another js file that is in client side?
HTML CODE:
<!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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Creates the navbar links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link float-right" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
BOOT.JS FILE:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
Try loading your script at the end of the file instead of the header. The DOM has not loaded when you run the script. Either that or put it inside this event:
document.addEventListener("DOMContentLoaded", function(event) {
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
});

Scrolling page script in asp.net mvc. Using #RenderBody() function

I'm learning bootstrap + asp.net mvc by making portfolio website.
It is based on bootstrap example.
On this example we see one page website. When we click e.g. "about" the site is using javascript and scrolling to about section. I understand that.
but... i want to try this 1 page website, spread on many Controllers (and views), use layout page with RenderBody() in it and keep the same funcionality like before(scrolling).
e.g my views:
About/Index
Portfolio/Index
Contact/Index
and layoutPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- NAVI -->
<div id="Navigation" class="navbar navbar-default navbar-fixed-top navbar-mm">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navi</span> Menu<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Welcome to Site.com</a>
</div>
<div class="collapse navbar-collapse navbar-select">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<li class="page-scroll">
Blog
</li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="~/Img/lawl.png" alt="">
<div class="intro-text">
<span class="name">mySite.com</span>
<hr/>
<span class="skills">Developer</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
#RenderBody()
</div>
<footer class="footer text-center">
<div class="footer-upp">
<div class="container">
<div class="row">
<div class="footer-col col-lg-4 col-md-4 col-sm-4">
<h3>CONTACT</h3>
tel: 000-000-000 <br />
email: example#gmail.com <br />
City
</div>
<div class="footer-col col-lg-8 col-md-8 col-sm-8">
<h3>MEET ME</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-github"></i>
</li>
<li>
<i class="fa fa-fw fa-envelope"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright ©</p>
</div>
</div>
</div>
</div>
</footer>
<script src="~/Scripts/Site.js"></script>
There is anyway to make this?

Boostrap drop-down not working

It doesn't drop down when I click on it
why doesn't the drop down button work?
I used the bootstrap navbar found here :
Here is my code below:
Please ask if you need anything else from me
THanks in advance!!
DOCTYPE html>
<head>
<title>Unicity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link type="text/css" rel="stylesheet" href="style/style.css"/>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.min.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\npm.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
</body>
</html>
I tried with your code there seem's no problem with code,it seems it not finding the correct CSS and Javascript. Try this and let me know.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
Demo:https://jsfiddle.net/1rwdc9os/
add Jquery library file.
Use either bootstrap.css or bootstrap.min.css and bootstrap.min.js or bootstrap.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Try in angular.... This is better than others...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>

Bootstrap Dropdown menu doesn't show

I'm using bootstrap to make a dropdown menu for login form, but when I click the image for login I cannot get the dropdown menu to display.
<ul class="nav navbar-right navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" href="#">
<img src="~/Content/img/user-icon.png" />
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">enter code here
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login</button>
<br>
<br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a>
</p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about" class="cart">
<img src="~/Content/img/shopping-cart-icon.png" />
<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
I have added javascript and css from bootstrap, why doesn't my login form show?
EDIT
this is my code in fiddle here
You are missing the jQuery reference. Bootstrap requires jQuery to runt its plugins.
I have added the jQuery reference in your fiddle and the menu works ok. Try it.
Check out Bootstrap Documentation.
The parent element needs to be of class dropdown:
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul class="nav navbar-right navbar-nav dropdown">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Foobar
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<p>BAZ form</p>
</form>
</div>
</li>
</ul>
you should add jquery file also. bootstrap is build on jquery.add jquery to your file then it will work.
here is working fiddle for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default 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-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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav" style="margin-left: 5em;">
<li class="active">HOME</li>
<li>STORE</li>
<li>FAQ</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
<ul class="nav navbar-right navbar-nav dropdown" >
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Login</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password"><br>
<button type="button" id="btnLogin" class="btn">Login</button><br><br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a></p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li><a href="#about" class="cart">Cart<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
http://jsfiddle.net/yugi47/20jttkzh/3/

Navbar collapse button not working in boostrap 3

I'm trying to get the collapse button on a navbar to work but i can't seem to. I've checked that the data target is pointing to .navbar-collapse and as far as I can tell my css and javascript are all there. Can't work out what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javasript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javasript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="assets/images/title.png" class="img-responsive" /></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/hero-banner.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/mountains-small.jpg" class="img-responsive" />
<p id="hometext">text goes here</p>
</div>
</div>
</div>
<div class="container">
<div class="container" id="footer">
<div class="row">
<div class="col-xs-12">
<p class="footerheading">Contact Us</p>
<p class="copyright">© 2014 company</p>
</div>
</div>
</div>
</div>
</div>
</body>

Categories