Hey guys I have this HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
</head>
<body>
<div class="slider">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="main.js"></script>
</body>
</html>
and this JS code
$(document).ready(function () {
prompt("Prompt 1");
$('.slider').slick({
});
prompt("Prompt 2");
});
When I test this in browser (Chrome and Edge) the Slick plugin does not seem to be loading because the second prompt never shows up and the content inside .slider is one element below the other
However when I copy and paste both files in plunker every thing appears perfectly.
Any idea why this is happening?
I just figured it out. I was not including https: in my link tag and in one of the three script. Plunker was able to load the files but the browser could not do it without the https:
Solution:
instead of
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
add https:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
same for the second script tag
I found that this is the right url
https://cdn.jsdelivr.net/npm/slick-carousel-latest#1.9.0/slick/slick.min.js
Related
I am facing some issues. I am trying to open the confirmation box using javascript click event but getting the following error.
Uncaught TypeError: this.getUID is not a function
at Confirmation.init (VM8904 bootstrap-confirmation.js:151)
at new Confirmation (VM8904 bootstrap-confirmation.js:16)
at HTMLSpanElement.<anonymous> (VM8904 bootstrap-confirmation.js:427)
at Function.each (VM8902 jquery.js:2)
at m.fn.init.each (VM8902 jquery.js:2)
at m.fn.init.$.fn.confirmation (VM8904 bootstrap-confirmation.js:419)
at getConirmation (VM8906:19)
at HTMLDivElement.onclick (VM8987:14)
I am explaining my code below.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div onclick="getConirmation();">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="top"></span></p>
</div>
<script>
function getConirmation() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
}
</script>
</body>
</html>
Here I need when user will click on that icon the confirmation box will open on the top of that icon. Here is my plunkr code. Please help me to resolve this issue.
It seems you are using bootstrap version 3.0 + and bootstrap-confirmation doesn't support 3.0 version. So you can either downgrade your bootstrap version or use another library from here.
Bug description here.
Reading I've been testing your Plunker code, and the main problem is with the jQuery and Bootstrap versions you're using. According to boostraps-confirmation documentation, you need...
jQuery >= 1.9
Bootstrap Popover >= 3.2 (included in bootstrap.js)
I've changed to this...
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
... and works without problems.
On the other hand, to use this plugin you don't need to create the onClick event in the element where you want to apply it. Just execute the plugin to apply it to all elements that have data-toggle='confirmation'.
Putting all together...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="bottom"></span></p>
</div>
<script>
$(document).ready(function() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
});
});
</script>
</body>
</html>
NOTE: I leave the CDN just to show the versions I've used. Of course, you can download the libraries to your project if you prefer it.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.
I have this simple html file with little bit of jQuery in it but click event is not triggered here:
I am not getting any error and neither the console.log statement that I expect to print when click event is triggered.
Did I miss out on something?
<!doctype html>
<html>
<head>
<title>My WebPage</title>
<link rel="stylesheet" type="text/css" href="Day.css"/>
<link rel="stylesheet" type="text/css" href="Night.css"/>
</head>
<body>
<h1> My website </h1>
<button>Day</button>
<button>Night</button>
<script src="jquery.js"/>
<script>
(function(){
console.log('Inside func');
$('button').click(function() {
console.log('button was clicked');
});
})();
</script>
</body>
</html>
<script src="jquery.js"/>
should become:
<script src="jquery.js"></script>
You can read more about self-closing script tags here: Why don't self-closing script tags work?
I would just use the JQuery CDN in the head section.
Here's a demo
This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.
Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>
two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.
Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.
Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>
Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>