I am implementing the Signature plugin in my demo. So I downloaded the plugin from [this url][1].
There demo html contains a class ie kbw-signature which is not applied to any elements in code. However, when I run it somehow it is applied to a given div. So I searched the file and there is no line where it is applied to the div.
Secondly: How to use jQuery signature plugin in jsfiddle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery UI Signature Basics</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/south-street/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="jquery.signature.css" rel="stylesheet">
<style type="text/css">
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.signature.js"></script>
<script type="text/javascript">
$(function() {
$('#sig').signature();
$('#clear').click(function() {
$('#sig').signature('clear');
});
$('#json').click(function() {
alert($('#sig').signature('toJSON'));
});
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> <button id="json">To JSON</button></p>
</body>
</html>
Related
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to get a simple qtip2 demo running but it wont work need help.
qtip2 is a framework that allows to create individual tooltips.
if you hover over the link a small yellow box should appear.
all files are in the same folder.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script>
Sample link
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
$('a[title]').qtip();
})();
</script>
Sample link
</body>
</html>
i removed unnessesary codes like the imagesloaded and replace the jQuery link you have with a CDN version.
And it works.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.qtip.js"></script>
Sample link
<script>
// self executing function here
(function() { $('a[title]').qtip(); })(); </script>
Sample link
</body>
</html>
Okay, this is going to sound very imbecilic. (which it probably is)
I'm a very novice programmer, so please bear with me.
I'm trying to link a simple jQuery file to my HTML file, but I can't seem to make it work. After looking through the previous answers to this trivial question, I realized that i was missing pivotal lines of code such as (and this is just an example)
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
Again, I know I must sound very stupid.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
My jQuery code is as follows:
$(document).ready(function() {
$('#green').fadeOut(1000);
});
Can someone please tell me how to link the jQuery file to the HTML file? I know this question has been asked 500 times, but for some reason I am unable to make this work. Thank you very much! Sorry for making you cringe with my ineptness.
First of all its is mandatory to include jQuery library.
There are few ways you can link your jQuery code in html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
This is how you can integrate your codes:
Method 1 (In Footer)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</body>
</html>
Method 2 (In Header)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Method 3 (From External File) Lets say you have a file custom.js that has you codes :
$(document).ready(function() {
$('#green').fadeOut(1000);
});
This is how you can add external js file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Update: Path Example
- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html
url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js
Just add your initial jquery load to the header beneath the stylesheets. You want to load any css before you load your jquery scripts (in the future).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#green {width: 150px; height: 150px; background: green; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});
});//]]>
</script>
</head>
<body>
<div id="green"></div>
</body>
Do note that you load jquery before you use any part of the script calls ($).
Hope that helps!
Here's your fiddle:
http://jsfiddle.net/2633c1em/
Put your script tag in header section like
<head>
<script type="text/javascript" src="your jquery file name "></script>
</head>
file name like load.js
I'm new to jquery, and I've had a lot of trouble getting a full screen slideshow to work. I've tried downloading jquery 1.11.1. I've linked to 1.8, 1.9, and 1.11.1. The first image shows up with the numbers "123" on it, but it's not dynamic. The other two images aren't showing up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style></style>
</head>
<body>
<div id="slides">//Slides container to control width
<div class="slides-container">//suggested form by superslides.com
<img src="images/dsc_0844-8x12.jpg" alt="">
<img src="images/dsc_0785-8x12.jpg" alt="">
<img src="images/dsc_0720-8x12.jpg" alt="">
</div>
</div>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Additional superslides plug-ins
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.animate-enhanced.min.js"></script>
<script src="scripts/application.js"></script>
<script src="scripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
//Initialize slideshow
<script type="text/javascript">
$(function() {
$('#slides').superslides({
animation: 'fade'
});
});
</script>
</body>
</html>
Your use of non-HTML comments is probably not helping, since you're essentially polluting the DOM with text nodes, and the slideshow script may not be resilient to that.
Comments in HTML look like this:
<!-- Initialise slideshow -->
not this:
// This is a JavaScript comment
I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew