Been struggling with this for days now.
I've installed a fresh laravel 5.5 application which in which I was planning to use VueJS. Onfurtunately I couldn't get it to work because it was loading the files but didn't execute them.
So my only solution is to use normal JS files. So I have two files:
js/app.js
js/script.js
app.js:
$(document).ready(function(){
console.log('app test js');
});
alert('app loaded');
script.js:
$(document).ready(function(){
console.log('script test js');
});
alert('script loaded');
In my console I can see the '$document ready' but there are no alerts or console.log's shown for the js/app.js and js/script.js. I can see the scripts are loaded and that my code is present.
Really hope someone can help me out since I'm now not able to proceed.
Down below are all the files that are used.
I have the following folder structure:
views/directevents/index.blade.php
index.blade.php
#extends('directevents.components.app')
#section('title', 'home')
#section('content')
<h1 class="page-title">
Welkom bij Direct Events
</h1>
<p>
Direct events is een evenementen bureau dat zich richt op thema evenementen.
Het bedrijf bestaat uit drie ondernemers met een passie voor organiseren. Ons
doel is om zowel de standhouders als de bezoekers een onvergetelijke dag te
bezorgen.
</p>
<div id="event-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#event-carousel" data-slide-to="0" class="active">
</li>
<li data-target="#event-carousel" data-slide-to="1"></li>
<li data-target="#event-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="hippiemarkt amsterdam XL">
</a>
</div>
<div class="item text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="Chicago">
</a>
</div>
<div class="item text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="New York">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#event-carousel" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#event-carousel" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row pages">
<div class="col-sm-4 text-center">
<a href="sponsoren">
<img src="{{ asset('images/sponsoren.png') }}" alt="sponsoren">
<h3>
Sponsoren
</h3>
</a>
</div>
<div class="col-sm-4 text-center">
<a href="standhouders">
<img src="{{ asset('images/standhouders.png') }}"
alt="standhouders">
<h3>
Standhouders
</h3>
</a>
</div>
<div class="col-sm-4 text-center">
<a href="partners">
<img src="{{ asset('images/partners.png') }}" alt="partners">
<h3>
Partners
</h3>
</a>
</div>
</div>
#endsection
since it extends views/directevents/components/app.blade.php i'll post it here too:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>Direct Events - #yield('title')</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')
}}">
</head>
<body class="{{ $page }}">
<div id="wrapper" class="container">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<header>
#include('directevents.components.header')
</header>
#include('directevents.components.navbar')
<div class="content">
#yield('content')
</div>
<footer>
#include('directevents.components.footer')
</footer>
#include('directevents.components.popups')
</div>
<!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.12.4.min.js"></script> -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script href="js/app.js"></script>
<script href="js/script.js"></script>
<script>
$(document).ready(function(){
console.log('$document ready');
});
</script>
</body>
</html>
Your scripts are included incorrectly, see: https://www.w3schools.com/tags/att_script_src.asp
You have:
<script href="js/app.js"></script>
Should be:
<script src="js/app.js"></script>
Note the "src"
In Chrome hit F12 and reload the page, look under Sources to verify they are loaded correctly.
Laravel 5.5 uses Laravel Mix. You should explore how this things work if you want it to be fully functional.
Here's what you need to do:
1. Install npm via nodejs installer
2. npm install
3. Compile your resources using npm run <config> (ex. npm run dev)
How easy can an answer be.
<script href="js/app.js"></script>
Should be
<script src="js/app.js"></script>
Related
For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<div class="row">
{% for post in final_products %}
<div class="col s12 m6 l4">
<div class="card horizontal hoverable z-depth-1-half">
<div class="card-image" id="card_image" style="height:300px">
<img src="{{ post.6 }}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{ post.0 }}</span>
<p>Initial Price €{{ post.3 }}</p>
<p>Discount {{ post.7 }}%</p>
<p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
</div>
<div class="card-action">
Buy
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
//Initialize dropdown
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
The $(document) is a jQuery selector and you did not included a path for the jQuery.
I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.
The line of code should be included before the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The reason why your code did't worked is that Materialize CSS uses jQuery methods.
I've been having trouble implementing Material Design Bootstrap's carousel. I copy and pasted the carousel example from their website, and I've made sure to have both the JS and CSS in the correct order when loaded. Currently my page only renders the image and text, and can be clicked on with a light effect, but no other images or slides appear and it never switches between them. It also creates a large whitespace on my screen after the carousel.
edit: Changed script.php to script.js
edit 2: Updated index.php that still doesn't work completely:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Site Name</title>
<?php //include_once $_SERVER['DOCUMENT_ROOT'].'/inc/head.php'; ?>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="https://site/css/style.css">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
<body>
<header>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php'; ?>
</header>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div class='shell'>
<div class='container-fluid'>
<p class='content content-header' >Title</p>
<p class='content content-text' >Content</p>
</div>
</div>
</body>
<footer>
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php'; ?>
</footer>
edit 3: Pictures of before and after: Before
After
I blocked sensitive information. All my other pages work fine and there is no issue with CSS. It is just this carousel that doesn't seem to work.
In your index.php page in the head tag. Try adding all of your scripts there.For now just start with the CDN from their website.. Try replacing your tags with this.. Generally it's good to reference all the script and css files you are going to use inside the tags.
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js">
</script>
<link rel="stylesheet" href="https://site/css/style.css">
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>
I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. I'm using jQuery 1.11.0 loaded via CDN from Google. I'm using jQuery 1.11.3 served via Static files in Django. The error seems to be in how Django is loading the varied Javascripts, but I'm not savvy enough to determine what the issue is.
ETA:
I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.
Here's the Django code generating the carousel:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
{% include "menu.html" %}
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
{% for image in index_carousel %}
{% if forloop.first %}
<li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
{% else %}
<li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in index_carousel %}
{% if forloop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
Here's the generated HTML:
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target='#mycarousel' class='active' data-slide-to='1'></li>
<li data-target='#mycarousel' data-slide-to='2'></li>
<li data-target='#mycarousel' data-slide-to='3'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
</html>
The error I consistently get is
$(...).carousel() is not a function.
What could be the issue here? All the files are being found, and I've tried timeouts to make sure everything is loaded, but to no avail. I'm running this same setup served via PHP/MySQL, and it works, so the only variable is Django. Is there something I'm missing with loading the static files?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Please include the above lines, its working fine if I include the above.
Ok so I'm learning lightbox for the first time. I'm trying to use it with this bootstrap template I downloaded which made it easy to put in the images and customize the navbar. Right now when I click the image, it brings me to a page with JUST the image. No pop up. Right now I'm focusing on just gallery1.jpg if you look at the HTML. Am I missing something? Hope this isn't confusing, thanks.
I am trying to use fancyBox for the lightbox add on.
Do I have the javascript location typed up incorrectly? http://i.imgur.com/pCgZkKA.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>4 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/4-col-portfolio.css" rel="stylesheet">
<!-- lightbox stuff -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#F60;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs- example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../startbootstrap4/index.html"><img src="logonav.png"</a></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Gallery
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a class="fancybox" rel="group" href="images/gallery1.jpg" data-lightbox="fancybox" data- title="untitled"><img src="images/gallery1.jpg"></a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery2.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery10.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery4.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery5.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery3.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery9.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery8.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery7.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery6.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery11.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery12.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
»
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You are loading jQuery twice:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
and at the end
<script src="js/jquery.js"></script>
remove the second one.