Materialize css tabs are not working - javascript

I am making profile ui for mobile. I am using materialize css for that.. But in my case it's not working. I mean the tabs are not working.
So here is the code.
http://codepen.io/anon/pen/VmmJWv
html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<title>Profile</title>
<link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">
</div>
<div class="profile">
<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>
<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
<a><li><span>1m</span>Followers</li></a>
<a><li><span>100</span>Following</li></a>
<a><li><span>758</span>Posts</li></a>
<a><li><span>84</span>Helpful</li></a>
</ul>
<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
Thanx for the help........


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
<script>
var el = document.querySelector('.tabs');
var instance = M.Tabs.init(el, {});
</script>


Don't forget to add jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>


You just needed 1 modification in you html.
You are missing to include the Jquery which is required. You can check these issues easily in developer console.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<title>Profile</title>
<link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">
</div>
<div class="profile">
<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>
<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
<a><li><span>1m</span>Followers</li></a>
<a><li><span>100</span>Following</li></a>
<a><li><span>758</span>Posts</li></a>
<a><li><span>84</span>Helpful</li></a>
</ul>
<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
Updated Codepen : http://codepen.io/anon/pen/mOONjj


Had the same problem. On my case there was another JS code interrupting the Materialize JS. Avoid unnecessary JS code for the page containing the tabs.

Related

Web Page with div class= parallax_background parallax-window is not loading in django/ pycharm

