I'm trying to trigger a toast when the the page load using materialize.css and jquery, but it's now working, here my code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(document).ready(function(){
Materialize.toast('I am a toast!', 4000);
});
</script>
This code is inside head tags.
Seems like you're missing Materialize js file. For me, your code is properly working.
Just add this to your head as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
Demo
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme
scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of
undefined
at e.reveal (scrollreveal.min.js:1)
at jquery.js:53
at jquery.js:75
I am not sure what to do to get rid of it, any help would be great. Thanks in advance.
Below is what I have in the head section
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
And this is what I have at the end of the body.
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The error is not "self explanatory"...
But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.
Replacing it by }); fixed the issue for that line.
Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.
"Closure" itself is already well explained in this SO answer.
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.
I've linked all of these files in the head in this order:
jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js
They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)
Then, in the form area I have:
<form id="purchase">
<fieldset class="purchase">
<input type="text" id="datePicker">
</fieldset>
</form>
and then in my javascript file I have:
$(function() {
$( '#datePicker' ).datepicker();
});
The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.
Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well.
Change
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
To
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
I am using Bootstrap Validator(bootstrapValidator.js) for form validations. With this I added jQuery UI Multiselect component in to my bootstrap page. But this component requires 1.5.1/jquery.min.js and Bootstrap Validator requires jquery-1.10.2.min.js, Because of this two different version on the same page validator is not working. If I use only updated version of Js (jquery-1.10.2.min.js) then Multiselect component stops working. Please help....
try to add the files in the order:
js/jquery-1.10.2.min.js
js/jquery-ui.js (if file exists in the project :))
jquery.min.js (1.5.1)
js/bootstrap.min.js (if file exists in the project :))
js/bootstrapValidator.min.js (if file exists in the project :))
other js
if it does not work http://api.jquery.com/jQuery.noConflict/
Have you tried inncluding all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator. Then check your html code for errors. I found this tutoral online [http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html]
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>