I'm using Fancybox for Wordpress to display a form.
Within the fancybox is a div with id "popup1", which contains the form.
When the user submits the form, #popup1 disappears, and #popup2 appears. div#popup2 just has a little "Thank you" message that is very short.
The height of the fancybox window automatically resizes to fit the height of the content when I switch from popup1 to popup2, but I want the WIDTH of fancybox window to shrink also. How can I do that?
Thanks in advance!
You have several handlers to flip from one pop-up to another like
$("#popup4-BA").slideDown("slow");
Try adding the fancybox (v1.3.4) method $.fancybox.resize() after completing the animation like
$("#popup4-BA").slideDown("slow", function(){
$.fancybox.resize();
});
... you may need to do this in every handler.
Some Notes:
you first pop-up has a fixed width so you may need to try removing it and set the css width property to auto.
since you are using fancybox v1.3.4 with inline content, you need to be aware of this BUG and workaround.
I have a Panel that I'm using as a modal dialog box, and as such the contents should be hidden from view while the page is loading. However, if I use CSS to set the div's display:none or visibility:hidden then the YUI show() & hide() methods don't work properly (eg, clicking the button to call up the modal dialog greys out the screen, but the referenced div does not appear). Can anyone point me towards the best way to do this?
Thanks!
Try adding yui3-widget-loading to the container div. When Y.Panel is instantiated, it will remove this class. You can then define .yui3-widget-loading { display:none; } so it is not visible during page load.
i have an asp.net ajax hovermenuextender on a modalpopup panel to display a tip on hover.
the problem is the (tip) panel with the hovermenuextender appears below the modalpopupextender in IE8
this is a z-index issue, is there any place in the page where i can set the z-index for the hovermenu so that it appears over modalpopup,
i learnt that this change could be made in the PopupBehavior.js file from here:
http://ajaxcontroltoolkit.codeplex.com/workitem/26107
but i am using the Ajaxcontroltoolkit.dll in the project and its not possible to modify the ajax javascript source files.
thanks in advance.
I have running version AJAX 3.0 and adjusting the z-index did the trick. Thank you!
Make sure your PopupMenu container has higher z-index than the modal popup control. If you use Firefox with Firebug plugin you can find it easily when the page gets rendered. Just right click on the modal popup background -> Inspect element with Firebug -> on the right side swap to the "Computed" tab and you will find the current z-index in the object properties.
In the CSS classes for your Modal Popup and the Model Background you can try adding an overriding z-index entry that is less than the default for the hover menu popup. Something like:
.dialog {
z-index: 99 !important;
}
.dialog-bkg {
z-index: 90 !important;
}
Apply the "dialog" class to your modal popup panel, and supply the "dialog-bkg" class in the BackgroundCssClass property of the ModalPopupExtender.
I don't know if it will solve the issue with the hover menu -- but it may be worth a try.
BTW -- I just tested with version 4.1.404 of the Ajax Control Toolkit and I was able to use a hover menu on top of a modal popup without needing any changes...
Something strange afoot, here:
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.
Here's what the bad div looks like:
and here's the Firebug panel:
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
Best of all, it is working fine on all browsers. :)
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div> should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
Try binding the datepicker when the date input becomes visible:
Remove the $(".date_picker").datepicker({ disabled: false });
Add an id="cater" to <input type="text" name="cater"/>
Call $('#cater').datepicker(); when the "reserve event room" button is pressed.
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
The problem is down to the element the datepicker is being binded to not yet being available.
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
<input type="text" class='date_input' />
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
from:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
#ui-datepicker-div {z-index:11111;}
I have an asp.net usercontrol that contains a jQuery UI Dialog Control.
All works as expected execpt the grey tranparent overlay (to make the form modal) only appears on the hidden div below the form where the dialog is triggered from.
Is it possible to target this overlay to the parent div? or is this not the right solution.
I have tried the blockUI plugin (and removing the Dialog style to prevent its overlay showing), but although it "looks" right on screen it disables all the controls including the ones in the dialog popup.
Any ideas?
Added: Screenshot
alt text http://www.freeimagehosting.net/uploads/e0555a0ec5.jpg
It might be a z-order issue. Can you post a screenshot to make it easier to understand. Also please post the high level HTML you are using on the aspx page.