I just want to know if it is possible to generate a javascript svg and set it as an icon of a jquery ui button.
$( "#staveSVG" ).button({
text: false,
icons: {
primary: "ui-icon-document"
}
});
instead "ui-icon-document" can i include an svg there?? I dont mean a svg picture but a generated svg (raphaeljs for example).
Thank you.
Related
I need a little help! I have created an TinyMCE Editor (in admin only) button which appears in editor toolbar fine and functioning properly. Right now the button says “Live Chat”, what I want to replace with a dashicon or a font awesome icon.
I have the following code in my plugin.js file:
ed.addButton('livechat', {
text: 'Live Chat',
icon: 'dashicons dashicons-admin-links',
tooltip: 'Live Chat',
cmd: 'livechatButtonCmd',
});
Instead of showing a dashicon, it is showing a small empty rectangle :(
What is the correct way of doing this please?
I have two pages .I am able to show page on clicking the button but i need to show same content as a dialog box on same screen without changing the screen. I need to show dialog box having same field in page .Here is my code in fiddle. on clicking the add button new page is open but i need the dialog box.
http://fiddle.jshell.net/ravi1989/nLJR7/
Are you looking for this?
$.mobile.changePage($("#UserSettingScreen"), {
transition: "slide",
reverse: false,
changeHash: false,
role: 'dialog' // you can use role: 'dialog' to open a dialog
});
Here is jsFiddle demo.
UPDATE
1) You can close a dialog programmatically by calling dialog('close') method like so
$("#case_dialog_cancel").on("click", function(){
$("#CaseInformationScreen").dialog('close');
});
Here is updated jsFiddle.
2) You can theme an overlay. Read more about overlayTHeme. If you for some reason want to get rid of the overlay completely or make it transparent - google for hakish ways. Here is one link Transparent jQuery mobile dialogs
I set up the tooltip and dialog like so:
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( document ).tooltip();
but when i open the dialog later its close tooltip always appears on opening, NOT just on hovering over close as expected. Has anyone else seen this behaviour/knows why it occurs?
Setting the items option to exclude the dialog's titlebar close widget seems to work well for me in jQueryUI 1.9+
$( document ).tooltip({
items: '*:not(.ui-dialog-titlebar-close)'
});
Found a solution:
$( "*" ).tooltip();
$('.ui-dialog-titlebar-close').tooltip('disable')
works in place of the above
Tooltip appears because a button automatically gets focus when a dialog opens (this is a strange behavior). You need to add an attribute "tabindex" to any element in the dialog to avoid this.
For example:
<table tabindex="1">
According to dialog's documentation:
Upon opening a dialog, focus is automatically moved to the first item
that matches the following:
The first element within the dialog with the autofocus attribute
The first :tabbable element within the dialog's content
The first :tabbable element within the dialog's buttonpane
The dialog's close button
The dialog itself
So my solution was to add autofocus to an empty div at the top of the form I was using in my dialog:
<form action="" method="post" accept-charset="utf-8">
<div class="stealFocus" autofocus></div>
Good solution for me with 1.11.3 jQuery and 1.10.4 jUI
$.ui.dialog.prototype._focusTabbable = function(){};
It will desactivate autofocus and dont see auto popup anymore
I use :
$( ".selector" ).dialog({ closeText: "" });
I am using the Jquery UI,
I am using a modal dialog which is working fine, but give a stripped overlay when it is set.
In the Jquery themeroller, I see options for other textures, but I can't figure out how to use them.
Does anybody know?
$('#send_message_form').dialog({ minWidth: 400,
modal: true,
overlay: { opacity: 0.5, background: 'black'} });
Thank you!
In the themeroller options during theme creation, just choose the texture you want. The selected texture will be the overlay of the modal dialog.
If you want to change it manually, change the url portion of the background attribute of the CSS class .ui-widget-overlay, which should be in the jquery-ui-.custom.css file.
I'm attempting to create a web page using the jQuery ui lib. My design uses a jQuery ui autocomplete on an input field at the top of a form. Immediately below this autocomplete input form are some jQuery sliders. The issue is that when the auto complete box populates the results are displayed behind the handle of the slider control. This comes from the way that jQuery builds the sliders which makes pieces of them have a z-index of 3. The z-index of the drop down portion of the jquery autocomplete control appears to always be set to 1. I tried increasing the z-index of the input element that is being auto completed but that doesn't seem effect the z-index of the element jquery creates for the autocomplete drop down. I also tried writing my own javascript to get the drop down menu element by class(it is a ul) and manually set it's z-index. This doesn't seem to work either. I'm assuming this means, somehow the jQuery code is overwriting the z-index change that I'm making. This isn't a browser bug as it is a problem on Firefox, Chrome, Safari and IE. It is a problem with the actual z-index jQuery gives the drop down box (UL element).
Does anyone have a solution to this problem? How does one generally go about fiddling with elements that jQuery automatically generates to build it's controls.
Using the open and close events to modify the z-index worked for me:
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});
See a demo here.
According to http://bugs.jqueryui.com/ticket/5238, there seem to be 2 solutions for this.
"Changing the z-index to 3 seems to fix this completely."
You can do this on your css, you just need to add "!important" to override the value the library sets:
ul.ui-autocomplete {
z-index: 3 !important;
}
Or, "set position:relative on autocomplete input, so that .zIndex() can actually compute the z-index."
This is what I did to set the z-index for autocomplete:
$("#myInputId").autocomplete({
open: function () { $('.ui-autocomplete').css('z-index', 50); },
source: function (request, response) {
$.ajax({
url: "some url",
type: "POST",
dataType: "json",
data: { /* some code... */ },
success: function (data) { /* some code... */ }
})
}
});