I'm new to HTML programming so I'll try to describe my problem the best I can.
This is adapted from Miguel Grinberg's Flask tutorial, using Boostrap 4.6, through quite a good amount of research.
My pages are extended from a base template. My base contain a link to a login modal page, which is getting its content from a separate HTML file. I'm using Flask WTF for this login modal page. When I go to login and click on the "Sign Up" button, seems like it reloads the page I am.
I think its sending the form.submit answer to that page's route (in VS Code's terminal, it says there is a POST to /index for example), so the question is how can I get the 'Sign In' button answer to the login route? I've found answers to something alike this question, but not similar enough to implement them.
(Relevant) routes.py:
from app import app, db
from app.models import User, Notification, Rule
from flask import render_template, flash, redirect, url_for, request, g, jsonify
from flask_login import current_user, login_user, logout_user, login_required
from app.forms import LoginForm, RegistrationForm, RuleForm
#app.route('/')
#app.route('/index', methods=['GET', 'POST'])
def index():
if not current_user.is_authenticated:
current_user.username="Guest User"
return render_template('index.html', title='Home')
#app.route('/login', methods=['GET', 'POST'])
def login_modal():
print("login_modal init")
if current_user.is_authenticated:
return redirect(url_for('index'))
form = LoginForm()
if form.validate_on_submit():
print("validate form")
user = User.query.filter_by(username=form.username.data).first()
if user is None or not user.check_password(form.password.data):
flash('Invalid username or password!', 'warning')
return redirect(url_for('login'))
login_user(user, remember=form.remember_me.data)
flash('Successfull login!', 'success')
return redirect(url_for('index'))
return render_template('login-modal.html', title='Sign In', form=form)
This is my base:
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Custom fonts for this template-->
<link href="{{ url_for('static', filename='fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url_for('static', filename='css/notificationservice.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus#master/dist/css/tempus-dominus.css"
rel="stylesheet" crossorigin="anonymous">
<!-- Bootstrap core JavaScript-->
<script src="{{ url_for('static', filename='js/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ url_for('static', filename='js/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ url_for('static', filename='js/notificationservice.min.js') }}"></script>
<!-- Page level plugins -->
<script src="{{ url_for('static', filename='js/jquery/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
<!-- Page level custom scripts -->
<script src="{{ url_for('static', filename='js/datatables-demo.js') }}"></script>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='smartphone.ico') }}">
<title>Notification Service - {{title}}</title>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{url_for('index')}}">
<div class="sidebar-brand-icon">
<i class="fas fa-satellite-dish"></i>
</div>
<div class="sidebar-brand-text mx-3">Notification Service</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Notifications -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('notifications')}}">
<i class="fas fa-bullhorn"></i>
<span >Notifications</span></a>
<p></p>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Nav Item - Rules -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('rules')}}">
<i class="fas fa-scroll"></i>
<span>Rules</span></a>
<p></p>
</li>
{%if current_user.username == 'admin' %}
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Manage Accounts -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('accounts')}}">
<i class="fas fa-tools"></i>
<span>Manage Accounts</span></a>
<p></p>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Manage Accounts -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('rules_configure')}}">
<i class="fas fa-tools"></i>
<span>Configure Rules</span></a>
<p></p>
</li>
{% endif %}
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<div class="container" style="display:flex;justify-content:center;">
<div class="container" style="display:inline;text-align:center;width:auto;">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'message' %}
<div class="alert alert-primary alert-dismissible" id="alert" role="alert"
style="margin-bottom: 0rem;">
{% else %}
<div class="alert alert-{{ category }} " id="alert" role="alert"
style="margin-bottom: 0rem;">
{% endif %}
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
</div>
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">{% if current_user.is_authenticated %}
{{current_user.username}}{%else%}Guest User{% endif %}</span>
<div class="sidebar-brand-icon">
{% if current_user.is_authenticated %}
<i class="fas fa-user-check fa-2x"></i>
{%else%}
<i class="fas fa-user-times fa-2x"></i>
{% endif %}
<!--<i class="fas fa-user-check fa-2x"></i>-->
</div>
</a>
{% if current_user.is_authenticated %}
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="{{url_for('profile', username=current_user.username)}}">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{url_for('logout')}}" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
{% else %}
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="{{url_for('login_modal')}}" data-toggle="modal"
data-target="#loginModal">
<i class="fas fa-sign-in-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Login
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{url_for('register')}}">
<i class="fas fa-book fa-sm fa-fw mr-2 text-gray-400"></i>
Register
</a>
</div>
{%endif%}
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
{% block app_content %}
{% endblock %}
</div>
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>NS 2022 ©</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Login Modal-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="{{url_for('logout')}}">Logout</a>
</div>
</div>
</div>
</div>
<script>
$('body').on('click', '[data-target="#loginModal"]', function(){
$($(this).data("target")+' .modal-content').load($(this).attr('href'));
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#alert').fadeOut('slow');
}, 3000); // <-- time in milliseconds
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#sidebarToggle").click(function(e) {
e.preventDefault();
$("#accordionSidebar").toggleClass("toggled");
$('#accordionSidebar.toggled').find("#sidebar").find(".collapse").collapse('hide');
});
});
</script>
</body>
</html>
This is my index.html:
{% extends 'base.html' %}
{% set active_page = "index" %}
{% block app_content %}
<h1 class="header_text">Some content...</h1>
{% endblock %}
The login page:
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" action="" method="post" id="loginForm" novalidate>
<div class="form-group has-validation">
<div>
{{ form.username(class="form-control form-control-user" +
(" is-invalid" if form.username.errors else ""), placeholder="Username",
id="inputValUsername", size=32, **{"aria-describedby": "inputValUsername",
"required": ""}) }}
</div>
{% for error in form.username.errors %}
<div class="text-danger">
<small>{{ error }}</small>
</div>
{% endfor %}
</div>
<div class="form-group has-validation">
<div>
{{ form.password(class="form-control form-control-user" +
(" is-invalid" if form.password.errors else ""), placeholder="Password",
id="inputValPassword", size=32, **{"aria-describedby": "inputValPassword",
"required": ""}) }}
</div>
{% for error in form.password.errors %}
<div class="text-danger">
<small>{{ error }}</small>
</div>
{% endfor %}
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
{{ form.remember_me(class="form-check-input") }} {{ form.remember_me.label }}
</div>
</div>
{{ form.submit(class="btn btn-primary btn-user btn-block", id='form-submit') }}
</form>
<hr>
<div class="text-center">
<a class="small" href="{{url_for('forgot')}}">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="{{url_for('register')}}">Create an Account!</a>
</div>
<div class="text-center">
<a class="small" href="{{url_for('index')}}">Back to Notification Service Home</a>
</div>
</div>
</div>
</div>
</div>
In your form html element change action="" to action="/login"
I am running a Django application where I receive the list of images and in my template, I have the following code for Carousel.
The issue is if I use this class "carousel-inner active" while iterating all images are set active and all images are shown on a single screen, if not if I remove active and just keep carousel-inner no image is shown
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner active">
{% for image in data.images %}
<div class="carousel-item active">
<img src="{{ image }}" alt="image 1" class="d-block" style="width:100%">
</div>
{% endfor %}
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
The answer was to use a for-loop container inside div
<div class="carousel-inner">
{% for image in data.images %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<img src="{{ image }}" class="d-block" style="width:100%">
</div>
{% endfor %}
</div>
So I have the bootstrap 5 library downloaded - both the compiled css and js and the source files. I have tried both of them - the css loads well from what I can tell - yet, I can't get this example to work from a related post on boostrap 4, which should work for bootstrap 5... I am trying to avoid using CDNs to provide the libraries, hence why I downloaded them. When I use the CDNs provided in the example it works like a charm.
Can someone point me to what the heck I am missing to make the carousel work? What file(s) do I need to reference to make it slide?
(Here is some code so I don't get yelled at)
I am using dJango and when I check the console I have no resource errors.
Once again, when I use the BS 4 CDN everything works...
{% load static %}
<html>
<head>
<title>
Welcome!
</title>
<!--
uncomment this and it works
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
the problem is the below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->
<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'favicon/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'CSS/main.css' %}">
<!--jQuery-->
<script src="{% static 'Java/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.slim.min.js' %}"></script>
<!--<script src="https://code.jquery.com/jQuery/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--bootstrap related-->
<!--
<link type="text/css" rel="stylesheet" href="{% static 'Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
-->
<link type="text/css" rel="stylesheet" href="{% static 'Bootstrap/bootstrap-5.0.2/dist/css/bootstrap.min.css' %}">
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.min.js' %}"></script>
<!--
this is the problem...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
</head>
<body>
<!--Image Carosel-->
<div class="d-flex justify-content-center">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/1080/500/animals" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>My Caption Title (1st Image)</h5>
<p>The whole caption will only show up if the screen is at least medium size.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I have to go to bed and do things in the morning... I will be up in like 12 hours - so no rush.
To migrate from version 4 to 5 you have to change the data values, for example data-bs-target instead of data-target.
In your case, just make simple changes
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<body>
<!--Image Carosel-->
<div class="d-flex justify-content-center">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/1080/500/animals" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>My Caption Title (1st Image)</h5>
<p>The whole caption will only show up if the screen is at least medium size.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-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="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
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>
I started a project on Django.
In one of my app, I did a template with a two menu, one black one white with fade in and fade out (using semantic ui )
here the code
<!-- Menu fixe -->
<div class="ui large top fixed hidden menu" >
<div class="ui container">
<a class="active item" id="acc_menu">Accueil</a>
<a class="item">Comment ça marche </a>
<a class="item">Vous voyagez ?</a>
<!-- <a class="item">besoin 1</a> -->
<div class="right item">
<a class="ui inverted red button" id="connexction1">Connecxion</a>
<a class="ui inverted red button" id="inscription1">Inscription</a>
</div>
</div>
</div>
<!-- Menu noir -->
<div class="pusher">
<div class="ui inverted segment" id="menu_fixe">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="active item" id="acc_menu">Accueil </a>
<a class="item">Comment ça marche </a>
<a class="item">Vous voyagez ?</a>
<!-- <a class="item">besoin 1</a> -->
<div class="right item">
<a class="ui inverted red button" id="connexction">Se connecter</a>
<a class="ui inverted red button" id="inscription">S'inscrire</a>
</div>
</div>
</div>
</div>
</div>
{% block extrahead %}
<! -- other loading --!>
<script src="{% static 'js/base.js' %} "></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %} "/>
{% endblock %}
with this js file : base.js
$(document).ready(function() {
// fix menu when passed
$('#menu_fixe')
.visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function() {
$('.fixed.menu').transition('fade out');
}
})
;
})
;
that work fine,but when I add a slider on a homepage, with the template linked the fade in - fade out don't work anymore!
here my homepage code:
<!DOCTYPE html>
{% extends "home/base.html" %}
{% load static %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
{% block content %}
<!-- SLIDERSHOW -->
<ul class="skdslider">
<li>
<img src=" {% static 'img/slide/metro.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/preparation gateau.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/travelling-with-suitcase.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/velo.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/metro.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/more-travel-teddies-series.jpg' %}" />
</li>
</ul>
{% block extrahead %}
{{block.super}}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="{% static 'js/accueil.js' %} "></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/accueil.css' %} "/>
{% endblock %}
{% endblock %}
I have another js file : "accueil.js" for the slideshow and it's work fine.
all my setting are good too :
STATIC_URL = '/static/'
STATICFILES_DIRS = (BASE_DIR + '/static',)