Including jQuery or JavaScript in a Bootstrap framework - javascript

I'm trying to implement the following functionality:
jQuery: Find word and change every few seconds
i.e. eliciting a word to change every few seconds on my site.
I've tried to incorporate the code from the above example- but I've not been able to get it to work.
There must be something wrong with the way that I'm configuring jQuery or JavaScript, but I can't tell why or how.
This is the code I'm using:
<!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="">
<title>Heroic Features - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- begin: navbar -->
<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">
<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.html">Bootstrap Kickstart</a>
</div>
<!-- begin: navbar-collapse -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="">
Demo Elements
</li>
<li class="">
Sticky footer
</li>
</ul>
</div>
<!-- end: navbar-collapse -->
</div>
</div>
<!-- end: navbar -->
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>A Warm Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
<p><a class="btn btn-primary btn-large">Call to action!</a>
</p>
</header>
<hr>
<!-- Title
<div class="row">
<div class="col-lg-12">
<h3>Latest Features</h3>
</div>
</div>
/.row -->
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements </p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Building</h3>
<p>Creating value, realizing highly scalable products and services along the full pipeline, from ideation to implementation</p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Researching</h3>
<p>The best way to predict the future is to invent it, our original research initiatives position us at the forefront of blockchain expertise</p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Advising</h3>
<p>Wedding our fundamental technological insights to your domain-specific knowledge, creating the future together</p>
<p>
More Info
</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<div>
<span>This is so</span>
<span id="changerificwordspanid">awesome</span>
</div>
<hr>
<div>
<span>This is so</span>
<span id="rotate-word">awesome</span>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="../libs/jquery/dist/jquery.js">
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
<!--
Bootstrap Core JavaScript
<script src="/assets/js/bootstrap.min.js">
</script>
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
(function(){
var words = [
'awesome',
'incredible',
'cool',
'fantastic'
], i = 0;
setInterval(function(){
$('#changerificwordspanid').fadeOut(function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn();
});
}, 2000);
})();
</script>
</body>
</html>
Can anyone spot where I've gone wrong?
Second attempt:
---
home: active
---
{{> navbar }}
{{!-- begin: content container --}}
<div class="container">
{{!-- begin: content --}}
<h1>Your partner in blockchain!</h1>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/1" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/2" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/3" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/4" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>This is so</span>
<span id="rotate-word">awesome</span>
</div>
<script src="libs/jquery/dist/jquery.js"></script>
<script>
<script>
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
{{!-- end: content --}}
</div>
{{!-- end: content container --}}


anything inside a script block <script></script> where the script tag has a src attribute, is ignored
<script src="../libs/jquery/dist/jquery.js">
// this is ignored
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
what you want is
<script src="../libs/jquery/dist/jquery.js"></script>
<script>
// this will run
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>

Related

Check and do something if all bootstrap accordions are open

I have a bootstrap accordion and also a "open all" , "close all" button which works fine but what I am trying to do is when the accordions are all opened manually and not by the open all, close all button have the button change to "close all". is there a way to check if all the accordions are open so I can add the button functionality? I know you can use shown.bs.collapse and hidden.bs.collapse to see if an accordion is open but how would you check if ALL are open?
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
jQuery:
$('.panel-collapse').on('shown.bs.collapse', function () {
console.log('OPEN')
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
console.log('CLOSED')
});

$('#panelOne').on('shown.bs.collapse', function () {
let itemsList = document.getElementsByClassName('panel-collapse');
let isOpen = [];
for (let item of itemsList) {
if (item.classList.contains('in')) {
isOpen.push(true)
} else {
isOpen.push(false)
}
}
let allOpen = !isOpen.includes(false)
console.log(allOpen)
})
<!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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelTwo" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelThree" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
You can check if the class in is exist or not.

scroll down icon in center of page doesn't work as expected

