Cant make my navigation bar fit all pages - javascript

on my navigation bar i have 5pages Home,About US,Recently Passed,Areas,Contact
The contact seems to go underneath.
i have tried making the font smaller but i still haven thad any lucky would someone pleas ebeable to help me out.
here is the link to the website for a preview - http://leetaxi.webuda.com/index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Graduate School Of Motoring</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/scripts.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
<!-- Change Color Stylesheet Here -->
<link rel="stylesheet" href="css/colors/default.css">
<!-- TEMPLATE STYLESHEETS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/layout.css">
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt ie 7]>
<p class="browsehappy">you are using an <strong>outdated</strong> browser. please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="preloader"><i class="fa fa-spinner spin"></i></div>
<!-- SLIDER -->
<div class="slider-wrapper">
<div class="rev-slider">
<ul>
<!-- SLIDE #1 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-1.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-2.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #2 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-3.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #3 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-4.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
</ul>
</div><!-- End .rev-slider -->
</div><!-- End .slider-wrapper -->
<div class="header">
<div class="container">
<!-- LOGO -->
<a href="index.html" class="logo">
<img src="img/logo.png" width="70" alt="Horizon">
</a>
<ul id="sn" class="main_menu">
<li><a class="current" href="index.html">Home</a></li>
<li>About</li>
<li>Recently Passed</li>
<li>Areas</li>
<li>Contact</li>
</ul><!-- End .main-menu -->
</div><!-- End .container -->
</div><!-- End .header -->
<!-- ABOUT -->
<section id="about" class="sect-1">
<div class="container">
<div class="section-title">
<h1 class="title">About Us</h1>
<p class="description">These are some of the services we offer
</li></div></p>
<div align="center"><ul class="features">
<p>At Graduate School of Motoring, we have been providing quality driving instruction to all abilities for over 20 years.</p>
<p>We have both male and female instructors to make you feel comfortable and at ease at all times during your learning experience. Our lessons are always challenging, fun and kept at a pace to suit you. At Graduate School of Motoring, we understand how important it is to have a driving instructor that matches your personality.</p>
<p>This is why we have male and female instructors available, and all our instructors are friendly and patient. We know how unnerving driving a car can be, so we always work with you, instantly recognising your strengths and working on the weaknesses.</p>
<p>We also have refresher lessons available for all ages.</p>
<p>Why choose Graduate School of Motoring?<br>
Incredibly quick pass rate<br>
Male and female instructors available<br>
Long serving company with bags of experience<br>
Great block deals<br>
Refresher lessons available<br>
Friendly and patient instructors<br>
1st lesson is free of charge<br>
All ages welcome<br>
Pass plus available</p>
</ul>
</div>
</div><!-- End .container -->
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="portfolio-wrapper sect-2">
<div class="container">
<div class="section-title">
<h1 class="title">Recent Passes</h1>
<p class="description">These are some of our pupils that have recently passed.</p>
</div>
<!-- CATEGORIES -->
<ul class="filter-menu">
<li class="selected" data-cat="*">All</li>
</ul><!-- End .filter-menu -->
</div><!-- End .container -->
<!-- HOOK FOR PROJECT VIEWER -->
<div class="project-wrapper"></div>
<div class="container">
<div class="portfolio clearfix">
<!-- ITEM 1 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-1.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">James Youells</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 2 -->
<div class="port-item showme" data-cat="photography">
<div class="port-overlay">
<img src="img/portfolio/port-2.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project-full.html"><i class="fa fa-search"></i> </a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Lisa Jones</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 3 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-3.jpg" alt="Portfolio Image">
<a class="lightbox-btn" data-pp="prettyPhoto" href="img/portfolio/port-3.jpg"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Sam Smith</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 4-->
<div class="port-item showme" data-cat="art">
<div class="port-overlay">
<img src="img/portfolio/port-4.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Samantha Tom</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ROW 2 -->
<!-- ITEM 5 --><!-- End port item -->
<!-- ITEM 6 --><!-- End port item -->
<!-- ITEM 7 --><!-- End port item -->
<!-- ITEM 8--><!-- End port item -->
<!-- ROW 3 -->
<!-- ITEM 9 --><!-- End port item -->
<!-- ITEM 10 --><!-- End port item -->
<!-- ITEM 11 --><!-- End port item -->
<!-- ITEM 12 --><!-- End port item -->
</div><!-- End .portfolio -->
</div><!-- End .container -->
Load more
</section>
<!-- CALLOUT -->
<section id="services" class="sect-1">
<div class="container">
<div class="callout">
<h3 class="title">We can help you if you are in: </h3>
<p> </p>
<h3 class="title">Call Us </h3>
</div><!-- End .callout -->
<ul class="feature-imgs">
<li class="one-third animated" data-animate="flipInY">
<div class="feature-hex">
<img src="img/features/features-1.jpg" alt="feature image 1" />
</div>
<h4 class="title">Gravesend<br>Dartford<br>Swanscombe<br>Darenth</h4>
<p> </p>
</li>
<li class="one-third animated middle" data-animate="flipInY" data-animate-delay="1500">
<div class="feature-hex">
<img src="img/features/features-2.jpg" alt="feature image 2" />
</div>
<h4 class="title">Medway Towns<br>New Ash Green<br>Borough Green<br>Wrotham</h4>
</li>
<li class="one-third animated last" data-animate="flipInY" data-animate-delay="2000">
<div class="feature-hex">
<img src="img/features/features-3.jpg" alt="feature image 2" />
</div>
<h4 class="title">Sevenoak<br>Sidcup<br>Erith<br>Belverdere</h4>
</li>
</ul>
</div><!-- End .container -->
</section>
<!-- TESTIMONIALS --><!-- CLIENTS -->
<div class="clients"><!-- End .container -->
</div><!-- End .clients -->
<!-- TEAM -->
<section class="sect-2">
<div class="container">
<div class="section-title">
<h3 class="title">OUR DRIVERS</h3>
</div>
<ul class="team">
<li class="one-fourth animated" data-animate="flipInY">
<div class="img-wrap">
<img src="img/team/team-1.jpg" alt="Team Member">
<i class="fa fa-camera"></i>
</div>
<span class="team-name">John Green</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1000">
<div class="img-wrap">
<img src="img/team/team-2.jpg" alt="Team Member">
<i class="fa fa-tint"></i>
</div>
<span class="team-name">Peter Brown</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1500">
<div class="img-wrap">
<img src="img/team/team-3.jpg" alt="Team Member">
<i class="fa fa-coffee"></i>
</div>
<span class="team-name">Jane Red</span>
<span class="team-job">r</span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth last animated" data-animate="flipInY" data-animate-delay="2000">
<div class="img-wrap">
<img src="img/team/team-4.jpg" alt="Team Member">
<i class="fa fa-rocket"></i>
</div>
<span class="team-name">Richard Blue</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
</ul><!-- End .team -->
</div><!-- End .container -->
</section>
<!-- OUR SKILLS -->
<section id="skills" class="sect-1"></section>
<!-- CAllOUT --><!-- End .image-callout -->
<!-- PRICING --><!-- RECENT POSTS --><!-- CONTACT -->
<div class="section-title">
<h3 class="title">Contact Us</h3>
<p class="description">Please use the contact form below to email us.</p>
</div>
<form method="post" action="php/send_message.php" class="contact-form">
<div class="one-half animated" data-animate="fadeInDown">
<span>
<input type="text" name="name" id="name" placeholder="name">
</span>
<span>
<input type="email" name="email" id="email" placeholder="email">
</span>
<span>
<input type="text" name="subject" id="subject" placeholder="subject">
</span>
</div><!-- End .one-third -->
<div class="one-half last animated" data-animate="fadeInDown" data-animate-delay="1000">
<span>
<textarea name="message" id="message" placeholder="message"></textarea>
</span>
</div><!-- End .one-half -->
<button id="submit" type="submit" class="contact-button animated" data-animate="fadeInDown" data-animate-delay="1000">Send Message</button>
</form>
</div><!-- End .container -->
</section>
<!-- MAP -->
<div class="map-button">
<i class="fa fa-map-marker"></i> LOCATE US ON THE MAP
</div>
<div class="map-wrapper">
<div id="google-map"></div>
</div><!-- End .map-wrapper -->
<!-- MAP LOCATION WINDOW -->
<div id="content">
<div id="siteNotice">
</div>
<h2 id="firstHeading" class="firstHeading">Graduate School Of Motoring</h2>
<div id="bodyContent">
<p>This is us, drop by sometime.</p>
</div>
</div><!-- End #content -->
<section class="footer">
<img class="footer-logo" src="img/logo.png" width="50" alt="">
<div class="address">
Tel: 01474 332225</div><!-- End .address -->
<ul class="social-icons">
</ul>
<div class="copy">© 2014 Gradute School Of Motoring</div>
</section>
<!-- JQUERY -->
<script src="js/vendor/jquery.min.js"></script>
<!-- PLUGINS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/scripts.js"></script>
<script src="js/plugins.js"></script>
<!-- THEME SCRIPT -->
<script src="js/main.js"></script>
Thanks a lot


