Problem for using charts

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Problem for using charts

hamdinirania pro asked 6 years ago

Bonsoir, j'ai un problème avec l'utilisation des graphiques, ils ne s'affichent pas. Le message d'erreur est Uncaught ReferenceError: le graphique n'est pas défini.

Piotr Glejzer staff commented 6 years ago

Hi, can you show your code HTML/css/js with your problem? Best, Piotr

hamdinirania pro answered 6 years ago 

js :
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});

HTML:

<!-- Section: Features v.3 -->
    <section class="my-5">
        <!-- Section heading -->
        <h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
        <!-- Section description -->
        <p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <!-- Grid row -->
        <div class="row">
            <!-- Grid column -->
            <div class="col-lg-5 text-center text-lg-left">
                <canvas id="myChart" style="max-width: 500px;"></canvas>
            </div>
            <!-- Grid column -->
            <!-- Grid column -->
            <div class="col-lg-7">
                <!-- Grid row -->
                <div class="row mb-3">
                    <!-- Grid column -->
                    <div class="col-xl-10 col-md-11 col-10">
                        <h5 class="font-weight-bold mb-3">Safety</h5>
                        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
                    </div>
                    <!-- Grid column -->
                </div>
                <!-- Grid row -->
            </div>
            <!--Grid column-->
        </div>
        <!-- Grid row -->
    </section>
    <!-- Section: Features v.3 -->

CSS:
Nothing more


I use the framework Laravel

Thanks !

Piotr Glejzer staff commented 6 years ago

I copied and pasted your code to my file and everything is working well.Is that all your code?

hamdinirania pro answered 6 years ago

