I've just watched a youtube video about jQuery-UI and here is the link:
https://www.youtube.com/watch?v=WrHpzNMlhfo
and so I saw that we can try it also with this link:
http: //jsbin.com/chromebug/4
but the result turn me crazy, I really dont have any idea about it
2987.133
The problem is with jquery-ui.theme.css. It's failed to load, check in the console.
Either you check & correct the googleapi link
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
or else use
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css
JS Bin Link
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
Related
In a (Wordpress) website's <head>, I have the following code to load an additional stylesheet after all dynamic html and inline CSS created by a (third-party) slider plugin has been created via JS:
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'">
The reason for the necessity to load that additional stylesheet later than the main stylesheet is that it contains some calc values for height settings which depend on other calculated (inline css) values created by the plugin which again depend on the the size of images loaded by the plugin. A rather complex thing, there was actually some trial and error involved before I got it working, since I don't know what the plugin actually does in which order.
My problem: This works in all current browsers, but in some older browsers (for example Firefox < 55, reported by a user with a very old computer) the related stylesheet is not loaded at all. Apparently (also according to caniuse) older browsers don't know <link rel="preload">.
So my question is if there is anything I can replace that line of code with, which also would work in older browsers?
It's not clear what the purpose is of this pattern:
<link
rel="preload"
as="style"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css"
onload="this.rel='stylesheet'">
It is preloading a stylesheet, then after it preloads it's changing rel to stylesheet so that it loads for real. Usually rel="preload" is for kicking off a download of a resource that isn't loading up front ahead of schedule, prepping it in the cache, whether that's to avoid excessive download waterfalls or to let something that will be loaded dynamically later on will complete sooner.
Since in your case you're wanting it to always load the stylesheet on page load, there's no need to do anything with preloading. Just replace with this, and it should be compatible with browsers that don't support preloading:
<link
rel="stylesheet"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css">
If the idea was to use this preload + onload as a way to delay loading stylesheet until after page load, a better approach may be to inject the link via some JavaScript:
<script>
var sliderStylesheet = "<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css";
document.addEventListener('load', function () {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', sliderStylesheet);
document.head.appendChild(link);
});
</script>
I found a solution myself: I added an ID to the <link> tag to be able to address it in a simple way and used a simple script wrapped inside a setTimeout function to change the value of the rel attribute.
Note: Since there is no visible content, there is no visible result in the following snippet window, but the code with the changed attribute can be seen when inspecting the snippet with the browser tools. It also works when the link is inside the <head> section, BTW, which is my real-world situation.
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#link_to_sliderstyles1').attr("rel", "stylesheet");
}, 200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'" id="link_to_sliderstyles1">
I want to integrate sweetalert with my project. but I'm having the following error
I've been looking for solutions to this problem quite a long time, but I still can not solve it
this is my html code
<link href="/vendors/sweetalert/sweetalert.css" rel="stylesheet">
<script src="/vendors/jquery/dist/jquery.min.js"></script>
<script src="/vendors/sweetalert/sweetalert-dev.js"></script>
<script type="text/javascript">
sweetAlert("a", "b", "error");
</script>
I had time to find a similar problem, by replacing swalto swalAlerttheir problem successfully repaired, but not with my problem
please help me. thx..
Your code works for me using the CDN links. Check your console to make sure you're not getting a 404 error when referencing the css or js files. Also, I'm linking to version 2. Is that what version you're using locally?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.11.0/sweetalert2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.11.0/sweetalert2.all.min.js"></script>
<script type="text/javascript">
sweetAlert("a", "b", "error");
</script>
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.
Here's my code:
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="js/timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/timepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
</script>
<form method="post" action = "makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name = "date">
What time would you like to start?<br>(example format: 3 pm)
<input type="text" id="timepicker1" name = "time" >
...
I get the following error when I run this in firefox:
TypeError: $(...).timepicker is not a function
I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.
I'd appreciate any suggestions for troubleshooting this. Thanks!
The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<form method="post" action="makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name="date">What time would you like to start?
<br>(example format: 3 pm)
<input type="text" id="timepicker1" name="time">
</form>
It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"
If the file is there, than check to make sure that the JS file actually has content in it.
I ran into the same issue. Call it amateurish, but the issue was resolved by adding both JQuery and JQuery UI plugins to my code in addition to the the CSS and JS file custom to Timepicker.co.
Timepicker's site states:
To use jQuery Timepicker you'll need to include two files:
jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming
you have an element in your document, with class timepicker,
you can use the code on the right (or the code below, if you are
reading on mobile) to initialize the plugin.
They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.
I am using uniformjs to style some html element but when i try to update an element such as a check box using
$.uniform.update('input[type=checkbox]');
I get the error
$.uniform is undefined
any one else have an idea how to solve this?
I have both jQuery and the uniform.js added to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
What's weird is this worked when it was a regular HTML page and stopped working when i made it into a ASP.NET page and added custom form validators. Perhaps there is some clash?
Reason for this error is browser cant identify $.uniform which can be because of following two reasons:
You have not included uniform.js file to your page, check if a similar looking lines is present in your markup.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
You are referencing it before its been loaded (have you included it at the end of the page, after the markup?)
You have to load all your dependencies and the current library itself to make it work.
For your css:
<link rel="stylesheet" href="uniform.default.css" media="screen" />
For your javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
Please, check this JSFiddle that I've build for you, showing uniformjs working.