Part of an ajax code:
success: function(data) {
$('#dg1').dialog({
modal:true,
draggable: false
});
}
Is there a way to keep modal = true option but without entire screen fade overlay when dialog appears?
In CSS, the modal element has a jQuery UI Class of ui-widget-overlay. You could adjust this like so:
CSS
.ui-widget-overlay {
background: transparent;
}
This effectively makes it clear, yet still there to do it's job.
Related
I'm using the Column Selector Widget on Mottie's excellent tablesorter. It works great!
However, when a user clicks on the button (using CSS Popup only mode), the only way to dismiss the selection modal is to click on the same button again. This is inconsistent with the rest of my app, which dismisses bootstrap modals when clicking anywhere outside of the modal.
I know I can write an onClick function to monitor the whole body, but I wonder, is there a built-in option that I've missed that will dismiss the column chooser when a user clicks outside the box?
That "Column" button uses a hidden checkbox to show/hide the popup - it's pure HTML & CSS and completely customizable.
If you to modify the current setup, add the following (demo):
HTML (add after the "columnSelectorWrapper")
<div id="columnSelectorOverlay"></div>
CSS
#columnSelectorOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
display:none;
}
* note: remove the background: rgba(0,0,0,.5); setting if you don't want the dark overlay.
Then add the following setting to the .columnSelector definition:
z-index: 1;
Then add this javascript
$('#colSelect1').on('change', function() {
if (this.checked) {
$('#columnSelectorOverlay').show();
}
});
$('#columnSelectorOverlay').click(function() {
$('#colSelect1').prop('checked', false);
$(this).hide();
});
See this JSFiddle for example: http://jsfiddle.net/6ocawwqd/21/
Stack Overflow is insisting I include the code that I'm linking to, so here is the JS and CSS:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').removeClass('hide');
setTimeout(function() {
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
transition: all .5s;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
The Basic Problem:
I have a widget that I need to hide/show which has an unknown height. When hidden, the display must be set to 'none' to avoid tab index and form validation issues. So I'm using max-height property to make use of CSS transitions to animate the hiding and showing, and to swap the display from 'none' to 'block' (or just to the default by removing the display property from the element. The issue described happens in either case).
In my testing, I get a double animation only in OSX Safari, Chrome and Safari on iOS, and Android Stock mobile browser. (It works in Windows Chrome, FF, IE11, Android Chrome)
I've pinpointed when the double animation happens.
The first animation is correct, and happens when the max-height property is changed via JavaScript from 0 to whatever the content height is.
The second animation occurs when I then use a timer to remove the max-height property after the animation is complete. I must remove the max height, because after visible, the element may get even more items added to it and so must be allowed to grow.
Has anyone encountered this or have a solution?
I've encountered a similar issue, but found that a lot of the backface-visibility: hidden suggestions haven't resolved it for iOS.
As you're already using JavaScript to set/unset the height properties, you can try to toggle an additional 'animating' class to the element before animating and after the animation's complete. If you do this prior to removing the height (or setting it back to 'auto'), iOS won't be trying to re-animate the height property that results in the flicker.
Taking your example http://jsfiddle.net/m2adrugn/2/:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').addClass('animating').removeClass('hide');
setTimeout(function() {
$('.reveal').removeClass('animating');
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').addClass('animating').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none').removeClass('animating');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.animating {
transition: all .5s;
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
Change max-height to height.
Worked for me.
Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js
I have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event.
Visually, both these methods work fine. However, once the draggable exits the original (smaller) boundary of the droppable, jQuery UI interprets this as a 'dropout', despite still being within the current (larger) boundary.
For example, js:
$("#dropable").droppable({
hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});
css:
#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }
In this case, when a draggable hovers over the droppable, the droppable visually increases in size to 200px. If at this point, the draggable is moved down by 20px, I would expect it to still be hovering over the droppable. Instead, jQuery UI fires the dropout event and the droppable reverts to being 10px high.
Anyone know how to get it to behave in the way I'd expect it to?
jsFiddle example: http://jsfiddle.net/kWFb9/
Had the same problem, I was able to solve it by using the following options:
$("#droppable").droppable({
hoverClass: 'hovering',
tolerance: 'pointer'
});
$('#draggable').draggable({
refreshPositions: true
});
Here's the working fiddle: http://jsfiddle.net/kWFb9/51/
See http://bugs.jqueryui.com/ticket/2970
So I made a couple tweaks to your fiddle
First I set the droppable tolerance to "touch" which will activate whenever any part of the draggable is touching it. This causes the hovering class to be applied.
Next I added an animation to resize your draggable element slightly. I wasn't sure if this was functionality you wanted or not so I put it in there anyways.
Lastly, I permanently apply the hovering class to the droppable element when the draggable element is dropped into the droppable zone. This way the droppable doesn't revert to that narrow height when there is an element in it
http://jsfiddle.net/kWFb9/2/
EDIT:
Better fiddle: http://jsfiddle.net/kWFb9/6/
I hope this helps :)
you could create a bigger (i.e. the size of #droppable.hovering) div without background and apply your droppable to it. Note that you didn't provide HTML but the new #drop_container should contain both divs.
JS
var dropped;
$("#droppable").droppable({
drop: function(event, ui) {
dropped = true;
}
});
$('#draggable').draggable({
start: function(event, ui) {
$("#droppable").addClass("hovering");
dropped = false;
},
stop: function(event, ui) {
if (!dropped) {
$("#droppable").removeClass("hovering");
}
}
});
CSS
#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }
Or you could try another solution with .live() or .livequery() from this article
[EDIT] I've edited my code and here is a jsfiddle: http://jsfiddle.net/94Qyc/1/
I had to use a global var, I didn't find a better way to check wether the box was dropped. If anybody has an idea, that would be great.
There is an other (hum hum) not bad solution :
TL;DR: Fiddle
The problem is that the plugin stores dom element's size values when the widget is created (something like) :
//jquery.ui.dropable.js
$.widget("ui.droppable", {
...
_create: function() {
var proportions,
this.proportions = function() { return proportions; }
And the offset for widgets are initialized in $.ui.ddmanager.prepareOffsets();
So we only need to overwrite the proportions object.
This way allow to access to real plugin properties so we can write something like :
$("#droppable").droppable({
hoverClass: 'hovering',
over: function(ev, ui) {
var $widget = $(this).data('droppable');
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
},
out: function(ev, ui) {
var $widget = $(this).data('droppable'); //ui-droppable for latests versions
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
}
})
I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.
I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.
I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.
Here is an example of the grayed-out effect with a dialog box:
jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.
All suggestions, website referrals, and code is appreciated.
EDIT: I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.
EDIT: What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/
I always like to use the jQuery BlockUI plugin:
http://malsup.com/jquery/block/
Check out the demos, you'll probably find something you're looking for there.
One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.
When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).
Code:
#json-overlay {
background-color: #333;
opacity: 0.8;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('ajax-loader.gif');
background-position: center;
background-repeat: no-repeat;
}
Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div
Why don't you just use "modal:true"?
$(function () {
$("#dialog").dialog($.extend({}, dialogOptions, {
autoOpen: false,
width: 500,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
}));
$("#profile_edit").click(function () {
$("#dialog").dialog("open");
});
$("#save_and_close").click(function () {
$("#dialog").dialog("close");
});
});
You can use something like this jquery code. Pass the id of the element that you want to stay on top of the page:
function startModal(id) {
$("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
$("#PopupMask").css('opacity', 0.5);
$("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
$("#"+id).data('savePosition', $("#"+id).css( "position"));
$("#"+id).css( "z-index" , 11 );
$("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
if ($("#PopupMask") == null) return;
$("#PopupMask").remove();
$("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
$("#"+id).css( "position" , $("#"+id).data('savePosition') );
}
you can use simple div and then ajaxstart and ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});