I have a portfolio / landing page with a scroll down icon / link in center of page; however, the effect when the page scrolls down is not working as intended. if I click on any link on the top navbar I get the scroll up effect I want. If someone can point out what I'm missing. This was done using bootstrap framework. here's the link to the page
http://techgeorge.org/
index.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">
<meta name="description" content="portfolio, projects, Information Technology, Web Development, Android Development">
<meta name="author" content="George Louis">
<title>Techgeorge - This is my portfolio. A list of some of my projects. Web Development, and Android Development</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Tech</span>George
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#myCarousel">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#map">Map</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 id="sub-heading"><span class="light">Tech</span>George</h2>
<img src="img/mypic.png" class="mypic" alt="Smiley face" height="100" width="100">
<p>Here you'll find a list of my projects!</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-youtube left fa-fw"></i> <span class="network-name">Youtube</span>
</li>
</ul>
<!-- scroll down button -->
<a href="#myCarousel" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<br>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">My Projects
<small>Web Development & Android Applications</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/sohotechnology.png" alt="">
</a>
<h3>sohotech</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/techgeorge.org.png" alt="">
</a>
<h3>
techgeorge
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/calculator.png" alt="">
</a>
<h3>
Web Calculator
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/simon-game.png" alt="">
</a>
<h3>
Simon Game
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/clock.png" alt="">
</a>
<h3>
Pomodoro Clock
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/tictactoe.png" alt="">
</a>
<h3>
Tic Tac Toe
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="img/netDroid.png" alt="">
<h3>
Android: Netdroid
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/jlanscan.png" alt="">
</a>
<h3>
JLanScan
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/wiki-search.png" alt="">
</a>
<h3>
Wiki Search
</h3>
</div>
</div>
<!-- /.row -->
<hr>
<!-- /.row -->
</div><!-- /.carousel -->
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<img src="img/me.png" alt="Smiley face" height="100" width="100">
<h2>About Me</h2>
<p>My name is George and I'm a long time IT and Developer who venture in many areas of Information Technology. I am a certified Front End Web Developer from freecodecamp.org. And I hold several certification from Microsoft. I spend my days developing apps, making youtube video tutorials youtube channel, and writing for my blog PCtechtips.org</p>
<p>I have experience in Information Technology and Developing Web and Mobile Apps. You can contact me # georgelouis825#gmail.com</p>
<p>This site was developed using Bootstrap framework. And all pictures are mine!</p>
</div>
</div>
</section>
<!-- Download Section
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
Visit Download Page
</div>
</div>
</div>
</section> -->
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © techgeorge.org 2017</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=true"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</body>
</html>

I gave an extra class to the icon and removed href
<a class="btn btn-circle js-scroll-trigger scroll-down">
<i class="fa fa-angle-double-down animated"></i>
</a>
After that i wrote this JS
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('#myCarousel').offset().top }, 'slow');
return false;
});
});

Java Script and CSS not loaded

Java Script and CSS is not loading when we navigate from home page.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>solutionpages</servlet-name>
<url-pattern>/solution/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>solutionpages</servlet-name>
<jsp-file>/solution.html</jsp-file>
</servlet>
</web-app>
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="#">PUZZLERAYSE</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>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
{{puzzle.heading}}
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
solution.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="#">PUZZLERAYSE_SOLUTION</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>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
{{puzzle.heading}}
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
I am using bootstrap with angular js but when I get landed to home page using below URL it is working fine.
http://localhost:8081/puzzleworld/
but when I am navigate from home page and using URL like below
http://localhost:8081/puzzleworld/solution/xyz
CSS and Java Script is not loading.Please help me.
Note:- No Java Servlet is defined only html files are present.
Using Chrome Debugger I am getting below error
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8081/puzzleworld/solution/css/bootstrap.css"

It is to do with the link paths, so it looks like, if one page is working and the other isnt...
Try changing this;
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
To this;
<link href="/css/1-col-portfolio.css" rel="stylesheet" type="text/css">

Why Chrome & Firefox render bootstrap CSS different than Safari