In your case, just make the <ul> with a width wide enough to place all tabs in one line.
Simply add width: 90%; and text-align: center; to your .main_menu CSS class.


u can remove display: inline-block; and float: right; from .main_menu class and add margin-left to the list with at last the width of the logo, plus text-align: right; if u want menu positions aligned to the right.
so this:
.main_menu {
display: inline-block;
float: right;
font-size: 12px;
margin-top: 0;
position: relative;
}
now looks like this:
.main_menu {
font-size: 12px;
margin-top: 0;
position: relative;
background: red;
margin-left: 150px; /* logo width + some padding from it */
text-align: right;
}

Related

Javascript not loading in blade bootstrap template

Hello all I am building a new web app in the Laravel framework. I am new to Laravel & Blade and I have been stuck setting up my bootstrap template with blade.
It seems that when I yield a section into my main template file my javascript files do not run although I can see them on page inspection.
I also get the following error in my console;
[Error] Failed to load resource: the server responded with a status of `enter code
here`404 (Not Found) (script.js, line 0)
[Error] SyntaxError: Unexpected token '<'
ajax (jquery.min.js:6:13737)
_evalUrl (jquery.min.js:6:142)
domManip (jquery.min.js:5:28144)
append (jquery.min.js:5:25583)
(anonymous function) (custom.js:8)
c (jquery.min.js:4:26057)
fireWith (jquery.min.js:4:26858)
ready (jquery.min.js:4:3317)
q (jquery.min.js:4:723)
Here is my source code
<!DOCTYPE html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Seo Meta -->
<meta name="description" content=" ">
<meta name="keywords" content="iPress, magazine, light, dark, themeforest, multi purpose, premium, unlimited, blog, news, AD, optimized">
<!-- Styles --><
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/icons.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/animate.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/responsive.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500' rel='stylesheet' type='text/css'>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=EmulateIE8; IE=EDGE" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="layout" class="fluid">
<header id="header">
<div class="a_head">
<div class="row clearfix">
<div class="breaking_news lefter">
<div class="freq_out">
<div class="freq"><div class="inner_f"></div><div id="layerBall"></div></div>
</div><!-- /freq -->
<ul id="js-news" class="js-hidden">
<li class="news-item">Improving Search on the Envato Marketplaces: 2013 in Review</li>
<li class="news-item">4 Ways To Find Free and Unique Photos for Your Next Website Theme</li>
<li class="news-item">Community Poll: Internet Speeds From Around the World in 2013</li>
<li class="news-item">New Hub, Header & Collections: 10 Ways to Improve Your Marketplaces Productivity</li>
<li class="news-item">Get a Free Year of Tuts+ Premium by Trying New Relic</li>
<li class="news-item">Beyond Bland: 10+ Creative Packaging Designs That Will Leave You Inspired</li>
</ul><!-- /js news -->
</div><!-- /breaking news -->
<div class="right_bar">
<div class="social social_head">
<i class="fa-twitter"></i>
<i class="fa-facebook"></i>
<i class="fa-google-plus"></i>
<i class="fa-linkedin"></i>
<i class="fa-github"></i>
<i class="fa-instagram"></i>
<i class="fa-dribbble"></i>
</div><!-- /social -->
<span id="date_time"></span><!-- /date -->
</div><!-- /right bar -->
</div><!-- /row -->
</div><!-- /a head -->
<div class="b_head">
<div class="row clearfix">
<div class="logo">
<img src="images/logo/six-media-logo.png" alt="Six Media - The UK Media Powerhouse">
</div><!-- /logo -->
<div class="ads">
<img src="images/ads.jpg" alt="ADS">
</div><!-- /ads -->
</div><!-- /row -->
</div><!-- /b head -->
<div class="row clearfix">
<div class="sticky_true">
<div class="c_head clearfix">
<nav>
<ul class="sf-menu">
<li class="color5">Home</li>
<li class="color2">Media
<ul class="col4 mega">
<li class="col1">
<li>Videos</li>
<li>Music Releases</li>
<li>Rising Talent</li>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_2.jpg" alt="#" title="#">
<h4> Music Releases </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_3.jpg" alt="#" title="#">
<h4> What do you think about our website </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_4.jpg" alt="#" title="#">
<h4> Printer took a galley of type and scrambled </h4>
</a>
</li>
</ul>
</li>
<li class="color3">News
<ul class="col4 mega">
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_1.jpg" alt="#" title="#">
<h4> Here's What Instagram Ads Will Look Like </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_2.jpg" alt="#" title="#">
<h4> Lorem Ipsum is simply dummy text </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_3.jpg" alt="#" title="#">
<h4> What do you think about our website </h4>
</a>
</li>
<div class="col1">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</div>
</ul>
</li>
<li class="color5">Events</li>
<li class="color4">Services
<ul class="col4 mega">
<div class="col1">
<li>Marketing & PR</li>
<li>Management</li>
<li>Production</li>
<li>Branding</li>
</div>
</ul>
</li>
<li class="color8">Contact</li>
</ul><!-- /menu -->
</nav><!-- /nav -->
<div class="right_icons">
<a class="random_post bottomtip" href="#" title="Random Post"><i class="icon-media-shuffle"></i></a><!-- /random post -->
<div class="search">
<div class="search_icon"><i class="fa-search"></i></div>
<div class="s_form">
<form action="http://d.theme20.com/ipress/search_result.html" id="search" method="get">
<input id="inputhead" name="search" type="text" onfocus="if (this.value=='Start Searching...') this.value = '';" onblur="if (this.value=='') this.value = 'Start Searching...';" value="Start Searching..." placeholder="Start Searching ...">
<button type="submit"><i class="fa-search"></i></button>
</form><!-- /form -->
</div><!-- /s form -->
</div><!-- /search -->
</div><!-- /right icons -->
</div><!-- /c head -->
</div><!-- /sticky -->
</div><!-- /row -->
</header><!-- /header -->
<div class="page-content">
#yield('home')
</div>
<footer id="footer">
<div class="row clearfix">
<div class="grid_3">
<div class="widget">
<div class="title"><h4>About Six Media</h4></div>
<p> iPress is a magazine/blog/ad/review template. Nunc montes odio phasellus dignissim, aenean, nec augue velit integer elementum ut montes quis integer cursus, est purus, lectus duis, scelerisque tincidunt ultricies phasellus elementum turpis tristique.<br><br>
Email: info#sixmedia.co.uk </p>
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Recent Posts</h4></div>
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb4.jpg" alt="#"></a>
<h3>What is the worst could be the worst?</h3>
<div class="meta mb"> 1 day ago / 1 comment </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb5.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 3 days ago / 3 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 6 days ago / 5 comments </div>
</li>
</ul>
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Newsletters</h4></div>
<p> To receive the latest updates and Latest Posts enter your email. </p>
<form id="newsletters" method="post" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sevenpsd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="email" onfocus="if (this.value=='Type Your Email') this.value = '';" onblur="if (this.value=='') this.value = 'Type Your Email';" value="Type Your Email" placeholder="Type Your Email" required="required">
<button type="submit"><i class="icon-checkmark"></i></button>
</form>
</div><!-- /widget -->
<div class="widget">
<div class="title"><h4>Follow us</h4></div>
<div class="social">
<i class="fa-twitter"></i>
<i class="fa-facebook"></i>
<i class="fa-google-plus"></i>
<i class="fa-linkedin"></i>
<i class="fa-github"></i>
<i class="fa-instagram"></i>
<i class="fa-dribbble"></i>
</div><!-- /social -->
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Useful Links</h4></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Contact</li>
<li role="presentation">Faq</li>
<li role="presentation">Partners</li>
</ul>
</div><!-- /widget -->
</div><!-- /grid3 -->
</div><!-- /row -->
<div class="row clearfix">
<div class="footer_last">
<span class="copyright">© 2018 Six Media. All Rights Reserved.</span>
<div id="toTop" class="toptip" title="Back to Top"><i class="icon-arrow-thin-up"></i></div>
</div><!-- /last footer -->
</div><!-- /row -->
</footer><!-- /footer -->
</div><!-- /layout -->
<!-- Scripts -->
<noscript>
This page needs JavaScript activated to work.
</noscript>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/ipress.js"></script>
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="/js/jquery.ticker.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function date_time(id){
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10){
h = "0"+h;}
m = date.getMinutes();
if(m<10){
m = "0"+m;
}
s = date.getSeconds();
if(s<10){
s = "0"+s;
}
// result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
result = ''+days[day]+' '+d+' '+months[month]+' '+year;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
window.onload = date_time('date_time');
/* ]]> */
</script>
Home view
#extends('layouts/main')
#section('home')
<div class="container-fluid">
<div class="row clearfix">
<div class="grid_9 alpha">
<div class="ipress_slider mbf">
<div class="slider_a owl-carousel owl-theme">
<div class="item clearfix">
<div class="half">
<div class="slide_details">
<a class="cat color3" href="#" title="View all posts under Entertainment">Entertainment</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 8.55</span>
<h3>Sed ut perspiciatis unde omnis iste</h3>
</div>
<img src="images/assets/slider1.jpg" alt="">
</div><!-- /half -->
<div class="half">
<div class="slide_details">
<a class="cat color1" href="#" title="View all posts under People">People</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 9.1</span>
<h3>Discovered the undoubtable source</h3>
</div>
<img src="images/assets/slider2.jpg" alt="">
</div><!-- /half -->
<div class="half">
<div class="slide_details">
<a class="cat color2" href="#" title="View all posts under Travel">Travel</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 7.42</span>
<h3>The standard chunk of Lorem ipsum</h3>
</div>
<img src="images/assets/slider3.jpg" alt="">
</div><!-- /half -->
</div><!-- /slide -->
</div><!-- /slider -->
</div><!-- /slider ipress -->
<!-- HOME SLIDER END -->
<div class="grid_8 omega posts righter">
<div class="post_day mbf clearfix">
<div class="title colordefault"><h4>HOT TOPIC</h4></div>
<!-- HOT TOPIC SECTION -->
<div class="grid_6 alpha relative">
<a class="cat" href="#" title="View all posts under Travel">Travel</a>
<a class="float-shadow" href="single_post.html"><img src="images/assets/r_4.jpg" alt=""></a>
</div><!-- /grid6 alpha -->
<div class="grid_6 omega">
<div class="post_day_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry unknown printer took a galley of type and scrambled it to make a type has survived not only fiv... </p>
</div><!-- /post content -->
<!-- HOT TOPIC SECTION -->
</div><!-- /grid6 omega -->
</div><!-- /post day -->
<div class="posts_block mbf clearfix">
<div class="title color5">
<h4>IN THE MEDIA</h4>
<i class="icon-feed"></i>
</div><!-- /title bar -->
<div class="grid_6 alpha">
<div class="mb float-shadow"><img src="images/assets/r_5.jpg" alt=""></div>
<div class="post_m_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting... </p>
</div><!-- post content -->
</div><!-- /grid6 omega -->
<div class="grid_6 omega">
<div class="small_slider_music owl-carousel owl-theme">
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb1.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb2.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb3.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb4.jpg" alt="#"></a>
<h3>For the days of peace and warmth</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
</ul>
</div>
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb9.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb10.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
</ul>
</div>
</div><!-- /slides -->
</div><!-- grid6 omega -->
</div><!-- posts block Music -->
<div class="posts_block mbf clearfix">
<div class="title color6">
<h4>FEATURED VIDEOS</h4>
<i class="icon-feed"></i>
</div>
<div class="carousel_TV">
<div class="item float-shadow"><img class="toptip" src="images/assets/r_7.jpg" alt="#" title="Lorem Ipsum is not simply"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_8.jpg" alt="#" title="Shooting for new goodies"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_9.jpg" alt="#" title="For the days of peace and warmth"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_10.jpg" alt="#" title="A picture of Sin Fang in Bairro Alto"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_11.jpg" alt="#" title="Breaking the darkness"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_12.jpg" alt="#" title="For the days of peace and warmth"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_13.jpg" alt="#" title="Bairro Alto in Lisboa, Portugal"></div>
</div>
</div><!-- posts block carousel -->
<div class="ads_block mbf">
<img src="images/ads3.png" alt="">
</div><!-- ads block -->
<div class="posts_block mbf clearfix">
<div class="title color1">
<h4>SIX MEDIA NEWS</h4>
<i class="icon-feed"></i>
</div>
<div class="grid_6 alpha">
<div class="mb float-shadow"><img src="images/assets/r_6.jpg" alt=""></div>
<div class="post_m_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting... </p>
</div><!-- post content -->
</div><!-- grid6 omega -->
<div class="grid_6 omega">
<div class="small_slider_travel owl-carousel owl-theme">
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb5.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb7.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb8.jpg" alt="#"></a>
<h3>For the days of peace and warmth</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
</ul>
</div>
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb11.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb12.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 4 days ago / 5 comments </div>
</li>
</ul>
</div>
</div>
</div><!-- grid6 omega -->
</div><!-- posts block Travel -->
</div><!-- end grid9 -->
<div class="grid_4 alpha sidebar sidebar_b">
<div class="widget">
<!-- LEFT SIDEBAR SECTION -->
<div class="title"><h4>NEW VIDEO</h4></div>
<iframe src="http://player.vimeo.com/video/13897659?color=E84A4A" height="180"></iframe>Iconic Poster design
</div><!-- widget -->
</div><!-- /grid3 sidebar A -->
</div><!-- /row -->
</div>
#stop
I am new to all of this so please forgive me if I am missing something
Appreciate any help
Thanks
A

