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>
For this, you need to realize that trigger isn't a command from the Knob library, it's a jQuery command. You can find more about that command here: http://api.jquery.com/trigger/
So, what this will do is, if you apply that script to a button click, it will apply the Knob script to the dial style, and will configure the div to look like what is in the code.
Like this:
$("#button1").click(function () {
$('.dial').trigger(
'configure',
{
"min":10,
"max":40,
"fgColor":"#FF0000",
"skin":"tron",
"cursor":true
}
);
});
If you just want to display a knob onload then you just have to do:
$(function() {
$(".dial").knob();
}
As for your question on how you'd know that. In the beginning, look it up. Go to jQuery and type in a method name you don't know. A good way to tell if it's a command from jQuery is if in the documentation the dev/author doesn't explain it or how to use it. That means they feel it is common knowledge. If you don't know it....look it up.
In the beginning, it's touch and go. You just have to keep trying and learning until you get the hang of it. Don't bang your head against the way trying to figure it out. If you can't find your answer quickly with a Google search, or if there isn't a community for the plugin that you're using, try emailing the author of the plugin. You'd be surprised how many will reply to questions.
Hope that helps.