I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.
Safari OK
Chrome KO
Live code: (make sure to accept the certificate)
https://canales.paperplane.io/
Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><img src="img/header.png"></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<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-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT THE FIRM</li>
<li>PROFESSIONALS</li>
<li>PRACTICE AREAS</li>
<li>NEWS ROOM</li>
<li>CAREERS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p>Lorem ipsum</p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>

Chrome won't load non-SSL scripts over a webpage open with https://.
The best way to reference your external scripts is to not specify the protocol.
As in:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery.js"></script>
with //
Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.

JQuery/CSS Parent-Child Inheritance NIGHTMARE

I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems).
I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. Here is CSS:
#homepageframex > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
And here is the HTML that connects to this CSS which works fine:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<p>Fade In</p>
<div id="homepageframex">
<div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
<script type="text/javascript">
(function( $ ) { // closure to prevent JQuery conflicts
$('.fadein-link').click(function(){
$('#homepageframex div h1').fadeIn(3000);
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
Now this works fine. The problem is when I try to implement this same code into a very complicated Bootstrap layout:
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! Does anyone know why?
<script type="text/javascript">
(function( $ ) { // closure to prevent
$('.fadein-link').click(function(){
$('#homepageframex div div div h1').fadeIn(3000);
});
})(jQuery);</script>
#homepageframex > div > div > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
Can anyone help and let me know why this is not working for me? What is it that is conflicting?
Thanks.
And here is the complete code of page that is not working:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
<div class="container" style="background-color: #FFFFFF;">
<div class="row">
<div class="col-xs-10 text-center"></div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">About</p>
</div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p>
</div>
</div>
</div>
</div>
<!-- END NAV BAR -->
<!-- BEGIN HEADER -->
<!-- <header> -->
<!-- BEGIN container for HEADER DIV -->
<!-- BEGIN DIV for top header DIVs -->
<div id="headerdivs" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<span class="logotop"><img src="images/logo.png" height="200" width="168" alt="" /></span>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p>Fade In</p>
</div>
</div>
</div>
</div>
<!-- END DIV for top header DIVs -->
<!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down1 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage1" class="col-xs-12 text-center">
<img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text here also
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down2 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage2" class="col-xs-12 text-center">
<img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
<p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text three
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down3 -->
<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe4 -->
<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down4 -->
<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe5 -->
<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe7 -->
<!-- BEGIN FOOTER -->
<footer>
<!-- BEGIN container for NEWSLETTER DIV -->
<div class="container">
<!-- BEGIN DIV Newsletter -->
<div id="newsletterX" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>
</div>
<div class="col-sm-12 text-center" style="color: red;">
<form class="form-horizontal">
<!-- BEGIN DIV for Form Group Line 2 -->
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
<span><input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
<div class="col-xs-1">
<input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
</div>
<div class="col-xs-2">
</div>
</div>
<!-- END DIV for Form Group Line 2 -->
</form>
</div>
</div>
</div>
</div>
<!-- END DIV Newsletter section -->
</div>
<!-- END container for NEWSLETTER DIV -->
</footer>
<!-- END FOOTER -->
<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->
<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();
MTFontIds.push("693341"); // Gill Sans® W01 Light
MTFontIds.push("692628"); // Gill Sans® W01 Roman
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->
<script type="text/javascript">
(function( $ ) {
$('.fadein-link').click(function(){
$('#content').fadeIn(3000);
//$('#c div').css({
// width:1000,
// height:1000,
});
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>

I just set up a bootply with your code - Bootply - and it's working after removing the
'closure to prevent' comment from
(function( $ ) { // closure to prevent
I've added a <div class="fadein-link">fade in</div> to trigger the fade-in.
Update:
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>.
Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. It could be necessary to use 2 different jQuery versions. e.g. if included plugins would only work with a specific version, but this doesn't seem to be the case. Removing one of the jquery.js includes didn't solve the issue.
If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of e.g. additional closing )}; which was already removed.
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console
Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments. It's possible to move such an extending discussion from the comments to chat, but it's necessary to have at least 20 reputation for that. Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too).

Categories