Javascript Ignoring if statement for window size - javascript

I have a few drop down menus on my pages navbar using bootstrap elements along with my customized javascript. I have made it conditional to only run if the screen width size is greater than 480 (the xs size for bootstrap). Problem is that the script runs when the screen width is at 480, below 480, and of course 480. IN other words my conditional statement surrounding the script running the dropdown on hover script is being ignored by the browser for some reason. MY GOAL is to make it so the hover effect only takes place as long as the navbar is not collapsed.
Javascript
if ( $(window).width() > 480) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
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">
<title>Made with Love and Sarcasm</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Custom theme-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<script src="https://use.typekit.net/mxj2kia.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</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>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 href="index.html" class="navbar-brand title">
<h1 class="sr-only">Made With Love and Sarcasm</h1>
<img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline inline" action="">
<!--Make sure to program a search feature here-->
<div class="input-group navbar-btn">
<input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search-button"> <span class="glyphicon glyphicon-search"></span> </button>
</span> </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="title dropdown">Admire<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><span class="glyphicon glyphicon-scissors"> Outfits</span></li>
<li><span class="glyphicon glyphicon-cutlery"> Foods</span></li>
<li><span class="glyphicon glyphicon-sunglasses"> Props</span></li>
<li><span class="glyphicon glyphicon-star"> Misc</span></li>
</ul>
</li>
<li class="title dropdown">Explore<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="title dropdown">Create<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<!--/collapse-->
</div>
<!--/container-->
</div>
<!--/navbar-->
<div class="jumbotron placeholder">
<div class="container">
<h1>Place to Put Amazing Photos</h1>
</div>
<!--replace with image-->
</div>
<div class="container">
<div class="row visible-lg visible-md visible-sm">
<div class="col-md-3 visible-md visible-lg"> Incredible Outfits </div>
<div class="col-md-3 visible-md visible-lg"> Wonderful Cooking </div>
<div class="col-md-3 visible-md visible-lg"> Outstanding Props </div>
<div class="col-md-3 visible-md visible-lg"> Amazing Creations </div>
<div class="col-sm-3 visible-sm"> Incredible Outfits </div>
<div class="col-sm-3 visible-sm"> Wonderful Cooking </div>
<div class="col-sm-3 visible-sm"> Outstanding Props </div>
<div class="col-sm-3 visible-sm"> Amazing Creations </div>
</div>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-scissors"> Outfits</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-cutlery"> Cooking</span> </div>
</div>
<br>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-sunglasses"> Props</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-star"></span> Creations </div>
</div>
</div>
<div class="footer">
<div class="container">
<p>© 2017 Made With Love and Sarcasm</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
Customized CSS
#charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, h7 {
font-family: vatican;
}
.title {
font-family: vatican;
}
.pushup {
margin-top: -8px;
}
.placeholder {
height: 500px;
}
div.jumbontron h1 {
color: black;
}
.inline {
display: inline-block;
}


I was using the wrong size. The size should be 767.

Related

$ is used before defined bootstrap Jquery

I was just following the tutorial at linda.com and faced problem
I have index bootstrap.js and are being used in different folder
I think this is file location problem....or not.
I attached a photo of my project
structure
and my index code is like this
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
$(function(){
$('ul.nav il.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
}, function(){
$('.dropdown-menu',this).fadeout('fast');
});
});
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
<footer>
</footer>
</html>
And header is like this
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section><!---branding-->
<nav class="navbar navbar-inverse">
<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" 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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<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>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!---header-->
</div><!---column-->
</div><!---content-->

You have two typos
il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line
If I add the JS and CSS and insert your header it works:
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="container">
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section>
<!---branding-->
<nav class="navbar navbar-inverse">
<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" 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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
Batam Tour <span class="caret"></span>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
Living Info <span class="caret"></span>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<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>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!---header-->
</div>
<!---column-->
</div>
<!---content-->
<div class="content row">
<section class="main col col-lg-8">
</section>
<!---main--->
<section class="sidebar col col-lg-4">
</section>
<!---sidebar--->
</div>
<!---content--->
</section>
<!---container--->

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?

Why is the whole site jumping when using affix?

I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>

Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.

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 slider not working: slider is not a function

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.

Categories