I am having trouble while using the YUI panel as a dialog.
I have a dialog object created with javascript on page load:
$J = jQuery;
dialog = new YAHOO.widget.Panel("dialog", { width: "300px", fixedcenter: true, close: true, draggable: true, zindex: 4, modal: true, visible: false });
Then when I call my loadDialog() function from event on the page:
dialog.setBody("<iframe id=\"ifrDialog\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
dialog.hideEvent.subscribe($$F.endDialog);
dialog.render(document.body);
// Set iframe
$J("#ifrDialog").get(0).contentWindow.location.replace(url);
Then the tricky part was that I needed to resize the Panel and the IFRAME object AFTER the IFRAME finished loading its document. I got the width and height of the IFRAMES document and then resized the IFRAME to fit the document without scroll bars, then I resized the YUI Panel to contain the IFRAME correctly.
After this was done I make a call to:
dialog.center();
and this positions the YUI Modal Panel correctly in the center of the screen. Everything is great the first time. Originally when I wanted to close the dialog I tried to remove it from the document altogether by using the destroy() method but I kept getting a config null reference error so I simply hide the dialog now. The real problem arises when I try to show the dialog again for the same page. The Panel appears correctly as it should except now the browser window has vertical scrollbars when it shouldn't.
Is the Modal overlay growing for some reason? Is there some way to * reset * the Panel or remove it from the document so that it can be added dynamically when needed?
Also, same widget but different issue. I ran into another interesting situation after I had resized and repositioned the YUI Panel. The underlay did not grow to match the Panel's new size. I had to manually go and resize the underlay. Is there a better way to do this?
Thanks in advance for the help.
Daniel
have you thought about using:
$("yourpanel_ID").remove();
To remove the panel from the DOM,
this way, you will start with a fresh one anytimes.
Related
On a PC my Magnific popup works perfectly. However, on smaller screens the popup displays in the middle of the screen forcing the user to have to scroll down to find displayed image. Is there a way of aligning the image in the popup to the top of the page?
Have you tried the alignTop config property?
$.magnificPopup.open({
alignTop : true,
items : { /*your items here*/ }
})
http://dimsemenov.com/plugins/magnific-popup/documentation.html#aligntop
I'm using twitter bootstrap with JSF-2.2.4 and Spring 3.2.4 Framework. I've built a collapsible accordion based on the following tutorial: http://getbootstrap.com/javascript/#collapse
The code seems to work fine, but only if I start with opened accordions, meaning that I add the 'in' class to the div which inherits the content which is supposed to be collapsed. If I remove the 'in' class the accordion is opened by clicking the appropriate link, but the content is no displayed.
Content is plot created with plotfaces.
Any ideas?
Edit: I just tried filling the box with an image. This seems to work. Maybe this helps narrowing down the problem.
I don't know how this plotfaces work, but i expect your problem similair to fullcalendar not visible until button is clicked or window resized?
Try to set .collapse {display;block; visibilty:hidden;} instead of display none. If this don't helps try to focus on the height of the element. The plugin change the height from 0 to auto but on initial load the height is not set.
I am using the bootstrap modal window as data picker. But when having more results to pick displaying pagination. I want to load the next pages inside the same modal window when clicking on the pagination.
Can I do it in generic way like when any link clicked inside a modal window to load the content inside the same modal window, or do I need to implement this for each link separately using AJAX feature?
Please refer this three links: There will help you for sure.
Reference-1
Reference-2
Reference-3
You could change $('modal-body').html() on click.
The modal shows/hide without changing or reloading content. So you will have to restore the original content on hide maybe.
Use $('#myModal').on('hidden.bs.modal', function () {} to restore your original content.
I am validating my form using an extension pages dialog box. I popup the dialog box with the error message when the user needs to correct input.
The dialog box has an OK button that closes the dialog box and sets focus to the field that needs to be corrected.
var ef = dojo.byId(errorField);
ef.focus();
This is working great except......
I have a group of buttons and a bunch of other components that float to the top of the form.
They are inside a panel with the following CSS.
.PNCToolBar2 {
position:fixed;
top:68px;
left:0px;
width:100%;
height:40px;
color:#fff;
background-color:#F2F2F2;
padding-top:6.0px;
padding-left:15.0px
}
What is happening is that if the failing field is scrolled up under the "button bar" then the browser scrolls a bit to try to get the button into focus but not enough. Depending on how the user had their browser scrolled on the form, all or part of the field in error might still be hidden by the button bar.
Is there a way to first know if the field is at the top of the browser window under the bar and then scoll a bit if it is to make the field appear? If so how?
Try:
dojo.window.scrollIntoView(ef);
If the DOM node represented by ef is not currently on the screen, Dojo will scroll just enough so that it will be.
More info on this method
using javascript you can use the scrollTo() method
http://www.w3schools.com/jsref/met_win_scrollto.asp
I've spent some time simplifying the code to get a simple example of the problem. I'm using Dojo 1.6.1. I've a TabContainer defined on my page. Dinamically, I add to it two tabs, each one of them contains an EnhancedGrid with a rowMenu(right click). The issue is that the menu does not work correctly on IE8 if the TabContainer is defined to use all the space available on the page. If I use a specific height and width, it works fine. By not working correctly I mean the following: The menu is pretty simple; it has just two MenuItem, one of them is a PopupMenu that shows a submenu, as follows:
If the TabContainer takes all the available width and height, the menu does something very strange. First, if you do a right click over a row, it does not do anything. You need to a second right click. Then the menu shows, but when you open the submenu, the main menu disapears, and the submenu does not work. It keeps floating around until you navigate to other page:
When it fails, it throws a javascript error saying "'undefined' is null or not an object", on the line 208 of dojox/grid/_FocusManager.js
[...]
_scrollHeader: function(currentIdx){
var info = null;
if(this._colHeadNode){
var cell = this.grid.getCell(currentIdx);
info = this._scrollInfo(cell, cell.getNode(0));
}
[...]
I've tried to create a jsfiddle sample, but Dojo 1.6.1 is not available there, and with Dojo .1.6.0 the behaviour is diferent (You need to do a left click on the row and then a right click, and then the menu works fine), so I've created a simple HTML sample you can see on http://pastebin.com/jDNFQxrP. To see the difference you just need to change the commented TabContainer at the bottom of the code. Has someone seen this before?
Thanks
JL