I have setup the following jQuery UI Dialog within my document.ready() section, i.e:
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog("close");
}
}
});
1) My question is which I am unsure of, is that within my javascript code, I have a counter, which when it hits a particular value, would like my dialog window to appear.
Unsure how to achieve or trigger this?
2) Within the jQueryUI website, I am trying to download the "Custom Theme" from http://jqueryui.com/download/?themeParams=%3Fctl%3Dthemeroller but nothing seem to happen, i.e no dialog save box appears.
Any ideas?
Thanks.
1) If you want the dialog appear only when that condition is met, you should set the autoOpen option to false, later in your code, after you increment your counter variable, you should check its value and show it if the counter has the particular value you look for, i.e.:
// ...
counter++;
if (counter == 100) {
$('#dialog').dialog('open');
}
// ...
2) To build your custom theme, use ThemeRoller.
First question:
When you hit desired counter value do this:
$("#dialog").dialog("open");
Related
I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
I am working on a councelor portal which is a part of our project in company and my boss advised me to use kendow windo pop control for popups on certain links.
I have done it by using the kendo application control but a little problem arouse which makes my look and feel bad a little.
we got links on one page and our application is supposed to show use popup window when any of the link will be clicked but when I actually runs the page then a popup kendo window comes first and when I minimize it or close it then link starts working according to our desire.
I am sure there is some problem with jquery code which shows the popup window on document.ready(function(){}); but it should work when a link is clicked.
I am posting my code here please help me out to make it more refined and good looking
var window = $("#window"),
undo = $("#undo")
.bind("click", function () {
window.data("kendoWindow").open();
window.data("kendoWindow").center();
undo.hide();
});
var onClose = function () {
undo.show();
}
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "600px",
height: "500px",
draggable: false,
actions: ["Minimize", "Maximize", "Close"],
resizable: false,
title: "Report Activity",
content: "../../AlertCounselor.htm",
close: onClose
});
}
HTML:
<div id="window"></div>
<label id="undo" style="display:none; width:200px;" class="k-group" >Alert Counselor</label>
If you don't want the window to be displayed when the document is loaded, you should specify visible: false in the initialization (check documentation here ).
Lets assume that you have the following link:
Click here for opening the window and not before
Then define the window as:
var myWindow = window.kendoWindow({
visible : false,
width : "600px",
height : "500px",
draggable: false,
actions : ["Minimize", "Maximize", "Close"],
resizable: false,
title : "Report Activity",
content : "../../AlertCounselor.htm",
close : onClose
}).data("kendoWindow");
This should leave the window closed waiting for something else that open it.
Finally define a click event handler for the link:
$("#open").on("click", function() {
myWindow.open();
});
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});
I am trying to create a number of jQuery dialogs but I would like to constrain their positions to inside a parent div. I am using the following code to create them (on a side note the oppacity option is not working either...):
var d= $('<div title="Title goes here"></div>').dialog({
autoOpen: true,
closeOnEscape: false,
draggable: true,
resizable: false,
width: dx,
height: dy
});
d.draggable('option', 'containment', 'parent');
d.draggable('option', 'opacity', 0.45);
$('#controlContent').append(d.parent());
A bit more helpful and complete version of above solution.
It even limits the resizing outside of the div too!
And the JavaScript is fully commented.
// Public Domain
// Feel free to use any of the JavaScript, HTML, and CSS for any commercial or private projects. No attribution required.
// I'm not responsible if you blow anything up with this code (or anything else you could possibly do with this code).
jQuery(function($)
{
// When the document is ready run the code inside the brackets.
$("button").button(); // Makes the button fancy (ie. jquery-ui styled)
$("#dialog").dialog(
{
// Set the settings for the jquery-ui dialog here.
autoOpen: false, // Don't open the dialog instantly. Let an event such as a button press open it. Optional.
position: { my: "center", at: "center", of: "#constrained_div" } // Set the position to center of the div.
}).parent().resizable(
{
// Settings that will execute when resized.
containment: "#constrained_div" // Constrains the resizing to the div.
}).draggable(
{
// Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled.
containment: "#constrained_div", // The element the dialog is constrained to.
opacity: 0.70 // Fancy opacity. Optional.
});
$("#button").click(function()
{
// When our fancy button is pressed the stuff inside the brackets will be executed.
$("#dialog").dialog("open"); // Opens the dialog.
});
});
http://jsfiddle.net/emilhem/rymEh/33/
I have found a way to do it. This is now my method for creating a dialog:
var d = $('<div title="Title"></div>').dialog({
autoOpen: true,
closeOnEscape: false,
resizable: false,
width: 100,
height: 100
});
d.parent().find('a').find('span').attr('class', 'ui-icon ui-icon-minus');
d.parent().draggable({
containment: '#controlContent',
opacity: 0.70
});
$('#controlContent').append(d.parent());