X Library Forums
You are not logged in.
New user registration is currently disabled.
Hi all,
I am a completely new to JS so please bare with me. I had no problems with implementing xpageGrey in my pages,
what I would like to do now is 'advancing' this xpagegrey and have it show instead of a 'loading' message and image some html content like a form.
-- I saw something like that during my browsing around, and when one clicked on a button, say: "add" the page greyd out and a little form popped up, with a specified width and height, and it was completely centered and when one clicked either on the main page or on the close button of the 'popup' the page returned to a normal display, instead of being greyed out, of course the 'popup' was gone aswell. Essentially it really looked and behaved like a modified xPageGrey version, unfortunatly I do not remember where I found it.
So my question is: how can I achieve a similar result ?
I extended the css to one more class:
.clsPageGreyForm {
position: absolute;
width: 550px;
left: -5px;
padding: 4px;
color: #BF8660;
background-color: #FFF;
border: 2px solid #BF8660;
z-index: 103;
}
I also edited the JS to include this:
function xFormGrey(sDivClass, sImgUrl, sImgClass, sMsg, sMsgClass)
{
/*@cc_on
@if (@_jscript_version < 5.5)
this.ele = null;
@else @*/
this.ele = document.createElement('div');
this.ele.className = sDivClass;
if (sImgUrl) {
var img = document.createElement('img');
img.src = sImgUrl;
img.className = sImgClass;
this.msg = document.createElement('div');
this.msg.className = sMsgClass;
this.msg.appendChild(img);
this.msg.appendChild(document.createTextNode(sMsg));
document.body.appendChild(this.msg);
}
document.body.appendChild(this.ele);
/*@end @*/
this.show = function()
{
if (this.ele) {
var ds = xDocSize();
xMoveTo(this.ele, 0, 0);
xResizeTo(this.ele, ds.w, ds.h);
if (this.msg) {
xMoveTo(this.msg, xScrollLeft()+(xClientWidth()-xWidth(this.msg))/2, xScrollTop()+(xClientHeight()-xHeight(this.msg))/2);
}
}
};
this.hide = function()
{
if (this.ele) {
xResizeTo(this.ele, 10, 10);
xMoveTo(this.ele, -10, -10);
if (this.msg) {
xMoveTo(this.msg, -xWidth(this.msg), 0);
}
}
};
}
you can see I changed the "this.msg = document.createElement('p');" to "this.msg = document.createElement('div');"
and I call this like so:
var asi = null;
function AddStateInfo() {
var asiFrm = null;
var asiForm = document.getElementById('addStateInfo');
asiFrm = asiForm.innerHTML;
asi = new xFormGrey('clsPageGreyDiv', '0', 'clsPageGreyImg', asiFrm, 'clsPageGreyForm');
asi.show();
asi.ele.onclick = function(){asi.hide();};
}
all is perfectly centered as I wanted, page is greyed out as I wanted, but: it shows the html source instead of the parsed form. I know it's somewhere my fault, but I can't find the error due to the lack of JS knowledge. Any help is greatly appreciated.
Thank you.
Offline
Hi BlueNC,
Welcome to the X Forums!
Great work! ![]()
You have an excellent idea there and I just couldn't help but play around with it a little. Check it out:
xModalDialog
Perhaps it will give you some ideas. Feel free to ask any questions.
Thanks! ![]()
Offline
Very nice, ... actually I had it fixed, too.. yesterday at around 1am LOL... it was just a little thing I have overlooked, and that was the
this.msg.appendChild(document.createTextNode(sMsg));
instead of that, I just had to write: this.msg.innerHTML = sMsg; and I also took the img references out.... the '0' threw errors... other than that.... it's awesome and I can not imagine the hours of work you have put into that.... thanks for making it freely available, it's a great help.
With your permission, I am going to implement your solution... it appears more stable... than my 'hacking'..... lol
Offline
Good work, BlueNC. Sorry I didn't provide any tips on the code you posted. Your post gave me the idea for xModalDialog and I just couldn't resist it
.
Please let us know how xModalDialog works out for you.
Thanks for your very nice comments ![]()
Have a great day!
Offline
This is a very cool tool this xModalDialog.
I have created a similar function for my app. However, even if I have one which works for the whole page like in this demo, I use one more for each fenster.
Mike, without being too demanding
that would be great to see this xModalDialog integrated in your library, and if it was with an option for the element to be put over that would be even greater!!
... And if the DIV was dynamically generated, and its content called through an Ajax call depending on another parameter in the function, that would be just awesome!!!
Ok, I stop before giving you a migraine ![]()
Thomas
Last edited by Thomas (July 8, 2007 5:22:06 pm)
Offline
Hi Thomas,
I agree that xModalDialog inspires lots of application ideas. Perhaps I'll play around with it more sometime.
I'll probably add it to X in the next release.
Thanks! ![]()
Offline
Hi all,
I have a basic JS question about this script.
I need to change some stuff to have several Modal dialogs in the same page, and to add dynamic content.
When the function
xModalDialog.instances['idMD1'].show();
is called, how can I retrieve the value 'idMD1' inside the show function.
In other words, how can I retrive the ID or the index of the instance which calls the function?
Many thanks,
Thomas
Last edited by Thomas (July 11, 2007 5:54:23 pm)
Offline
Hi Thomas,
Within the show method use this.dialog.id.
Offline
Hi all
Very good work, this is great!
I wrote something similar, even more simple for a personnal project
(when my server will be back, i'll post the code since i released it on ISC (like BSD) licence)
The usage of an img is very interesant, for my work i used xOpacity() whitch is more "heavy" for the browser.
I have two idea if you have some times to loose:
- Integrate a hack for having the same displaying on ie.
- Having a parameter for animate show/paint (pearaps with xAnimation.opacity)
(It's just ideas, not request !)
Offline
Hi, I need - again - a bit of help here.
I am now using this function everywhere in my app: when a fenster loads, when I display an alert msg, and now I'd like to use it instead of the JS function confirm.
So if I want this function to return a true or false value , how can I do?
I have a JS file which redirects the links like that:
else if (h.indexOf('DELETE_ENTRY') != -1){
if (confirm('<?php echo bbnf_write_js($bbnl_103); ?>')){
top.window.frames['bbn_iframe2'].location='../frames/delete.php'+arguments+'&target='+target+'&h='+h;
}
else{
xModalDialog.instances[target].hide();
}
}
And for calling the modal dialog I do like this:
xModalDialog.instances['".$_POST['fenster']."'].show('".$content."');
So i'd like to have a function like this:
else if (h.indexOf('DELETE_ENTRY') != -1){
if (xModalDialog.instances[target].MyConfirm('<?php echo bbnf_write_js($bbnl_103); ?>')){
top.window.frames['bbn_iframe2'].location='../frames/delete.php'+arguments+'&target='+target+'&h='+h;
}
else{
xModalDialog.instances[target].hide();
}
}
I'm not sure to be clear, but please help if it's an easy question for you.
Thanks!
Thomas
Last edited by Thomas (July 12, 2007 11:58:31 am)
Offline
Hi Thomas,
You can't just "call" a function, because it is asynchronous. You could register a callback function.
This is giving me some ideas but I haven't had time to try them. Maybe soon. ![]()
Hi gebura,
you have some good ideas there - thanks ![]()
Offline
The demo now has a Confirm example. It's not the best implementation, but it's a start. To support this I made changes to the object, available here: xModalDialog.
Offline
Hi Mike,
Sorry for the delay to look into this, but I was on something else until now.
So I have looked and I don't think it can do the job as a confirm - correct me if I'm wrong:
The action performed by the confirmation has to be embedded in the xModalDialog function. But what I would like to achieve is that any action is performedwithout having to put each of them in the original xModalDialog function. I'd like to be able to use this 'yes' function when I submit any form, or when I click on some links - to delete an entry or perform an important action.
At the moment, I use my links.js file (the one which captures all links) this way:
else if (h.indexOf('DELETE_ENTRY') != -1){
if (confirm('Are you sure you want to delete this entry?')){
top.window.frames['bbn_iframe2'].location='../frames/delete.php'+arguments+'&target='+target+'&h='+h;
}
else{
top.window.document.getElementById(target + '_loading').style.visibility = 'hidden';
}
}
else if (h.indexOf('DELETE_BMENU') != -1){
if (confirm('Are you sure you want to delete this menu?')){
top.window.frames['bbn_iframe2'].location='../frames/delete.php'+arguments+'&target='+target+'&h='+h;
}
else{
top.window.document.getElementById(target + '_loading').style.visibility = 'hidden';
}
}
And I have a similar function for forms actions.
So I wonder how my links.js file can get this yes response to perform or not the requested action.
Thanks again for your help!
Thomas
Offline
hi there,
im trying to implement the xModelDialog into a page im building. i actually have gotten the "back end" code working to submit form data. my question is more related to the display of the dialog. is there any way to avoid the gap formed at the bottom of my page by the non-visible divs? i have tried using style='display:none;' but then the dialog does not display at all. once i open the dialog, if i 'cancel' the action (go back to the original state), then the gap disappears. if i reload the page, the gap reappears. any ideas for a remedy? thanks a lot!
--Josh
Offline