I am configuring a webpage using django and pycharm. I have placed all the static files and made the changes in settings.py file. In html i have added load static block at the beginning and added static block to all urls. Now when I run the server, all the static content is loading properly except two blocks (testimonial and footer) having div class= parallax_background parallax-window. Below is the code for html
Index.html
{% load static %}
<! DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-start">
<div class="header_content_inner d-flex flex-row align-items-end justify-content-start">
<div class="logo">Travello</div>
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="header_phone ml-auto">Call us: 00-56 445 678 33</div>
<!-- Hamburger -->
<div class="hamburger ml-auto">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_social d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_header d-flex flex-row align-items-center justify-content-start">
<div class="menu_logo">Travello</div>
<div class="menu_close_container ml-auto"><div class="menu_close"><div></div><div></div></div></div>
</div>
<div class="menu_content">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="menu_social">
<div class="menu_phone ml-auto">Call us: 00-56 445 678 33</div>
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_page_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>Offers<span>01</span></li>
<li>Testimonials<span>02</span></li>
<li>Latest<span>03</span></li>
</ul>
</div>
</div>
</div>
<!-- Search -->
<div class="home_search">
<div class="container">
<div class="row">
<div class="col">
<div class="home_search_container">
<div class="home_search_title">Search for your trip</div>
<div class="home_search_content">
<form action="#" class="home_search_form" id="home_search_form">
<div class="d-flex flex-lg-row flex-column align-items-start justify-content-lg-between justify-content-start">
<input type="text" class="search_input search_input_1" placeholder="City" required="required">
<input type="text" class="search_input search_input_2" placeholder="Departure" required="required">
<input type="text" class="search_input search_input_3" placeholder="Arrival" required="required">
<input type="text" class="search_input search_input_4" placeholder="Budget" required="required">
<button class="home_search_button">search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Intro -->
<div class="intro">
<div class="intro_background" style="background-image:url({% static 'images/intro.png' %})"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="intro_container">
<div class="row">
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/beach.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Top Destinations</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/wallet.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">The Best Prices</div>
<div class="intro_subtitle"><p>Sollicitudin mauris lobortis in.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/suitcase.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Amazing Services</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Destinations -->
<div class="destinations" id="destinations">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Popular Destinations</h2></div>
</div>
</div>
<div class="row destinations_row">
<div class="col">
<div class="destinations_container item_grid">
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_1.jpg' %}" alt="">
<div class="spec_offer text-center">Special Offer</div>
</div>
<div class="destination_content">
<div class="destination_title">Bali</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_2.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Indonesia</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_3.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">San Francisco</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_4.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Paris</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_5.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Phi Phi Island</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_6.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Mykonos</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="testimonials" id="testimonials">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="{% static 'images/testimonials.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Testimonials</h2></div>
</div>
</div>
<div class="row testimonials_row">
<div class="col">
<!-- Testimonials Slider -->
<div class="testimonials_slider_container">
<div class="owl-carousel owl-theme testimonials_slider">
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>City Breaks Clients<span>01</span></li>
<li>Cruises Clients<span>02</span></li>
<li>All Inclusive Clients<span>03</span></li>
</ul>
</div>
</div>
<!-- News -->
<div class="news" id="news">
<div class="container">
<div class="row">
<div class="col-xl-8">
<div class="news_container">
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_1.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>02</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo. Vivamus massa.Tempor massa et laoreet.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_2.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>01</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Tempor massa et laoreet malesuada. Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_3.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>29</div>
<div>may</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Vivamus massa.Tempor massa et laoreet malesuada. Aliquam nulla nisl, accumsan sit amet mattis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- News Sidebar -->
<div class="col-xl-4">
<div class="travello">
<div class="background_image" style="background-image:url('{% static 'images/travello.jpg' %}')"></div>
<div class="travello_content">
<div class="travello_content_inner">
<div></div>
<div></div>
</div>
</div>
<div class="travello_container">
<a href="#">
<div class="d-flex flex-column align-items-center justify-content-end">
<span class="travello_title">Get a 20% Discount</span>
<span class="travello_subtitle">Buy Your Vacation Online Now</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="parallax_background parallax-window" data-parallax="scroll"
data-image-src="{% static 'images/footer_1.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="newsletter">
<div class="newsletter_title_container text-center">
<div class="newsletter_title">Subscribe to our newsletter to get the latest trends &
news</div>
<div class="newsletter_subtitle">Join our database NOW!</div>
</div>
<div class="newsletter_form_container">
<form action="#"
class="newsletter_form d-flex flex-md-row flex-column align-items-start justify-content-between"
id="newsletter_form">
<div
class="d-flex flex-md-row flex-column align-items-start justify-content-between">
<div><input type="text" class="newsletter_input newsletter_input_name"
id="newsletter_input_name" placeholder="Name" required="required">
<div class="input_border"></div>
</div>
<div><input type="email" class="newsletter_input newsletter_input_email"
id="newsletter_input_email" placeholder="Your e-mail"
required="required">
<div class="input_border"></div>
</div>
</div>
<div><button class="newsletter_button">subscribe</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer_contact_row">
<div class="col-xl-10 offset-xl-1">
<div class="row">
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/sign.svg' %}" alt="">
</div>
<div class="footer_contact_title">give us a call</div>
<div class="footer_contact_list">
<ul>
<li>Office Landline: +44 5567 32 664 567</li>
<li>Mobile: +44 5567 89 3322 332</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/trekking.svg' %}"
alt=""></div>
<div class="footer_contact_title">come & drop by</div>
<div class="footer_contact_list">
<ul style="max-width:190px">
<li>4124 Barnes Street, Sanford, FL 32771</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/around.svg' %}" alt="">
</div>
<div class="footer_contact_title">send us a message</div>
<div class="footer_contact_list">
<ul>
<li>youremail#gmail.com</li>
<li>Office#yourbusinessname.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made
with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com"
target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</footer>
</div>
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.js' %}"></script>
<script src="{% static 'plugins/Isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'plugins/scrollTo/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'plugins/easing/easing.js' %}"></script>
<script src="{% static 'plugins/parallax-js-master/parallax.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
settings.py-
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
Am I missing any changes to be done?

The issue is solved... I guess there was issue while setting up the project. Everything is working fine now.

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') }}">

How to add the same header and footer to all pages at once? HTML

I'm trying to figure out how to upload the same header and footer from my index to all pages, without having to edit all of them after that if I change/add something to the header and footer.
I'm using CSS and JS to my HTML pages.
you can check the main page here.
If it helps, those are the following codes:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Da Montanha | Esporte e Aventura em Curitiba</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/color.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
<link href="css/iconmoon.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">
</head>
<body class="campers-theme">
<div id="wrapper">
<header id="header">
<section class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><i class="fa fa-instagram" target="_blank"></i></li>
<li><i class="fa fa-youtube-square" target="_blank"></i></li>
<li><i class="fa fa-facebook-f" target="_blank"></i></li>
</ul>
<i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">contato#damontanha.com.br</span> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</div>
<div class="col-md-6">
<div class="register-login">
<ul>
<li><i class="fa fa-key"></i>Login</li>
<li><i class="fa fa-unlock"></i>Registrar-se</li>
</ul>
</div>
</div>
</div>
</section>
<section class="logo-section">
<div class="container">
<div class="col-md-6"><strong class="logo"><img src="images/logo.png" alt="logo"></strong></div>
<div class="col-md-6">
<div class="book-section"> Orçamentos
<div class="number-box"> <i class="fa fa-whatsapp"></i>
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>
</div>
</div>
</div>
</div>
</section>
<div id="cp-slide-search" class="cp_side-search">
<form method="get">
<input type="text" placeholder="Digite o que procura..." required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<section class="main-navigation">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active">Início
</li>
<li>Aventuras<i class="fa fa-caret-down"></i></li>
<li>Eventos</i></li>
<li>Loja</i></li>
<li>Páginas<i class="fa fa-caret-down"></i>
<ul>
<li>Blog</i></li></li>
<li>Orçamento</li>
<li>Nosso Time</li>
<li>Galeria de fotos</li>
<li>Depoimentos</li>
</ul>
</li>
<li>Sobre Nós</li>
<li>Contato</li>
</ul>
</div>
<div class="nav-right-col">
<div class="cart-box-outer">
<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="cart-box"> <strong class="title">Você tem 1 item(s) no seu carrinho.</strong>
<div class="cart-row">
<div class="thumb"><img alt="img" src="images/cart-img.jpg"></div>
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> BestWedding Camping Equipment <strong class="amount">1 x R$59.00</strong> </div>
</div>
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="top-search"> <i class="fa fa-search"></i> </div>
</div>
</div>
</div>
</div>
</nav>
</section>
</header>
<footer id="footer">
<section class="instagram">
<div class="container">
<h2>We’re on Instagram</h2>
</div>
<ul>
<li><img src="images/instagram/instagram-img-1.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-2.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-3.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-4.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-5.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-6.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-7.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-8.jpg" alt="img"></li>
</ul>
</section>
<section class="footer-section-1">
<div class="container">
<div class="row">
<div class="col-md-4"> <strong class="footer-logo"><img src="images/footer-logo.png" alt="logo"></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p>
Read More </div>
<div class="col-md-4">
<h3>More Services</h3>
<div class="row">
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Free Parking</li>
<li>Free Wifi Area</li>
<li>Restaurant</li>
<li>Free Hot Shower</li>
<li>Swimming Pool</li>
<li>Shaded Pitches</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Laundry</li>
<li>Hairdresser</li>
<li>Digs Area</li>
<li>Barbecue Station</li>
<li>Ping Pong Table</li>
<li>Coffee Bar</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-box">
<h3>Contact us</h3>
<address>
<ul>
<li> <span><i class="fa fa-home"></i></span>
<div class="text-box">
<p>123 Lorem Ipsum Avenue,<br>
Campers Road, NY, U.S.A.</p>
</div>
</li>
<li> <span><i class="fa fa-phone"></i></span>
<div class="text-box">
<p>Call us for any Query</p>
<strong>44 01234 5678</strong> </div>
</li>
<li> <span><i class="fa fa-envelope-o"></i></span>
<div class="text-box">
<p>Send us email for any Information</p>
<span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </div>
</li>
<li> <span><i class="fa fa-clock-o"></i></span>
<div class="text-box">
<p>Office Timings</p>
<strong>09:00 - 19:00</strong> </div>
</li>
</ul>
</address>
</div>
</div>
</div>
</div>
</section>
<section class="footer-section-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-socila">
<ul>
<li><i class="fa fa-twitter"></i>twitter</li>
<li><i class="fa fa-facebook-f"></i>facebook</li>
<li><i class="fa fa-google-plus"></i>google plus</li>
<li><i class="fa fa-linkedin-square"></i>linkedin</li>
</ul>
</div>
</div>
<div class="col-md-6"><strong class="copy">2016 © Campers, Powered by: Crunchpress</strong></div>
</div>
</div>
</section>
</footer>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.noconflict.js"></script>
<script src="js/theme-scripts.js"></script>
<script src="js/zebra_datepicker.js"></script>
<script src="js/function.js"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT -->
</html>

you can put them in php files, header.php and footer.php
and then just include them wherever you want
<?php include('header.php') ?>
html code
<?php include('footer.php') ?>

You can use routing feature in angularJS. you can check the example below. Here you can have multiple contents which you can dynamically bind it to your page. So you will have a fixed header and footer content.
<body ng-app="myApp">
<p>header</p>
content1
content2
content3
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "content1.htm"
})
.when("/content1", {
templateUrl : "content1.htm"
})
.when("/content2", {
templateUrl : "content2.htm"
})
.when("/content3", {
templateUrl : "content3.htm"
});
});
</script>
<p>footer</p>
</body>

