I am trying to use bootstrap-toggle to create a toggle button according to http://www.bootstraptoggle.com/.
I have the following css and js imports.
all CSS and JS files are latest versions pulled today from the web.
<!-- Bootstrap Core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-toggle.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/agency.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/google_font.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/jquery.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.easing.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jqBootstrapValidation.js')}}"></script>
<script src="{{ url_for('static', filename='js/respond.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/html5shiv.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/contact_me.js')}}"></script>
<script src="{{ url_for('static', filename='js/classie.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/cbpAnimatedHeader.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-toggle.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/agency.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
and my html code is as follows
<div class="col-md-6">
<div class="pull-left">
<input type="checkbox" name="accounts" id="accounts" data-toggle="toggle">
<button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input data-toggle="toggle" type="checkbox" name="accounts" id="accounts"></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
</div>
This code shows up as a simple checkbox. I would prefer to use modules instead of writing my own code as I am very new as css and js. Any idea why this is not showing up correctly?
Related
I desperately try to find how to change many 'a' anchor features styles within a div, found by their self classname. I think i got you the whole needed code related as below.
I thank you a lot for your time and your help.
HTML:
<div class="dropdown">
<a class="boutonmenuprincipal"> <img src="{{ url_for('static', filename='logo_sel_lang.png') }}"></a>
<div class="dropdown_child">
Français <img src="{{ url_for('static', filename='logo_fr.png') }}" class="flags">
Deutsch <img src="{{ url_for('static', filename='logo_de.png') }}" class="flags">
Español <img src="{{ url_for('static', filename='logo_es.png') }}" class="flags">
English <img src="{{ url_for('static', filename='logo_uk.png') }}" class="flags">
Türk <img src="{{ url_for('static', filename='logo_tk.png') }}" class="flags">
Brasil <img src="{{ url_for('static', filename='logo_br.png') }}" class="flags">
Italiano <img src="{{ url_for('static', filename='logo_it.png') }}" class="flags">
Românesc <img src="{{ url_for('static', filename='logo_ro.png') }}" class="flags">
Nederlands<img src="{{ url_for('static', filename='logo_nl.png') }}" class="flags">
<a href='' onclick='.dropdown:hover disabled'>× Close </a>
</div>
</div>
JS:
var myObj1 = window.document.querySelectorAll('dropdown_child');
myObj1.style.height = '0px';
myObj1.style.color = 'white';
myObj1.style.textDecoration = 'none';
querySelector should include . for selecting class.
If you want to select all 'a' tags in myObj1, you have to select dropdown_child's children, not querySelectorAll('.dropdown_child').
It'll only select a .dropdown_chlid element.
Solution
const myObj1 = document.querySelector(".dropdown_child").children;
[...myObj1].map((el) => {
el.style.height = "0px";
el.style.color = "white";
el.style.textDecoration = "none";
});
<div class="dropdown">
<a class="boutonmenuprincipal"> <img src="{{ url_for('static', filename='logo_sel_lang.png') }}"></a>
<div class="dropdown_child">
Français <img src="{{ url_for('static', filename='logo_fr.png') }}" class="flags">
Deutsch <img src="{{ url_for('static', filename='logo_de.png') }}" class="flags">
Español <img src="{{ url_for('static', filename='logo_es.png') }}" class="flags">
English <img src="{{ url_for('static', filename='logo_uk.png') }}" class="flags">
Türk <img src="{{ url_for('static', filename='logo_tk.png') }}" class="flags">
Brasil <img src="{{ url_for('static', filename='logo_br.png') }}" class="flags">
Italiano <img src="{{ url_for('static', filename='logo_it.png') }}" class="flags">
Românesc <img src="{{ url_for('static', filename='logo_ro.png') }}" class="flags">
Nederlands<img src="{{ url_for('static', filename='logo_nl.png') }}" class="flags">
<a href='' onclick='.dropdown:hover disabled'>× Close </a>
</div>
</div>
I'm trying to load easy pie chart for my HTML+Flask page and I received only the label without circle.
{% block head %}
<title>Home</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}"/>
{% endblock %}
{% block body %}
<div class="container">
<div class="overview-chart-body">
<div class="chart" data-percent="75"><span class="percent">75%</span></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename ='js/jquery.easypiechart.js') }}"></script>
<script>
$(function () {
$('.chart').easyPieChart({
})
})
</script>
{% endblock %}
Can anyone help me what is wrong with this code and how to fix this.
I have a laravel project in which I want to use jQuery UI for smooth transitions and effects. I added the jquery-ui.js to the public/js folder. The same as my current jQuery file which works as intended.
I imported the javascript file in my blade template like so:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/animate.css') }}" rel="stylesheet">
<link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
When I try to call the toggle function on a button click I get the following error:
app.js:14040 Uncaught TypeError: jQuery.easing[this.easing] is not a function
While regular jQuery works fine, jQuery UI does not.
Main.js
$(document).ready(function() {
$('#slide-next').on('click', function() {
$('.register-form-user').toggle("slide", { direction: "left" }, 1000);
});
});
All my paths are correct. When downloading the jQuery UI file I made sure I selected all the available options including easing.
What is causing this error?
Bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
jQuery is already included in your app.js bundle from the boostrap.js file. The last call to app.js in your html overrides the previous instance of jquery, making it load after jQuery UI. jQuery must be loaded before jquery-ui.
Change this
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
To this
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
and remove the deferred script tag from your <head> section
I have add datepicker for jQuery UI but I have this error:
Uncaught TypeError: $(...).datepicker is not a function
I add plugin jQuery and jQuery-ui but I have also error
code twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Acceuil- Trouvez une nounou c'est facile{% endblock %}</title>
{% block stylesheets %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:400,700|Merriweather:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.Default.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/application-42e4eacdbf0506bba5a7d1c783732309c84eb2d6203203da608691b414ebe1c7.css') }}">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="page">
{% block header %}
<header id="navbar">
<div class="container">
<a class="logo nounou-top" href="{{path('homePage')}}">BabySitter</a>
<div class="ui secondary user menu floated right">
<div id="connect_subscribe_links">
<a class="item" id="navbar_connect" href="{{path('fos_user_security_login')}}">Connexion</a>
<a class="ui small action button blue" id="navbar_subscribe" href="{{ path('inscription') }}">Inscription</a>
</div>
<div class="ui dropdown autolaunch icon button right top pointing blue" id="connect_subscribe_menu">
<i class="dropdown icon"></i>
<div class="ui menu transition hidden">
<a class="item" href="/sessions/new">Connexion</a>
<a class="item" href="/welcome/choice_category_ad">Inscription</a>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
{% block body %}
{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('bundles/app/js/places.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/application-5385288a7f4b3693dff01f301b0b54547c2887a2eaf0c85b91ed655ec7424ff7.js') }}"></script>
<script src="{{ asset('bundles/app/js/stripe.js') }}"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
{% endblock %}
</body>
</html>
I add plugin jquery and jquery UI but I have this error .. how to resolve this error please
Remove this, try again: (your problem is you're calling the jquery library twice)
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
I have add datepicker for jQuery UI but I have this error:
Uncaught TypeError: $(...).datepicker is not a function
I add plugin jQuery and jQuery-ui but I have also error
code twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Acceuil-{% endblock %}</title>
{% block stylesheets %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:400,700|Merriweather:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.Default.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/application-42e4eacdbf0506bba5a7d1c783732309c84eb2d6203203da608691b414ebe1c7.css') }}">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="page">
{% block header %}
<header id="navbar">
<div class="container">
<a class="logo nounou-top" href="{{path('homePage')}}">BabySitter</a>
<div class="ui secondary user menu floated right">
<div id="connect_subscribe_links">
<a class="item" id="navbar_connect" href="{{path('fos_user_security_login')}}">Connexion</a>
<a class="ui small action button blue" id="navbar_subscribe" href="{{ path('inscription') }}">Inscription</a>
</div>
<div class="ui dropdown autolaunch icon button right top pointing blue" id="connect_subscribe_menu">
<i class="dropdown icon"></i>
<div class="ui menu transition hidden">
<a class="item" href="/sessions/new">Connexion</a>
<a class="item" href="/welcome/choice_category_ad">Inscription</a>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
{% block body %}
{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('bundles/app/js/places.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/application-5385288a7f4b3693dff01f301b0b54547c2887a2eaf0c85b91ed655ec7424ff7.js') }}"></script>
<script src="{{ asset('bundles/app/js/stripe.js') }}"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
{% endblock %}
</body>
</html>
I add plugin jquery and jquery UI but I have this error .. how to resolve this error please