|
erics, June 18th, 2013 |
1 2 3 |
open: function( event, ui ) { jQuery('.ui-menu').width('220px').css('text-align', 'left'); } |
Categories: How-To's, Technology Auto, Autocomplete, Dropdown, howto, javascript, JQuery, jQuery UI, Menu, tips, Width
| 
No comments
erics, June 19th, 2012 jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
var self = this; self.Dialog = jQuery('#yourDialog'); if (self.Dialog.length) { self.Dialog.dialog({ autoOpen: false, title: 'Your Dialog Title Here', position: ['center',200], minWidth: 400, modal: true, focus: function() { jQuery(':input', this).keyup(function(event) { if (event.keyCode == 13) { self.Dialog.parent().find('div.ui-dialog-buttonpane button.primary').click(); } }); }, open: function(evt,ui) { jQuery('#Loader-ajax').load('/get_dialog_form_content.php'); }, buttons: { "Cancel": { 'text' : 'Cancel', 'class' : 'cancel', 'click' : function() { jQuery( this ).dialog( "close" ); } }, "Continue": { 'text' : 'Continue', 'class' : 'primary', 'click' : function() { jQuery("#Form-edit").submit(); } // end click } // end Continue button } // end buttons }); // end self.Dialog.dialog // bind the triggering link jQuery("a.yourTrigger").live('click',function(e){ jQuery(".ui-dialog-content").dialog("close"); self.Dialog.dialog('open'); return false; }); } |
HTML
|
1 2 3 4 5 6 |
<div id="yourDialog" class="hide"> <form id="Form-edit" action="/index.php" method="POST"> <input type="hidden" name="action" value="save"> <div id="Loader-ajax" class="clearfix"><img src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif" alt="Please Wait..." /></div> </form> </div> |
Categories: How-To's, Technology Dialog, Enter, Enter key, Focus, howto, JQuery, jQuery UI, Modal, tips, UI
| No comments
erics, September 23rd, 2011 GET Resources http://code.jquery.com/jquery-1.6.4.min.js http://jqueryui.com/resources/download/jquery-ui-1.10.1.custom.zip LOAD Resources
|
1 2 3 |
<LINK rel="stylesheet" HREF="/css/smoothness/jquery-ui-1.8.14.custom.min.css"> <script src="/js/jquery-1.6.4.min.js"></script> <script src="/js/jquery-ui-1.8.16.custom.min.js"></script> |
HTML Substitute your own loader graphic from http://www.ajaxload.info/
|
1 2 3 4 5 6 |
<img src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif" alt="Please wait..." class="Spinner hidden" id="Spinner-first" /> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.Spinner { margin: 0; padding: 0; border: 0; } .Spinner.hidden { display: none; } |
JS Show the spinner called “first”: jQuery(‘#Spinner-first’).fadeIn(); Hide the spinner called “first”: jQuery(‘#Spinner-first’).fadeOut(); Hide all spinners that start with an ID of “Spinner”: jQuery(‘[id^=Spinner]’).fadeOut(); That’s All Folks…
Categories: How-To's, Technology ajax, ajax-loader.gif, CSS, gif, html, img, javascript, JQuery, jQuery UI, jQueryUI, JS, Loader, Spinner
| 1 comment
erics, July 15th, 2011 I must say that there are still some kind souls in this world. Today I had an email conversation with the author of the jQuery UI dialogWrapper plugin. With great patience this code angel helped me understand the situation much better. Thank you for taking the time to help me out! http://mostthingsweb.com/ http://code.google.com/p/dialogwrapper/ I have […]
Categories: Technology Angel, Code angel, Dialog, dialogWrapper, JQuery, jQuery UI, jQuery UI Dialog
| No comments
erics, July 11th, 2011 I was having issues with jQuery UI dialogs being hidden and not fully removed. Had same issues with both native dialog and the dialogwrapper plugin. The following code would hide, but not fully remove the div, for whatever reason:
|
1 |
jQuery(this).dialog('destroy'); |
So this is what I used instead:
|
1 |
jQuery('#'+this.id).remove(); |
!! UPDATE: After being coached by the […]
Categories: How-To's, Technology Destroy, Dialog, dialogWrapper, howto, JQuery, jQuery UI, Remove, tips
| No comments
erics, May 17th, 2011 Important Note: This solution REQUIRES jQuery UI 1.8 or better and the .button() plugin/widget (contained in the full download):
|
1 |
jQuery(".ui-dialog-buttonpane button:contains('Save')").button("disable"); |
Original Post: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
Categories: How-To's, Technology Button, Dialog, Disable, Enable, howto, JQuery, jQuery UI, tips
| No comments
erics, May 15th, 2011 There are many GREAT jQuery plugins out there, written by brilliant people, and freely distributed as open source. I have simply taken a few of them and glued them together: jQuery, jEditable and showPassword. MANY hours were spent putting all these parts together into a cohesive, functional unit, along with adding some enhanced error handling […]
Categories: How-To's, Technology datepicker, DateTimePicker, Hide password, How To, javascript, jEditable, JQuery, jQuery UI, Password, Show password, Tipes
| No comments
erics, May 8th, 2011 The HTML:
|
1 2 3 4 |
<ul class="icons ui-widget ui-helper-clearfix"> <li id="AddItem" class="ui-state-default ui-corner-all" title="Add Item"><span class="ui-icon ui-icon-plusthick"></span></li> <li id="AddToFavorites" class="ui-state-default ui-corner-all" title="Add to Favorites"><span class="ui-icon ui-icon-heart"></span></li> </ul> |
The CSS:
|
1 2 3 4 5 6 7 8 9 |
ul.icons li { cursor: pointer; float: left; list-style: none; margin: 2px; padding: 2px 0px; position: relative; } |
The jQuery:
|
1 2 3 4 5 |
jQuery('ul.icons li') .live("mouseover mouseout", function (event) { if (event.type == "mouseover") jQuery(this).addClass("ui-state-hover"); else jQuery(this).removeClass("ui-state-hover"); }); |
Categories: How-To's, Technology Button, Hover, Icon, Icons, JQuery, jQuery UI, live, Live Hover, mouseout, mouseover
| No comments
erics, May 5th, 2011 Click HERE for the original post.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// remember the old function var _gotoToday = jQuery.datepicker._gotoToday; // datepicker is directly inside the jQuery object, so override that jQuery.datepicker._gotoToday = function(a){ var target = jQuery(a); var inst = this._getInst(target[0]); // call the old function, so default behaviour is kept _gotoToday.call(this, a); // now do an additional call to _selectDate which will set the date and close // close the datepicker (if it is not inline) jQuery.datepicker._selectDate(a, jQuery.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear)); } |
Categories: How-To's, Technology Date, datepicker, JQuery, jQuery UI, Today, Today Button
| 2 comments
erics, May 4th, 2011 Use the “dataFilter” Ajax option given the following server reply: { status: 17, result: “You are not logged in” } [code] var $tabs = jQuery(‘#menutabs’).tabs({ ajaxOptions: { dataFilter: function(server_json_reply){ var data = jQuery.parseJSON(server_json_reply); if (data.status == 17) { alert(‘Your session has timed out and you have been logged off.’); window.location = “/”; } return data.result; […]
Categories: How-To's, Technology ajax, howto, javascript, JQuery, jQuery Tabs, jQuery UI, JSON, tips
| No comments
