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.
Related
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?
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
});
});
I have to make an dialog to apear when an image onclick. The problem is that I have some realy big z-index there (500 for example) and the ui dialog is on the back of that elements.
Here is the page, you need to log in, user: "raducup" and pass:"1". Another problem is that when I click close ont the dialog, the object desapears.
This is the function I call when a image is click:
function openItem(obiect){
$( obiect ).css('zIndex',9999);
$( obiect ).dialog({
dialogClass: "no-close",
modal: true,
draggable: true,
overlay: "background-color: red; opacity: 0.5",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
reparaZindex();
}
You don't tell it, but you are using jQuery UI 1.10.
In jQuery UI 1.10 the zIndex option is removed:
Removed zIndex option
Similar to the stack option, the zIndex option is unnecessary with a
proper stacking implementation. The z-index is defined in CSS and
stacking is now controlled by ensuring the focused dialog is the last
"stacking" element in its parent.
you have to use pure css to set the dialog "on the top":
.ui-dialog { z-index: 1000 !important ;}
you need the key !important to override the default styling of the element; this affects all your dialogs if you need to set it only for a dialog use the dialogClass option and style it.
If you need a modal dialog set the modal: true option see the docs:
If set to true, the dialog will have modal behavior; other items on
the page will be disabled, i.e., cannot be interacted with. Modal
dialogs create an overlay below the dialog but above other page
elements.
You need to set the modal overlay with an higher z-index to do so use:
.ui-front { z-index: 1000 !important; }
for this element too.
You may want to try jQuery dialog method:
$( ".selector" ).dialog( "moveToTop" );
reference: http://api.jqueryui.com/dialog/#method-moveToTop
Add in your CSS:
.ui-dialog { z-index: 1000 !important ;}
There are multiple suggestions here, but as far as I can see the jQuery UI guys have broken the dialogue control at present.
I say this because I include a dialogue on my page, and its semi transparent and the modal blanking div is behind some other elements. That can't be right!
In the end based on some other posts I developed this global solution, as an extension to the dialogue widget. It works for me but I'm not sure what it would do if I opened a dialogue from within a dialogue.
Basically it looks for the zIndex of everything else on the page and moves the .ui-widget-overlay to be one higher, and the dialogue itself to be one higher than that.
$.widget("ui.dialog", $.ui.dialog,
{
open: function ()
{
var $dialog = $(this.element[0]);
var maxZ = 0;
$('*').each(function ()
{
var thisZ = $(this).css('zIndex');
thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
if (thisZ > maxZ) maxZ = thisZ;
});
$(".ui-widget-overlay").css("zIndex", (maxZ + 1));
$dialog.parent().css("zIndex", (maxZ + 2));
return this._super();
}
});
Thanks to the following, as this is where I got the info from of how to do this:
https://stackoverflow.com/a/20942857
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
Add this before calling dialog
$( obiect ).css('zIndex',9999);
And remove
zIndex: 700,
from dialog
moveToTop is the proper way.
z-Index is not correct. It works initially, but multiple dialogs will continue to float underneath the one you altered with z-index. No good.
To sandwich an my element between the modal screen and a dialog, I need to lift my element above the modal-screen, and then lift the dialog above my element.
I had a small success by doing the following after creating the dialog on element $dlg.
$dlg.closest('.ui-dialog').css('zIndex',adjustment);
Since each dialog has a different starting z-index (they incrementally get larger) I make adjustment a string with a boost value, like this:
const adjustment = "+=99";
However, jQuery just keeps increasing the zIndex value on the modal screen, so by the second dialog, the sandwich no longer worked. I gave up on ui-dialog "modal", made it "false", and just created my own modal. It imitates jQueryUI exactly. Here it is:
CoverAll = {};
CoverAll.modalDiv = null;
CoverAll.modalCloak = function(zIndex) {
var div = CoverAll.modalDiv;
if(!CoverAll.modalDiv) {
div = CoverAll.modalDiv = document.createElement('div');
div.style.background = '#aaaaaa';
div.style.opacity = '0.3';
div.style.position = 'fixed';
div.style.top = '0';
div.style.left = '0';
div.style.width = '100%';
div.style.height = '100%';
}
if(!div.parentElement) {
document.body.appendChild(div);
}
if(zIndex == null)
zIndex = 100;
div.style.zIndex = zIndex;
return div;
}
CoverAll.modalUncloak = function() {
var div = CoverAll.modalDiv;
if(div && div.parentElement) {
document.body.removeChild(div);
}
return div;
}
$(".ui-dialog").css("zIndex", 10000);
Add zIndex property to dialog object:
$(elm).dialog(
zIndex: 10000
);
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:''});
I have a function which launches a javascript window, like this
function genericPop(strLink, strName, iWidth, iHeight) {
var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
var new_window="";
new_window = open(strLink, strName, parameterList);
window.self.name = "main";
new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
new_window.focus();
}
This function is called about 52 times from different places in my web application.
I want to re-factor this code to use a DHTML modal pop-up window. The change should be as unobtrusive as possible.
To keep this solution at par with the old solution, I think would also need to do the following
Provide a handle to "Close" the window.
Ensure the window cannot be moved, and is positioned at the center of the screen.
Blur the background as an option.
I thought this solution is the closest to what I want, but I could not understand how to incorporate it.
Edit: A couple of you have given me a good lead. Thank you. But let me re-state my problem here. I am re-factoring existing code. I should avoid any change to the present HTML or CSS. Ideally I would like to achieve this effect by keeping the function signature of the genericPop(...) same as well.
Here is my solution using jQuery and jQuery UI libraries. Your API is not changed , but parameter 'name' is ignored. I use iframe to load content from given strLink and then display that iframe as a child to generated div, which is then converted to modal pop-up using jQuery:
function genericPop(strLink, strName, iWidth, iHeight) {
var dialog = $('#dialog');
if (dialog.length > 0) {
dialog.parents('div.ui-dialog').eq(0).remove();
}
dialog = $(document.createElement('div'))
.attr('id', 'dialog')
.css('display', 'none')
.appendTo('body');
$(document.createElement('iframe'))
.attr('src', strLink)
.css('width', '100%')
.css('height', '100%')
.appendTo(dialog);
dialog.dialog({
draggable: false,
modal: true,
width: iWidth,
height: iHeight,
title: strName,
overlay: {
opacity: 0.5,
background: "black"
}
});
dialog.css('display', 'block');
}
// example of use
$(document).ready(function() {
$('#google').click(function() {
genericPop('http://www.google.com/', 'Google', 640, 480);
return false;
});
$('#yahoo').click(function() {
genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
return false;
});
});
Documentation for jQuery UI/Dialog.
I use this dialog code to do pretty much the same thing.
If i remember correctly the default implementation does not support resizing the dialog. If you cant make with just one size you can modify the code or css to display multiple widths.
usage is easy:
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
Modifying the js to support multiple widths:
Add width and height as attributes to show dialog function and the set them to the dialog and dialog-content elements on line 68
Try Control.Window, which requires Prototype
Here's how I use it:
New Message
And in my Javascript file:
$(document).observe("dom:loaded", function() {
$$("a.popup_window").each(function(element) {
new Control.Modal(element, { overlayOpacity: 0.75,
className: 'modal',
method: 'get',
position: 'center' });
});
});
Now if you want to close the currently open popup do:
Control.Modal.current.close()