<script type="text/javascript" src="/js/jquery.min.js"></script>
Please change src attribute to your source code.
You should use Laravel`s build function to load css and js.
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}">

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;
});
});

Add Class Once Another Class is Added

I am using a Framework 7 to develop a web app, and in it, I have it so the menu is a left panel that opens from a menu button. When the menu is open, the body has the class .with-panel-left-cover. I have been trying to add a class to another part of the document when this occurs, so I can add styling. Below is the code and what I am trying to use right now.
if ( $('body').hasClass('with-panel-left-cover') ) {
$('.views').addClass( "overlay" );
}
And the html (with filler text)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>My App</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="links/font-awesome-4.4.0/css/font-awesome.min.css">
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="dist/css/framework7.ios.min.css">
<link rel="stylesheet" href="dist/css/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="links/css/my-app.css">
<script src="phonegap.js"></script>
</head>
<body>
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover" style="background:lightgray">
<div class="content-block">
<p> <a class="button button-big color-blue button-fill panel-close" href="#index"><i class="fa fa-home fa-lg fa-fw"></i> Step 1</a> </p>
<p> <a class="button button-fill button-big panel-close" href="#about"><i class="fa fa-info fa-lg fa-fw"></i> Step 2/a> </p>
<p> <a class="button button-fill button-big panel-close" href="#form"><i class="fa fa-file fa-lg fa-fw"></i> Step 3</a> </p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<!-- Navbar inner for Index page-->
<div data-page="index" class="navbar-inner" style="background-color:white">
<!-- We have home navbar without left link-->
<div class="center sliding"><strong>Phone App</strong></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class--> <i class="icon icon-bars"></i>
</div>
</div>
<!-- Navbar inner for About page-->
<div data-page="about" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>How it works</strong></div>
</div>
<!-- Navbar inner for Services page-->
<div data-page="services" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding">Services</div>
</div>
<!-- Navbar inner for Form page-->
<div data-page="form" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>Submissions</strong></div>
</div>
</div>
<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Index Page-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content" style="background-color: #ed1c24" >
<img src="images/Filler.png" alt="" class="ri">
<!--<h1 style="font-size: 3em;
color: ghostwhite;
text-shadow: red -2px -1px 1px;"> Flash <i class="fa fa-bolt" style="color: white; text-shadow: yellow -1px 2px 25px;"></i> News </h1>
<h2 style="color:ghostwhite;text-shadow: red -2px -1px 1px;">Please swipe to the right or use the above button to navigate the app!</h2>-->
</div>
</div>
<!-- About Page-->
<div data-page="about" class="page cached">
<div class="page-content" style="padding-top:0px; padding-bottom:0px">
<div class="content-block" style="padding:0; margin:0px">
<div class="content-block-title"></div>
<div class="one" style="background-image:url(images/8-People.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="two" style="background-image:url(images/12370-NOAIKP.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="three" style="background-image:url(images/10895-NN6QH9.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Page-->
<div data-page="form" class="page cached">
<div class="page-content">
<iframe src="http://www.filler.com" style="width: 100%;height: 100%;border: 0;"></iframe>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="links/js/my-app.js"></script>
</body>
</html>

error on page ($.plot is not a function)

I'm working on a webpage based on a template downloaded from the internet. This page contains several includes and I do not know enough to change.
My problem is that I am implementing a Flot chart and the error "Uncaught TypeError: $.plot is not a function" always occour.
I've implemented the same chart on a sample page and it works with four includes: jquery-2.2.3.min.js, /jquery.flot.min.js, jquery.flot.time.js, and utilitarios.js (my authorship )
I'm think that the problem may be in some include that is in the template and is in some type of conflict.
Line of erro:
$.plot("#line-chart", [line_data1, line_data2],
My Html source page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Painel Predial</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/AdminLTE.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/skins/_all-skins.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/flat/blue.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/morris/morris.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/datepicker/datepicker3.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/all.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/timepicker/bootstrap-timepicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<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>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- some informations -->
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<style>
.esconde{
display:none;
}
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
<!-- Área do form -->
<form id="formDashboard">
<div class="row esconde" id="boxForm">
<div class="col-md-10">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Informe os critérios para geração do gráfico</h3>
</div>
<div class="box-body">
<!--Seleção de unidades -->
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Informe a macrolocalidade</label>
<select id="macroLocalidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a localidade</label>
<select id="localidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a unidade</label>
<select id="unidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label>Informe o período desejado</label>
<select id="periodo" class="form-control">
<option value="0">Registro Diário</option>
<option value="1">Media por Hora</option>
<option value="7">7 dias</option>
<option value="15">15 dias</option>
<option value="30">30 dias</option>
<option value="45">45 dias</option>
<option value="60">60 dias</option>
</select>
</div>
</div>
<div class="col-xs-4" id='boxDataDia'>
<div class="form-group">
<label>Informe a data que deseja consultar</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="diaPesquisa" name="data_hora_inicio">
</div>
</div>
</div>
<!--
<div class="col-xs-5">
<div class="form-group">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker2" name="data_hora_fim">
</div>
</div>
</div> -->
</div>
</div>
<div class="box-footer">
<input type="hidden" value="5a5D0Rl5Vl57U4pesspDGe0lIhzTsXwNflDzidMb" name="_token">
<input type="button" onclick='processar()' class="btn btn-primary active" value="Gerar Relatório" />
<input type="reset" class="btn btn-default" value="Limpar" />
</div>
</div>
</div>
</div>
</form>
<!-- Área do Gráfico -->
<div class="row">
<div class="col-md-8">
<!-- Área de mensagem de erro -->
<div class="box box-danger box-solid esconde" id="boxError">
<div class="box-header with-border">
<h3 class="box-title">Erro</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" id="boxErrorMessage">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!--Área de mensagem -->
<div class="box box-primary box-solid esconde" id="boxAguarde">
<div class="box-header">
<h3 class="box-title">Carregando....</h3>
</div>
<div class="box-body">
Aguarde enquanto o gráfico é gerado
</div>
<!-- /.box-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 text-center esconde" id="boxPainelSituacaoAtualHidrico">
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoSensor1"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor1"></div>
</div>
</div>
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoaSensor2"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- AREA CHART -->
<div class="box box-primary esconde" id="boxGraficoHidrico">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Nivel de Reservatórios</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart" id="areaChartContainer">
<canvas id="areaChart" style="height:310px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<!-- Gráficos de temperatura -->
<div class="row">
<div class="col-md-2 text-center" id="boxPainelSituacaoAtualTemperatura">
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor1"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor1"></div>
</div>
</div>
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor2"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- FLOT CHART -->
<div class="box box-danger esconde" id="boxGraficoTemperatura">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Temperatura das Bombas</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="line-chart" style="height: 300px;"></div>
</div>
<!-- /.box-body-->
</div>
</div>
</div>
<div id="saida"></div>
</section>
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
<!-- Utilitários -->
<script src="http://localhost/sistema/public/js/utilitarios.js"></script>
<script src="http://localhost/sistema/public/js/graph/graficos.js"></script>
<script>
/**
Load da Página
*/
$(function () {
$('#diaPesquisa').datepicker({
dateFormat: "dd/mm/yyyy" ,
language: "pt-BR",
autoclose:true
});
$.get('/sistema/public/dashload', function(dataLoad){
var hasError = showLoadError(dataLoad);
if(!hasError)
showFormOptions(dataLoad);
});
});
</script>
<!-- page script -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Versão</b> 1.0.4
</div>
<strong>Copyright © 2017 <a href="http://www.sensoragroup.com.br" target='_blank'>Sensora Group</a>.</strong> Todos os direitos reservados
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora#example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<i class="fa fa-trash-o"></i>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6
<script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="http://localhost/sistema/public/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<!-- <script src="plugins/morris/morris.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/morris/morris.min.js"></script>
<!-- Sparkline
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<!-- <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart
<script src="plugins/knob/jquery.knob.js"></script> -->
<script src="http://localhost/sistema/public/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<!-- <script src="plugins/daterangepicker/daterangepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap datepicker -->
<!-- Bootstrap WYSIHTML5
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick
<script src="plugins/fastclick/fastclick.js"></script> -->
<script src="http://localhost/sistema/public/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App
<script src="dist/js/app.min.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="dist/js/pages/dashboard.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes
<script src="dist/js/demo.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/demo.js"></script>
<!-- <script src="http://localhost/sistema/public/js/app.js"></script>
-->
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Date picker
$('#datepicker').datepicker({
autoclose: true
});
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();
//Timepicker
$(".timepicker").timepicker({
showInputs: false
});
});
</script>
</body>
</html>

In your HTML output you've got jQuery sourced three times on that page. First time it's sourced right before you source Flot.
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
Then later down the page you source it again here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
Then almost immediately after you do it again here:
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
Aside from loading jQuery too many times, the issue you're seeing is the first jQuery is loaded and then you source Flot which binds to that instance of jQuery. Once the next sourced instance of jQuery happens that association disappears.
Take time to assure you're sourcing jQuery once at the beginning of your sourced scripts and then source everything that depends on jQuery.

Code Edit to make random image appear in Boostrap Theme

I need a simple thing, but I'm a new programmer and if someone could help it would be great! Here's the thing:
I'm giving you the full code below and this is the page. As you can see there are 8 images inside. I need to make them appear in a random order using JavaScript. I can't make this happen, because when I put the script inside body into the Bootstrap component, it doesn't get the CSS style of Bootstrap. How can I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//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>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.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]-->
<script type="text/javascript">
var gallery = new Array();
gallery[0] = new Array(new Array ("immagine_prova5.png", "http://www.altervista.org"),
new Array ("immagine_prova6.png", "http://www.ii.org"), new Array
("immagine_prova5.png", "http://www.google.it"), new Array ("module_04.jpg", "#04"));
gallery[1] = new Array(new Array ("module_05.jpg", "#0"), new Array ("module_06.jpg",
"#06"), new Array ("module_07.jpg", "#07"), new Array ("module_08.jpg", "#08"));
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<a href="' + gallery[whichGallery][idx][1] + '"><img src="img/' +
gallery[whichGallery][idx][0] + '"></a>');
}
</script>
</head>
<body>
<script language="javascript">pickImageFrom(1);</script><br /><br />
<p> </p>
<!-- Navigation --><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"><!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-
only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Start
Bootstrap</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<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 Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"/><script
async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></a>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2393383294332670"
data-ad-slot="4230127403"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
</div>
<!-- /.row --><hr /><!-- Footer --><footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row --></footer></div>
<!-- /.container -->
<p> </p>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

The images you are adding via js are missing the css-class for your style to work.
Add class="img-responsive" to the images in your js code.
document.write('<a href="' + gallery[whichGallery][idx][1] + '">
<img class="img-responsive" src="img/' + gallery[whichGallery][idx][0] + '"></a>');

Categories