Apologies if this question seems obvious, but I can't seem to find a clear answer anywhere...
Is there a way to add a highlight/error message similar to the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply using a jQuery UI function?
I've looked at the source code but it's not immediately obvious. Do they manually input the HTML for this?
Thank you
----------------------------------------- SOLUTION ---------------------------------------
jQuery: (create a new file called whatever.js and add the following code)
$(document).ready(function(){
if($("div.error")[0]){
createError($("div.error"));
}
if($("div.notice")[0]){
createHighlight($("div.notice"));
}
});
//functions start
function createHighlight(obj){
obj.addClass('ui-state-highlight ui-corner-all');
obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}
function createError(obj){
obj.addClass('ui-state-error ui-corner-all');
obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}
HTML: Simply create divs where you want to display the messages like:
<div class="error"><b>ERROR:</b> The message goes here</div>
or for Notices:
<div class="notice"><b>NOTICE:</b> The message goes here</div>
You can then customize the appearance of these classes using CSS.
I hope this is helpful to someone.
----------------------------------------- SOLUTION ---------------------------------------