Include the jquery file reference and SiteHelp.js reference before calling SiteHelpjq function.
<script src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="~/Scripts/SiteHelp.js"></script>
<script>
$.sitehelpjq({
</script>
HelpModel: [{ selector: ".selector1", text: "Help text for selector1" },
{ selector: ".selector2", text: "Help text for selector2" },
{ selector: "#selector3", text: "Help text for selector3" },
{ selector: "#selector4", text: "Help text for selector4" },]
});
{ selector: ".selector2", text: "Help text for selector2" },
{ selector: "#selector3", text: "Help text for selector3" },
{ selector: "#selector4", text: "Help text for selector4" },]
});
The only mandatory parameter for SiteHelpjq function is HelpModel. All rest of the parameters are for customization and optional. The two required parameter for HelpModel are selector and text. A selector could be an unique Id or a class and text is the help text you require to display for a particular selector.
All the customization parameters are optional which you could provide if you need to customize SiteHelp as per your need.
<script src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="~/Scripts/SiteHelp.js"></script>
<script>
$.sitehelpjq({
</script>
HelpModel: [{ selector: ".selector1", text: "Help text for selector1" },
{ selector: ".selector2", text: "Help text for selector2" },
//customization for a particular help
{ selector: "#selector3", text: "Help text", FontSize:"10px", FontColor:"#cdcdcd", FontFamily:"comic sans ms" },
{ selector: "#selector4", text: "Help text for selector4" },],
});
Background: "#eeeeee", //change the background color of the help box
FontSize: "20px", //change the font size of help text
FontColor: "#000000", // change the font color of help text
ButtonBackground: "#cdcdcd", //change the background color of next, previous and close buttons
ButtonFontSize: "15px", //change the button font size
ButtonFontColor: '#efefef', //change the font color of button text
NextText: "-->", //change the text of next button
PreviousText: "<--", // change the text of previous button
CloseText:"Skip", //change the text of close button
FontFamily: "Arial", //change the font family for SiteHelp
modal: true, //show a modal background while navigating in help functionality
//A starting text to make user aware of that help functionality is present here
StartText: "Press next to start a help tour for this site."
{ selector: ".selector2", text: "Help text for selector2" },
//customization for a particular help
{ selector: "#selector3", text: "Help text", FontSize:"10px", FontColor:"#cdcdcd", FontFamily:"comic sans ms" },
{ selector: "#selector4", text: "Help text for selector4" },],
});
Background: "#eeeeee", //change the background color of the help box
FontSize: "20px", //change the font size of help text
FontColor: "#000000", // change the font color of help text
ButtonBackground: "#cdcdcd", //change the background color of next, previous and close buttons
ButtonFontSize: "15px", //change the button font size
ButtonFontColor: '#efefef', //change the font color of button text
NextText: "-->", //change the text of next button
PreviousText: "<--", // change the text of previous button
CloseText:"Skip", //change the text of close button
FontFamily: "Arial", //change the font family for SiteHelp
modal: true, //show a modal background while navigating in help functionality
//A starting text to make user aware of that help functionality is present here
StartText: "Press next to start a help tour for this site."
Browse Plugins
Submitted Plugins
Tutorials
Sponsored Links
