Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 July 5, 2007 3:02:47 pm

BlueNC
New Member
Registered: July 5, 2007
Posts: 2

[xModalDialog] xPageGrey - problem

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

 

#2 July 6, 2007 12:52:18 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

Hi BlueNC,

Welcome to the X Forums!

Great work! smile

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! smile

Offline

 

#3 July 6, 2007 2:53:31 pm

BlueNC
New Member
Registered: July 5, 2007
Posts: 2

Re: [xModalDialog] xPageGrey - problem

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

 

#4 July 7, 2007 12:14:31 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

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 smile.

Please let us know how xModalDialog works out for you.

Thanks for your very nice comments smile

Have a great day!

Offline

 

#5 July 8, 2007 8:41:42 am

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

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 tongue 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 wink

Thomas

Last edited by Thomas (July 8, 2007 5:22:06 pm)

Offline

 

#6 July 8, 2007 8:19:08 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

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! smile

Offline

 

#7 July 11, 2007 5:53:01 pm

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

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

 

#8 July 11, 2007 6:26:17 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

Hi Thomas,

Within the show method use this.dialog.id.

Offline

 

#9 July 11, 2007 6:45:42 pm

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

Hi Mike, Thanks a lot!

Offline

 

#10 July 12, 2007 3:41:37 am

gebura
Member
From: France
Registered: June 20, 2007
Posts: 25
Website

Re: [xModalDialog] xPageGrey - problem

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

 

#11 July 12, 2007 10:51:25 am

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

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

 

#12 July 12, 2007 3:55:36 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

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. smile


Hi gebura,

you have some good ideas there - thanks smile

Offline

 

#13 July 13, 2007 11:26:11 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xModalDialog] xPageGrey - problem

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

 

#14 July 13, 2007 2:57:25 pm

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

Thanks a lot Mike, I gonna try it

Offline

 

#15 July 18, 2007 9:47:36 pm

Thomas
Member
From: Dublin, Ireland
Registered: May 14, 2007
Posts: 62
Website

Re: [xModalDialog] xPageGrey - problem

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

 

#16 December 27, 2007 11:14:59 pm

jmack159
New Member
Registered: December 27, 2007
Posts: 1

Re: [xModalDialog] xPageGrey - problem

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

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load