To do it without a server-side language, You will have to use JavaScript to load in your templates. See the several ways you can do that from answers to this question.
Include another HTML file in a HTML file
Basically, you would have to use jQuery or something like it to make an AJAX request to pull in the HTML.

How to reduce number of lines in jquery code

I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>

Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});

jQuery hide() or fadeOut() not working

I'm building a site using a template and I think something is interfering with .hide() or .fadeIn(). When I click the image here.
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
nothing happens. It won't disappear or do anything. Also I know menu.js is being detected because I can document.write() and it works and also console.log works in F12 developer tools
Menu.js
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
The image I'm trying to click is under
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/form.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function(){
$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:false,
progressBar:false
});
});
$(document).ready(function(){
!function(){
var map=[]
,names=[]
,win=$(window)
,header=$('header')
,currClass
$('.content').each(function(n){
map[n]=this.offsetTop
names[n]=$(this).attr('id')
})
win
.on('scroll',function(){
var i=0
while(map[i++]<=win.scrollTop());
if(currClass!==names[i-2])
currClass=names[i-2]
header.removeAttr("class").addClass(names[i-2])
})
}(); });
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="">
<!--==============================header=================================-->
<header class="page1">
<div class="container_12">
<div class="grid_12">
<div id="logoImage1"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></div>
<div id="logoImage"><img src="images/logo.png" alt=""/> </div>
<!--<h1><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></h1>-->
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
<li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
<li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
<li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
<!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--=======content================================-->
<div id="page1" class="content">
<div class="ic">More Website Templates # TemplateMonster.com - September 9, 2013!</div>
<div class="container_12">
<div class="grid_12">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div>
<div class="slider_wrapper">
<ul class="items">
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Let Us Show You the Way to Success</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Interminable Energy for Your Project</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>We know how to solve your problems!</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Make your business a booming one!</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Our Menu</h3>
</div>
</div>
</div>
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
</div>
<div id="page3" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Upcoming Events</h3>
<div class="text1">
Events Information Text TBA
</div>
</div>
</div>
</div>
</div>
<div id="page4" class="content">
<div class="container_12">
<div class="grid_12">
<h3>Hours & Location</h3>
</div>
<div class="companies">
<div class="clear"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
</div>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

You need to put your JS code in a Document Ready function because it is executing before the page loads.
The solution:
http://jsfiddle.net/m2sv4t7q/
$("document").ready(function {
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
});
Adding that function allows the full html of the page to load before executing your javascript.

Categories