I have a question about third party created JQuery plug ins and API's and
the methodology for understanding them. Recently I downloaded
the JQuery Masonry/Infinite scroll plug in and I couldn't figure out how to configure it based on
the instructions. So I downloaded a fully developed demo, then manually deleted everything that wouldn't break
the functionality.
The code that was left allowed me to understand
the plug in much greater detail than
the documentation.
I'm now having a similar issue with a plug in called JQuery knob.
http://anthonyterrien.com/knob/
If you look at
the JQuery Knob readme file it says this is working code:
<input type="text" value="75" class="dial">
$(function() {
$('.dial')
.trigger(
'configure',
{
"min":10,
"max":40,
"fgColor":"#FF0000",
"skin":"tron",
"cursor":true
}
);
});
But as far as I can tell it isn't at all.
The read me also says
the Plug in uses Canvas. I am wondering if I am suppose to wrap this code in a canvas context or if this functionality is already part of
the plug in.
I know this kind of "question" might not fit in here but I'm a bit confused on
the assumptions around reading these kinds of documentation and thought I would post
the query regardless. Curious to see if this is due to my "newbi" programming experience or if this is something seasoned coders also fight with.
Thank you.
Edit
In response to Tyanna's reply.
I modified
the code and it still doesn't work. I posted it below. I made sure that I checked
the Google Console to insure
the basics were taken care of, such as not getting a read-error on
the library.
<!DOCTYPE html>
<meta charset="UTF-8">
<title>knob</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="js/jquery.knob.js"></script>
<div id="button1">test </div>
<script>
$(function() {
$("#button1").click(function () {
$('.dial').trigger(
'configure',
{
"min":10,
"max":40,
"fgColor":"#FF0000",
"skin":"tron",
"cursor":true
}
);
});
});
</script>
