Develop Reference

Prevent form field from automatically drawing cursor/focus

I have used a script to move the WooCommerce checkout coupon from its default position at the top of the form to nestled within the form. There were one or two things I had to tweak in the script to make it work because originally the script had the coupon in a dropdown which I don't really like. The coupon is now pretty much how I want it and where I want it, but now I've got a strange situation where as soon as the checkout page loads, the browser cursor immediately jumps into the coupon form, like the following...
The above is immediately after loading. Page focus is also immediately drawn down to that field.
I cannot figure out where or why this form field is drawing focus in this way. I've tinkered with various aspects of the script, but can't stop this strange behavior. Would appreciate any thoughts on the following:
/**
* Need the jQuery UI library for dialogs.
**/
function ttp_scripts() {
wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'ttp_scripts');
function ttp_wc_show_coupon_js() {
wc_enqueue_js('$("a.showcoupon").parent().hide();');
/* Use jQuery UI's dialog feature to load the coupon html code
* into the anchor div. The width controls the width of the
* modal dialog window. Check here for all the dialog options:
* http://api.jqueryui.com/dialog/ */
wc_enqueue_js('dialog = $("form.checkout_coupon").dialog({
autoOpen: true,
width: 0,
minHeight: 0,
modal: false,
appendTo: "#coupon-anchor",
position: { my: "left", at: "left", of: "#coupon-anchor"},
draggable: false,
resizable: false,
dialogClass: "coupon-special",
closeText: "Close",
buttons: {}});');
wc_enqueue_js('$("#show-coupon-form").click( function() {
if (dialog.dialog("isOpen")) {
$(".checkout_coupon").show();
dialog.dialog( "close" );
} else {
$(".checkout_coupon").show();
dialog.dialog( "open" );
}
return false;});');
}
add_action('woocommerce_before_checkout_form', 'ttp_wc_show_coupon_js', 10);
/**
* Show a coupon link above the order details section.
* This is the 'coupon-anchor' div which the modal dialog
* window will attach to.
**/
function ttp_wc_show_coupon() {
global $woocommerce;
if ($woocommerce->cart->needs_payment()) {
echo '<p class="have-a-coupon" style="padding-bottom: 5px;"> Have a coupon? Click here to enter your code.</p><div id="coupon-anchor"></div>';
}
}
add_action('woocommerce_review_order_before_payment', 'ttp_wc_show_coupon', 10);

Okay. I found this
<input type="hidden" autofocus="autofocus" />
It does the trick by taking focus off the modal.

Is that possible to set background color property for jQuery dialog's title during its initialization

I'm opening error jQuery dialog and want to set its title's background to red.
All I saw so far is that I will have to create a class for div defining my dialog and set its background in css to red, but, if I do not want to modify existing .css file and create another .css in my project?
Can I do it in jQuery's dialog initialization phase?
For example, I have a button click event:
$("#btnStartSynch").button().unbind("click").bind("click", function () {
var selectedValue = $("#ddlSynchParam").val();
if (selectedValue == 0) {
window.UserSelectMessage.dialog('open');
return false;
}
var userName = $("#ddlSynchParam :selected").text();
myself.StartSynch(userName, selectedValue);
});
If nothing is selected, I open Error pop up:
window.UserSelectMessage = $("#selectMsg").dialog({
modal: true,
resizable: false,
autoOpen: false,
height: 100,
width: 200,
title: 'Error'
});
Can I add extra parameter in that dialog initialization phase to set its background to red?

multiple semantic-ui popups with target element defined in atribute of each instance

I have succesfully defined a popup for a clickable link element:
The element:
`Alerts Page`
The script which triggers my popup (note the commented lines!)
$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well)
// popup : $('#popup-1'),
// (attempt 1, doesn't work)
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work)
popup : $(this).attr('data-tcs'),
on : 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
The popup itself (irrelevant):
<div class="ui popup" id="popup-1">
<h3>TANJ!</h3>
</div>
TO DO
Now the popup works well ONLY when the ID of target content is pointed directly, but...
I am about to put about 10 more popups and I want to use the same script to trigger them.
How I can point to the proper popup depending on the value of data-tcs attribute?
My attempts were friutless.
Thx for all help.
The docs are here:
http://semantic-ui.com/modules/popup.html#/examples

Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop
Then the each loop will expose the instance as this.
When you are trying to use this currently it is the window not the element
$('[data-tcs]').each(function() {
var $el = $(this);
$el.popup({
popup: $el.attr('data-tcs'),
on: 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
});

Adding global function for Kendo UI Window

I am new to Kendo Window and I'm planning to declare window.resize() function as a global jquery function for all of the Kendo Windows in the pages. How can I declare it?
I've added this code below on a .js file and referenced it in _Layout.cshtml but it doesn't work:
$(window).resize(function() {
$(".k-window").kendoWindow().center();
});
When Individually used, I am using this set of code:
var modal = $("#mdlWindow").kendoWindow({
visible: false,
resizable: true,
modal: true,
content: "../Position/Info,
width: "50%",
height: "50%",
maxWidth: 500,
maxHeight: 600,
minWidth: 300,
minHeight: 400,
top: 0,
bottom: 0,
left: 0,
right: 0,
iframe: true
}).data("kendoWindow");
modal.center().open();
$(window).resize(function() {
modal.center();
});
Any suggestions are accepted. If there is a way to do it in css I will try it.

Firstly Kendo Window is a specific Kendo UI widget in wherein widget element does not have k-window class but k-window-content. Class k-window is adding to element container.
Secondly to get Kendo Window instance you shoult use .data('kendoWindow') method instead of .kendoWindow().
And finally if you would have more than one window open you have to iterate for all of them to perform an action individually.
Therefore your code centering all Kendo windows on window.resize() event should looks like:
$(window).resize(function() {
var windows = $(".k-window-content");
windows.each(function(i,v){
$(v).data("kendoWindow").center();
});
});
Here is Kendo UI Dojo example: http://dojo.telerik.com/OjuwU

jquery dialog: drag dialog at any point

Is there a trick to make a jquery dialog be draggable at any point? (i mean not only in the title bar)

As opposed to a sortable item, dialog items doesn't have that functionality (I'm not sure why). If needed, you might be able to do something like this:
$(document).ready(function() {
var
// Create dialog
dialog = $('div')
.dialog({ title: "I'm a dialog" })
.css({cursor: 'move'}),
// Get the options manually
options = dialog
.data("dialog")
.uiDialog
.data('draggable')
.options;
// Finally, extend the draggable modal box's
// options and remove any restrictions
$.extend(options, {cancel: '', handle: ''});
});
​
See a working example here: http://jsfiddle.net/gMP2d/

$("#div_id")
.dialog({
position: [3,442],
width: 300,
height: 90
})
.css({cursor: 'move'})
.parent()
.draggable({cancel:'',handle:''});