Yes, nothing special, especially I only use MDBootstrap. Here is the rest of the code. But the error message reads: 757 Uncaught ReferenceError: Chart is not defined, I had this error create: 755 Uncaught ReferenceError: WOW is not defined for init animation, I solved the problem with two script 
Start your code here
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
that's all my code
Start your code here
Js :
<!-- JQuery --> <!-- Jquery core JavaScript --> <script src="{{ asset('js/jquery-3.3.1.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- MDB core JavaScript --> <script src="{{ asset('js/popper.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- Bootstrap tooltips --> <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- MDB core JavaScript --> <script src="{{ asset('js/mdb.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> <script type="text/javascript"> //Animation init new WOW().init(); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> HTML : @extends('layouts.master_landings',['title' => 'Architecte']) @section('tête') <!-- Full Page Intro --> <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbcdn.b-cdn.net/img/landing/creativite.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"> <!-- Mask & flexbox options--> <div class="mask rgba-stylish-strong d-flex justify-content-center align-items-center"> <!-- Content --> <div class="container"> <!--Grid row--> <div class="row wow fadeIn"> <!--Grid column--> <div class="col-md-12 text-center"> <h1 class="display-4 font-weight-bold mb-0 pt-md-5 pt-5 white-text text-uppercase wow fadeInDown" data-wow-delay="0.2s">Libérer votre créativité </h1> <hr class="white title-hr" style="width: 70%;"> <h5 class="pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInUp" data-wow-delay="0.2s">Nous nous chargeons d' assurer la <strong class="orange-axmy">pérénnité</strong> et d' optimiser le <strong class="orange-axmy">coût global</strong>, pour vos <strong class="orange-axmy">clients</strong>.</h5> <div class="wow fadeInUp" data-wow-delay="0.4s"> <a href="https://www.prisederendezvous.axmy.co/" class="btn btn-rounded white-text z-depth-5 ml-lg-0 orange-b-axmy wow fadeIn" data-wow-delay="0.3s">Prener rendez-vous</a> </div> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- Content --> </div> <!-- Mask & flexbox options--> </div> <!-- Full Page Intro --> @stop @section('content') <div class="container"> <!-- Section: Features v.3 --> <section class="my-5"> <!-- Section heading --> <h2 class="h1-responsive font-weight-bold text-center my-5">Libérer la créativité de la contrainte du coût</h2> <!-- Section description --> <p class="lead grey-text text-center w-responsive mx-auto mb-5"> La conception architecturale </p> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-lg-5 text-center text-lg-left"> <canvas id="myChart" style="max-width: 500px;"></canvas> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-lg-7"> <!-- Grid row --> <div class="row mb-3"> <!-- Grid column --> <div class="col-xl-10 col-md-11 col-10"> <h5 class="font-weight-bold mb-3">Safety</h5> <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!--Grid column--> </div> <!-- Grid row --> </section> <!-- Section: Features v.3 --> </div> <div class="container"> <!--Section: Pricing v.4--> <section class="text-center pb-3 my-5"> <!-- Section heading --> <h2 class="h1-responsive font-weight-bold text-center my-5">Ce que nous faisons ?</h2> <!-- Section description --> <p class="lead grey-text text-center w-responsive mx-auto mb-5">Nous <strong class="orange-axmy">concevons</strong> des plans d’entretiens <strong class="orange-axmy">sur-mesure</strong> en exploitants les meilleurs techniques et <strong class="orange-axmy">innovations</strong> dans le domaine.<br> Nous libérons votre créativité des contraintes, et nous<strong class="orange-axmy"> préservons </strong> vos ouvrages des effets de leurs exploitations et du temps.</p> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-cubes fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Modélisation </h3> <p class="grey-text"> Détermination des besoins fonctionnels et non fonctionnels. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-map fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Ordonnancement </h3> <p class="grey-text"> Étude et description des tâches élémentaires et de leurs interactions.<br>Détermination des moyens. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-euro fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Chiffrage </h3> <p class="grey-text"> Évaluation du coût structurel de l'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-globe fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Co² </h3> <p class="grey-text"> Évaluation et réduction, de l'empreinte carbone des prestations d'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-search-plus fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Recherche opérationnelle </h3> <p class="grey-text"> Développement de techniques et de process, adapté aux besoins de la structure. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-legal fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Réglementation </h3> <p class="grey-text"> La dimension législative est un cadre pour certaines activités et influence le coût de l'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> </section> <!--Section: Pricing v.4--> </div> <!-- Streak --> <div class="streak streak-photo streak-long-2 " style="background-image: url('https://mdbcdn.b-cdn.net/img/landing/archistreak.jpg');"> <div class="flex-center mask rgba-black-strong"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center white-text"> <strong>Concentrez-vous sur votre <strong class="orange-axmy">cœur</strong> de métier</strong> </h2> </div> </div> <!-- Section heading --> </div> <!--First row--> </div> </div> </div> <!-- Streak --> @stop @section('contact') <section class="section pb-5" id="contact"> <div class="row"> <div class="col-md-6 offset-3"> <form action="{{ route('landing_page_maitre_oeuvre.store') }}" method="POST"> @csrf <div class=" text-center formHeader mb-1 pt-3"> <p class="h5 text-center mb-4">Contacter-nous !</p> <p> Nous vous remercions de votre intérêt pour les services d'Axmy.<br> Veuillez compléter le formulaire.<br> Vous recevrez une réponse dans les <strong>6 heures.</strong><br><i class="font-italic"><strong>Tous </strong>les champs sont <strong>nécessaires</strong>.</i></p> </div> <hr sclass="orange-axmy"> <br> <br> <div class="row"> <div class="col-6"> <div class="md-form" {{ $errors->has('nom') ? ' has-error' : '' }}> <i class="fa fa-user prefix" style="color: #FD4D00;"></i> <input type="text" name="nom" id="nom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required=" required" value="{{old('nom')}}"> <label for="nom" class="control-label">Nom </label> @if ($errors->has('nom')) <span class="help-block"><small style="color: red;">{!! $errors->first('nom') !!}</small></span> @endif </div> </div> <div class="col-6"> <div class="md-form" {{ $errors->has('prenom') ? ' has-error' : '' }}> <i class="fa fa-user prefix orange-axmy"></i> <input type="text" name="prenom" id="prenom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required="required" value="{{old('nom')}}"> <label for="prenom" class="control-label">Prénom </label> @if ($errors->has('prenom')) <span class="help-block"><small style="color: red;">{!! $errors->first('prenom') !!}</small></span> @endif </div> </div> <div class="col"> <div class="md-form" {{ $errors->has('fonction') ? ' has-error' : '' }}> <i class="fa fa-envelope prefix orange-axmy"></i> <input type="text" name="fonction" id="fonction" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Email valide" required="required" value="{{old('fonction')}}"> <label for="fonction" class="control-label">Fonction </label> @if ($errors->has('fonction')) <span class="help-block"><small style="color: red;" >{!! $errors->first('fonction') !!}</small></span> @endif </div> <div class="md-form" {{ $errors->has('email') ? ' has-error' : '' }}> <i class="fa fa-envelope prefix orange-axmy"></i> <input type="email" name="email" id="email" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Email valide" required="required" value="{{old('email')}}"> <label for="email" class="control-label">Email professionnel </label> @if ($errors->has('email')) <span class="help-block"><small style="color: red;" >{!! $errors->first('email') !!}</small></span> @endif </div> <div class="md-form ui-widget" {{ $errors->has('objet') ? ' has-error' : '' }}> <i class="fa fa-tag prefix orange-axmy"></i> <input type="text" name="objet" id="objet" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required="required" value="{{old('objet')}}"> <label for="objet" class="control-label">Objet </label> @if ($errors->has('objet')) <span class="help-block"><small style="color: red;" >{!! $errors->first('objet') !!}</small></span> @endif </div> <div class="md-form" {{ $errors->has('msg') ? ' has-error' : '' }}> <i class="fa fa-pencil prefix orange-axmy"></i> <textarea type="text" name="msg" id="msg" class="md-textarea" lenght="255" style="height: 100px" required="required" value="{{old('msg')}}"></textarea> <label for="msg" class="control-label">Message </label> @if ($errors->has('msg')) <span class="help-block"><small style="color: red;" >{!! $errors->first('msg') !!}</small></span> @endif </div> <!-- CONSENTEMENT checkbox --> <div class="form-check mr-3" {{ $errors->has('consentement') ? ' has-error' : '' }} > <input class="form-check-input" type="checkbox" name="consentement[]" value="0" id="consentement" required="required"> <label class="form-check-label blue-grey-text" for="consentement" style="color: grey; font-size: 12px;">En cochant la case vous nous autorisez à vous contactez</label> @if ($errors->has('consentement')) <span class="help-block"><small style="color: red;" >{!! $errors->first('consentement') !!}</small></span> @endif </div> <br><br> <div class="text-center"> <button type="submit" class="btn btn-outline-warning orange-b-axmy">Hello axmy <i class="fa fa-paper-plane-o ml-3"></i></button> </div> </form> </div> </div> </section> @stop CSS : <!-- Font Awesome --> <link rel="stylesheet" type="text/css" href="{{ asset('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css') }}"> <!-- Bootstrap core CSS --> <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}"> <!-- Material Design Bootstrap --> <link rel="stylesheet" type="text/css" href="{{ asset('css/mdb.min.css') }}"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style> .h1{ font-family: 'Lato', sans-serif; font-size: 20px; } .p{ font-family: 'Lato', sans-serif; font-size: 18px; } </style> {{-- stepper de la la landing page SG --}} <style type="text/css" media="screen"> .steps-form-2 { display: table; width: 100%; position: relative; } .steps-form-2 .steps-row-2 { display: table-row; } .steps-form-2 .steps-row-2:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 2px; background-color: #7283a7; } .steps-form-2 .steps-row-2 .steps-step-2 { display: table-cell; text-align: center; position: relative; } .steps-form-2 .steps-row-2 .steps-step-2 p { margin-top: 0.5rem; } .steps-form-2 .steps-row-2 .steps-step-2 button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 { width: 70px; height: 70px; border: 2px solid #59698D; background-color: white !important; color: #59698D !important; border-radius: 50%; padding: 22px 18px 15px 18px; margin-top: -22px; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2:hover { border: 2px solid #4285F4; color: #4285F4 !important; background-color: white !important; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 .fa { font-size: 1.7rem; } </style> {{-- /stepper de la la landing page SG --}} <style> html, body, header, .jarallax { height: 100%; } @media (min-width: 560px) and (max-width: 740px) { html, body, header, .jarallax { height: 500px; } } @media (min-width: 800px) and (max-width: 850px) { .navbar:not(.top-nav-collapse) { background: #FFFFFF!important; } .navbar { box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12) !important; } } .font-small { font-size: 0.9rem; } @media (max-width: 1025px) { .stepper.timeline-simple li { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } } .stepper.timeline-simple li a { padding: 0px; left: 50%; } @media (max-width: 450px) { .stepper.timeline-simple li a { left: 6%; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.timeline-simple li a { left: 6%; } } .stepper.timeline-simple li a .circle { margin-top: 0.9rem; width: 23px; height: 23px; line-height: 23px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; margin-left: -12px; background-color: #ccc; z-index: 2; } .stepper.timeline-simple li .step-content { width: 45%; float: left; border-radius: 2px; position: relative; } .stepper.timeline-simple li .step-content:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #e0e0e0; border-right: 0 solid #e0e0e0; border-bottom: 15px solid transparent; content: " "; } .stepper.timeline-simple li .step-content:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } @media (max-width: 450px) { .stepper.timeline-simple li .step-content { width: 80%; left: 3rem; margin-right: 3rem; margin-bottom: 2rem; float: right; } .stepper.timeline-simple li .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.timeline-simple li .step-content { width: 85%; left: 3rem; margin-right: 3rem; margin-bottom: 2rem; float: right; } .stepper.timeline-simple li .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } .stepper.timeline-simple li.timeline-inverted { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .stepper.timeline-simple li.timeline-inverted .step-content { float: right; } .stepper.timeline-simple li.timeline-inverted .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li.timeline-inverted .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { content: " "; position: absolute; width: 2px; background-color: #9e9e9e; left: 50%; top: 32px; height: 100%; margin-left: -1.5px; } @media (max-width: 450px) { .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { left: 6%; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { left: 6%; } } .stepper-vertical li .step-content p { line-height: 1.75; } .pricing-card .price .number:after, .pricing-card .price .number:after { content: "/day"; } </style> <style> .mockup{ background-image : url(image.png); /*Pour créer une image référencée dans la CSS, utilisez la commande 'Exporter la CSS sélectionnée'.*/ background-repeat : no-repeat; position : absolute ; left : 1233px; top : 167px; width : 589px; height : 582px; } </style> {{-- MES CLASS --}} <style type="text/css" media="screen"> .orange-axmy{ color: #FD4D00; } .orange-b-axmy{ background-color: #FD4D00; } .grey-axmy{ color: #515153; } .grey-b-axmy{ background-color: #515153; } </style>   Nothing more !

Piotr Glejzer staff answered 6 years ago

You need to delete 'async' and 'defer' from you tags.
If you will do this you can also delete scripts tags like
" <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>"

If you use 'defer' and 'async' your code between scripts tags is loading as last time and it's reason why you have 'chart is not defined and wow is not defined'.

I changed sctrutruce your code but it is working :).

 
<!DOCTYPE html>
<html lang="en">

<head>
 <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">
 <title>Material Design Bootstrap</title>
 <!-- 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="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/style.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 <style>
 .h1 {
 font-family: 'Lato', sans-serif;
 font-size: 20px;
 }

 .p {
 font-family: 'Lato', sans-serif;
 font-size: 18px;
 }

 .steps-form-2 {
 display: table;
 width: 100%;
 position: relative;
 }

 .steps-form-2 .steps-row-2 {
 display: table-row;
 }

 .steps-form-2 .steps-row-2:before {
 top: 14px;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 100%;
 height: 2px;
 background-color: #7283a7;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 {
 display: table-cell;
 text-align: center;
 position: relative;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 p {
 margin-top: 0.5rem;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 button[disabled] {
 opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 {
 width: 70px;
 height: 70px;
 border: 2px solid #59698D;
 background-color: white !important;
 color: #59698D !important;
 border-radius: 50%;
 padding: 22px 18px 15px 18px;
 margin-top: -22px;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2:hover {
 border: 2px solid #4285F4;
 color: #4285F4 !important;
 background-color: white !important;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 .fa {
 font-size: 1.7rem;
 }

 html,
 body,
 header,
 .jarallax {
 height: 100%;
 }

 @media (min-width: 560px) and (max-width: 740px) {
 html,
 body,
 header,
 .jarallax {
 height: 500px;
 }
 }

 @media (min-width: 800px) and (max-width: 850px) {
 .navbar:not(.top-nav-collapse) {
 background: #FFFFFF !important;
 }
 .navbar {
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
 }
 }

 .font-small {
 font-size: 0.9rem;
 }

 @media (max-width: 1025px) {
 .stepper.timeline-simple li {
 -webkit-box-align: end;
 -webkit-align-items: flex-end;
 -ms-flex-align: end;
 align-items: flex-end;
 }
 }

 .stepper.timeline-simple li a {
 padding: 0px;
 left: 50%;
 }

 @media (max-width: 450px) {
 .stepper.timeline-simple li a {
 left: 6%;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.timeline-simple li a {
 left: 6%;
 }
 }

 .stepper.timeline-simple li a .circle {
 margin-top: 0.9rem;
 width: 23px;
 height: 23px;
 line-height: 23px;
 font-size: 1.4em;
 text-align: center;
 position: absolute;
 top: 16px;
 margin-left: -12px;
 background-color: #ccc;
 z-index: 2;
 }

 .stepper.timeline-simple li .step-content {
 width: 45%;
 float: left;
 border-radius: 2px;
 position: relative;
 }

 .stepper.timeline-simple li .step-content:before {
 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 15px solid #e0e0e0;
 border-right: 0 solid #e0e0e0;
 border-bottom: 15px solid transparent;
 content: " ";
 }

 .stepper.timeline-simple li .step-content:after {
 position: absolute;
 top: 27px;
 right: -14px;
 display: inline-block;
 border-top: 14px solid transparent;
 border-left: 14px solid #fff;
 border-right: 0 solid #fff;
 border-bottom: 14px solid transparent;
 content: " ";
 }

 @media (max-width: 450px) {
 .stepper.timeline-simple li .step-content {
 width: 80%;
 left: 3rem;
 margin-right: 3rem;
 margin-bottom: 2rem;
 float: right;
 }
 .stepper.timeline-simple li .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }
 .stepper.timeline-simple li .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.timeline-simple li .step-content {
 width: 85%;
 left: 3rem;
 margin-right: 3rem;
 margin-bottom: 2rem;
 float: right;
 }
 .stepper.timeline-simple li .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }
 .stepper.timeline-simple li .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }
 }

 .stepper.timeline-simple li.timeline-inverted {
 -webkit-box-align: end;
 -webkit-align-items: flex-end;
 -ms-flex-align: end;
 align-items: flex-end;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content {
 float: right;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }

 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 content: " ";
 position: absolute;
 width: 2px;
 background-color: #9e9e9e;
 left: 50%;
 top: 32px;
 height: 100%;
 margin-left: -1.5px;
 }

 @media (max-width: 450px) {
 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 left: 6%;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 left: 6%;
 }
 }

 .stepper-vertical li .step-content p {
 line-height: 1.75;
 }

 .pricing-card .price .number:after,
 .pricing-card .price .number:after {
 content: "/day";
 }

 .mockup {
 background-image: url(image.png);
 /*Pour créer une image référencée dans la CSS, utilisez la commande 'Exporter la CSS sélectionnée'.*/
 background-repeat: no-repeat;
 position: absolute;
 left: 1233px;
 top: 167px;
 width: 589px;
 height: 582px;
 }


 .orange-axmy {
 color: #FD4D00;
 }

 .orange-b-axmy {
 background-color: #FD4D00;
 }

 .grey-axmy {
 color: #515153;
 }

 .grey-b-axmy {
 background-color: #515153;
 }

 </style>
</head>

<body>

 <!-- Full Page Intro -->
 <div class="view jarallax" style="background-image: url('https://mdbcdn.b-cdn.net/img/landing/creativite.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
 <!-- Mask & flexbox options-->
 <div class="mask rgba-stylish-strong d-flex justify-content-center align-items-center">
 <!-- Content -->
 <div class="container">
 <!--Grid row-->
 <div class="row wow fadeIn">
 <!--Grid column-->
 <div class="col-md-12 text-center">
 <h1 class="display-4 font-weight-bold mb-0 pt-md-5 pt-5 white-text text-uppercase wow fadeInDown" data-wow-delay="0.2s">Libérer votre créativité </h1>
 <hr class="white title-hr" style="width: 70%;">
 <h5 class="pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInUp" data-wow-delay="0.2s">Nous nous chargeons d' assurer la
 <strong class="orange-axmy">pérénnité</strong> et d' optimiser le
 <strong class="orange-axmy">coût global</strong>, pour vos
 <strong class="orange-axmy">clients</strong>.</h5>
 <div class="wow fadeInUp" data-wow-delay="0.4s">
 <a href="https://www.prisederendezvous.axmy.co/" class="btn btn-rounded white-text z-depth-5 ml-lg-0 orange-b-axmy wow fadeIn"
 data-wow-delay="0.3s">Prener rendez-vous</a>
 </div>
 </div>
 <!--Grid column-->
 </div>
 <!--Grid row-->
 </div>
 <!-- Content -->
 </div>
 <!-- Mask & flexbox options-->
 </div>
 <!-- Full Page Intro -->
 @stop @section('content')
 <div class="container">
 <!-- Section: Features v.3 -->
 <section class="my-5">
 <!-- Section heading -->
 <h2 class="h1-responsive font-weight-bold text-center my-5">Libérer la créativité de la contrainte du coût</h2>
 <!-- Section description -->
 <p class="lead grey-text text-center w-responsive mx-auto mb-5">
 La conception architecturale
 </p>
 <!-- Grid row -->
 <div class="row">
 <!-- Grid column -->
 <div class="col-lg-5 text-center text-lg-left">
 <canvas id="myChart" style="max-width: 500px;"></canvas>
 </div>
 <!-- Grid column -->
 <!-- Grid column -->
 <div class="col-lg-7">
 <!-- Grid row -->
 <div class="row mb-3">
 <!-- Grid column -->
 <div class="col-xl-10 col-md-11 col-10">
 <h5 class="font-weight-bold mb-3">Safety</h5>
 <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem
 ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
 </div>
 <!-- Grid column -->
 </div>
 <!-- Grid row -->
 </div>
 <!--Grid column-->
 </div>
 <!-- Grid row -->
 </section>
 <!-- Section: Features v.3 -->
 </div>
 <div class="container">
 <!--Section: Pricing v.4-->
 <section class="text-center pb-3 my-5">
 <!-- Section heading -->
 <h2 class="h1-responsive font-weight-bold text-center my-5">Ce que nous faisons ?</h2>
 <!-- Section description -->
 <p class="lead grey-text text-center w-responsive mx-auto mb-5">Nous
 <strong class="orange-axmy">concevons</strong> des plans d’entretiens
 <strong class="orange-axmy">sur-mesure</strong> en exploitants les meilleurs techniques et
 <strong class="orange-axmy">innovations</strong> dans le domaine.
 <br> Nous libérons votre créativité des contraintes, et nous
 <strong class="orange-axmy"> préservons </strong> vos ouvrages des effets de leurs exploitations et du temps.</p>
 <!--Grid row-->
 <div class="row">
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-cubes fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Modélisation
 </h3>
 <p class="grey-text">
 Détermination des besoins fonctionnels et non fonctionnels.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-map fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Ordonnancement
 </h3>
 <p class="grey-text">
 Étude et description des tâches élémentaires et de leurs interactions.
 <br>Détermination des moyens.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-euro fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Chiffrage
 </h3>
 <p class="grey-text">
 Évaluation du coût structurel de l'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-globe fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Co²
 </h3>
 <p class="grey-text">
 Évaluation et réduction, de l'empreinte carbone des prestations d'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-search-plus fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Recherche opérationnelle
 </h3>
 <p class="grey-text">
 Développement de techniques et de process, adapté aux besoins de la structure.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-legal fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Réglementation
 </h3>
 <p class="grey-text">
 La dimension législative est un cadre pour certaines activités et influence le coût de l'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 </section>
 <!--Section: Pricing v.4-->
 </div>
 <!-- Streak -->
 <div class="streak streak-photo streak-long-2 " style="background-image: url('https://mdbcdn.b-cdn.net/img/landing/archistreak.jpg');">
 <div class="flex-center mask rgba-black-strong">
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <h2 class="text-center white-text">
 <strong>Concentrez-vous sur votre
 <strong class="orange-axmy">cœur</strong> de métier</strong>
 </h2>
 </div>
 </div>
 <!-- Section heading -->
 </div>
 <!--First row-->
 </div>
 </div>
 </div>
 <!-- Streak -->
 @stop @section('contact')
 <section class="section pb-5" id="contact">
 <div class="row">
 <div class="col-md-6 offset-3">
 <form action="{{ route('landing_page_maitre_oeuvre.store') }}" method="POST">
 @csrf
 <div class=" text-center formHeader mb-1 pt-3">
 <p class="h5 text-center mb-4">Contacter-nous !</p>
 <p> Nous vous remercions de votre intérêt pour les services d'Axmy.
 <br> Veuillez compléter le formulaire.
 <br> Vous recevrez une réponse dans les
 <strong>6 heures.</strong>
 <br>
 <i class="font-italic">
 <strong>Tous </strong>les champs sont
 <strong>nécessaires</strong>.</i>
 </p>
 </div>
 <hr sclass="orange-axmy">
 <br>
 <br>
 <div class="row">
 <div class="col-6">
 <div class="md-form" {{ $errors->has('nom') ? ' has-error' : '' }}>
 <i class="fa fa-user prefix" style="color: #FD4D00;"></i>
 <input type="text" name="nom" id="nom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required=" required" value="{{old('nom')}}">
 <label for="nom" class="control-label">Nom </label>
 @if ($errors->has('nom'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('nom') !!}</small>
 </span>
 @endif
 </div>
 </div>
 <div class="col-6">
 <div class="md-form" {{ $errors->has('prenom') ? ' has-error' : '' }}>
 <i class="fa fa-user prefix orange-axmy"></i>
 <input type="text" name="prenom" id="prenom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required="required" value="{{old('nom')}}">
 <label for="prenom" class="control-label">Prénom </label>
 @if ($errors->has('prenom'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('prenom') !!}</small>
 </span>
 @endif
 </div>
 </div>
 <div class="col">
 <div class="md-form" {{ $errors->has('fonction') ? ' has-error' : '' }}>
 <i class="fa fa-envelope prefix orange-axmy"></i>
 <input type="text" name="fonction" id="fonction" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Email valide" required="required" value="{{old('fonction')}}">
 <label for="fonction" class="control-label">Fonction </label>
 @if ($errors->has('fonction'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('fonction') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form" {{ $errors->has('email') ? ' has-error' : '' }}>
 <i class="fa fa-envelope prefix orange-axmy"></i>
 <input type="email" name="email" id="email" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Email valide" required="required" value="{{old('email')}}">
 <label for="email" class="control-label">Email professionnel </label>
 @if ($errors->has('email'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('email') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form ui-widget" {{ $errors->has('objet') ? ' has-error' : '' }}>
 <i class="fa fa-tag prefix orange-axmy"></i>
 <input type="text" name="objet" id="objet" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required="required" value="{{old('objet')}}">
 <label for="objet" class="control-label">Objet </label>
 @if ($errors->has('objet'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('objet') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form" {{ $errors->has('msg') ? ' has-error' : '' }}>
 <i class="fa fa-pencil prefix orange-axmy"></i>
 <textarea type="text" name="msg" id="msg" class="md-textarea" lenght="255" style="height: 100px" required="required" value="{{old('msg')}}"></textarea>
 <label for="msg" class="control-label">Message </label>
 @if ($errors->has('msg'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('msg') !!}</small>
 </span>
 @endif
 </div>
 <!-- CONSENTEMENT checkbox -->
 <div class="form-check mr-3" {{ $errors->has('consentement') ? ' has-error' : '' }} >
 <input class="form-check-input" type="checkbox" name="consentement[]" value="0" id="consentement" required="required">
 <label class="form-check-label blue-grey-text" for="consentement" style="color: grey; font-size: 12px;">En cochant la case vous nous autorisez à vous contactez</label>
 @if ($errors->has('consentement'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('consentement') !!}</small>
 </span>
 @endif
 </div>
 <br>
 <br>
 <div class="text-center">
 <button type="submit" class="btn btn-outline-warning orange-b-axmy">Hello axmy
 <i class="fa fa-paper-plane-o ml-3"></i>
 </button>
 </div>
 </form>
 </div>
 </div>
 </section>

 <!-- JQuery -->
 <!-- Jquery core JavaScript -->
 <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
 <!-- MDB core JavaScript -->
 <script src="js/popper.min.js" type="text/javascript"></script>
 <!-- Bootstrap tooltips -->
 <script src="js/bootstrap.min.js" type="text/javascript"></script>
 <!-- MDB core JavaScript -->
 <script src="js/mdb.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 //Animation init
 new WOW().init();

 var ctx = document.getElementById("myChart").getContext('2d');
 var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [{
 label: '# of Votes',
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 'rgba(255, 99, 132, 0.2)',
 'rgba(54, 162, 235, 0.2)',
 'rgba(255, 206, 86, 0.2)',
 'rgba(75, 192, 192, 0.2)',
 'rgba(153, 102, 255, 0.2)',
 'rgba(255, 159, 64, 0.2)'
 ],
 borderColor: [
 'rgba(255,99,132,1)',
 'rgba(54, 162, 235, 1)',
 'rgba(255, 206, 86, 1)',
 'rgba(75, 192, 192, 1)',
 'rgba(153, 102, 255, 1)',
 'rgba(255, 159, 64, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 scales: {
 yAxes: [{
 ticks: {
 beginAtZero: true
 }
 }]
 }
 }
 });

 </script>
</body>

</html>

hamdinirania pro answered 6 years ago

Hello, Indeed, it works. Thanks a lot for your help. have a nice day best regards.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
hamdinirania
Pro User
15Support score
2Questions 3Answers
0Snippets likes 0Snippets