pauldes
Posts:1392
 |
| 05/25/2007 4:28 PM |
 Alert
|
| Currently the Top position is hard coded relative to the page. How would you change the container so that the x/y positions of the module where relative to where you were on the page when you call openfloating()? |
|
ListX....makes you look brilliant, even though you're not. |
|
contactdp
Posts:475
|
| 05/26/2007 11:28 AM |
Alert
|
right now it is positioned absolute based on browser position. you can alter this very easily.
add additional div around this and with style="position:relative" so you wedjet will now position absolute in relation to the surrounding div.
|
|
Durga Prasad(DP) | Senior Web Engineer
R2integrated |
|
oxns
Posts:121
|
| 05/27/2007 5:49 AM |
Alert
|
Hi,
Just started to play with Wedjet - what a GREAT container ;-)). At first glance I didn't want to use it - as it really annoys me on your web site !! - I have to cancel it every time I want to search the forum). But I took a look anyway ;-).
I like the fact that although its a popup, its not like a window.open call - as it retains the full contect of its current page !! - thus it can interact with other modules on the page - thats what will make it highly usable.
Anyway - to my question - I don't see how your answer is to be applied. I also want to control the position - ideally when I make it visible - in the openfloating call, i'd like to pass in X and Y - probably from where the user clicked on the screen in the first place.
Thanks
Graham
|
|
|
|
oxns
Posts:121
|
| 05/27/2007 6:03 AM |
Alert
|
OK - fixed it myself to meet my needs - with the following hack (just add this to the wedjet.js file) :
function GSopenfloating(id, xpos, ypos)
{
var floater = document.getElementById(id + "floatingbox")
floater.style.display = 'block';
floater.style.top=ypos;
floater.style.left=xpos;
}
Just rename it to suit your needs!.
The just call it as 'GSopenfloating(moduleid, xpos, ypos);
Could also pass in width and height just by adding a couple of lines to the js as well if required.
Now I don't like editing the source of third-party modules (as I will lose my changes if it gets upgraded) - so hows about DB incorporating this as a separate positionedopenfloating call or somesuch ??.
Hope this helps someone else ;-).
Thanks
Graham
|
|
|
|
pauldes
Posts:1392
|
| 05/27/2007 6:45 AM |
Alert
|
Awesome Graham.... I then added this to the header of my module that calls GSopenfloating() and set your xpos = tempX and ypos = tempY and the module will open right where I click. I've changed script tag so it will post.
<-skript- language="JavaScript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return true
}
</-skript-> |
|
ListX....makes you look brilliant, even though you're not. |
|
oxns
Posts:121
|
| 05/27/2007 7:46 AM |
Alert
|
Paul,
There is an easier way to get the mouse coords - without setting a variable whenever the mouse moves ;-).
onclick="DoYourFuncyion(event);"
function DoYourFunction(event)
{
var x = event.screenX;
var y = event.screenY;
}
Should work for most dom objects - just uses the event handlers, but you do have to pass the event to your function as shown.
NB I did also add width and height - then set the style.width etc. and it remains as the original width ???.
Also have you figured yet how to stop the popup at page reload ??.
Good luck...
Graham
|
|
|
|
pauldes
Posts:1392
|
| 05/27/2007 8:09 AM |
Alert
|
To stop the popup at page load, you have to create more container ASCX files. Copy wedjet.ascx to another file called wedjetHidden.ascx, or something like that, then change the first DIV
<div id="<%=ClientID%>floatingbox" .............
to
<div id="<%=ClientID%>floatingbox" style="display:none; ...................
and apply this new container to the modules you want hidden on page load, then open with openfloating()
I created some variable height containers that I posted inthe ListX forum for Wedjet. I hard coded their widths though...... |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/27/2007 8:25 AM |
Alert
|
Thanks for the function.....
Also, I was finding your GSopenfloating worked on the first instance of calling it when a page loaded, but subsequent calls positioned the module irratically. I just removed the entire <-script-> tag from the bottom of the ascx files and it works flawlessly now |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/27/2007 8:30 AM |
Alert
|
The last "trick" I need to do is make the most recently invoked openfloating() appear on top of the one last clicked. For example, I have a list of records. When I click a record, it opens, then in that form, I have another openfloating() call to another module to open a different form/module on the page. When I click that, the 2nd wedjet based module's form opens underneath/behind the first wedjet form.
Any idea how to solve this? |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/27/2007 8:36 AM |
Alert
|
WAIT!! - removing the entire <-script-> tag from the ASCX is a BAD IDEA!!!
you still need
Drag.init(document.getElementById("<%=ClientID%>floatingbox"));
|
|
ListX....makes you look brilliant, even though you're not. |
|
oxns
Posts:121
|
| 05/27/2007 9:30 AM |
Alert
|
Have you tried using
style.zIndex
setting this to 1 in your first module, then setting it to 2 in the second module ought to do what you want ???. Or even 2 then 3 - depending on the default setting for the main page ??.
I don't have a page with 2 wedjets to try this on yet so can't guarantee that it will work.
Graham
|
|
|
|
pauldes
Posts:1392
|
| 05/27/2007 9:36 AM |
Alert
|
| Yes, but actually, I have several, so an ordered approach will not work. I need to figure out how to set it so the wedjet containers layer one on top of the other based on the order they were clicked, ordered by last opened --> first opened. |
|
ListX....makes you look brilliant, even though you're not. |
|
oxns
Posts:121
|
| 05/27/2007 9:41 AM |
Alert
|
Thanks for the startup tip. Added display:none and its gone :-)).
NB I see that the z-Index is already defined as 1 in the ascx to make it float above the page, so I guess that a different container with 2 should float on top of that :-O.
|
|
|
|
oxns
Posts:121
|
| 05/27/2007 10:25 AM |
Alert
|
Created two containers both from the same ascx container, both have z-index=1, I suspect that they display in the order in which they are created on the page - as mine always came up in a specific order, the first behind the one added after this.
I then tried setting z-index in the GSopenfloating call - and it doesn't work !!
So - I created a new ascx, and set the outer div z-index to 5.
I then changed the container of the first module (see above) to the container with with z-index=5. The 5 came then up on top - and this is the one which used to come up behind the second (see above).
So - you can control it but its a little klunky ;-)) - shouldn't really need different containers for this sort of display variants.
I really think that we need dpsupport to pick up this thread and build this capability into the next version - I did see their posting of yesterday saying that they are working on the next version :-).
NB There is also an inner div defined with z-index=2000 !!.
My feeling is that to be able to control position, size and zorder when showing the module would be really excellent :-)).
Graham
|
|
|
|
pauldes
Posts:1392
|
| 05/27/2007 10:55 AM |
Alert
|
OK...... I WROTE SOME JAVASCRIPT!! *not sure if that's ever happened before * <img src='http://dnn.bi4ce.com/desktopmodules/ntforums/images/emoticons/smile.gif' height='20' width='20' border='0' title='Smile' align='absmiddle'>
I think I set that 2000 in the container....if you are working from one of mine, out of ignorance. <img src='http://dnn.bi4ce.com/desktopmodules/ntforums/images/emoticons/smile.gif' height='20' width='20' border='0' title='Smile' align='absmiddle'>
First, I changed openfloating() in wedjet.js to
function openfloating(id, xpos, ypos, zind)
{
var floater = document.getElementById(id + "floatingbox")
document.getElementById(id + "floatingbox")
floater.style.display = 'block';
floater.style.top=ypos;
floater.style.left=xpos;
floater.style.zIndex = zind;
}
So, on page load I set a variable MyZIndex = 2000 the have my functions defined:
function DoZIndex()
{
MyZIndex = ++MyZIndex; //Increments MyZIndex variable
}
function DoGetPos(event)
{
var tempX = event.screenX;
var tempY = event.screenY;
}
Then when opening containers, I have a link as:
<a onclick="DoGetPos(event);DoZIndex();" href="javascript"openfloating('dnn_ctr'+MyModuleVariable,tempX,tempY,MyZIndex);">Open</a>
The containers now open one on top of the other in order clicked, although the x/y positioning is still a bit flaky. It's a start....thanks for the help.
I'm sure there's a more elegant way if anyone has more ideas....... |
|
ListX....makes you look brilliant, even though you're not. |
|
oxns
Posts:121
|
| 05/27/2007 10:56 AM |
Alert
|
OK - I finally figured out why my module width/height settings in GSopenfloating didn't seem to be working - DOH!!!
The background image is a fixed size png !!. I was trying to reduce the size and of course it would not do so - as it stretched out to the png size !!.
Making it wider simply makes the container wider but dosn't stretch the image (probably as it would look c**p stretched!).
|
|
|
|
pauldes
Posts:1392
|
| 05/27/2007 10:57 AM |
Alert
|
| YES..... I completely removed the PNG files from css and set background colors. |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/27/2007 11:27 AM |
Alert
|
| Ah..... the second div z-index. It's set that high because if the first div's z-index exceeds it, the Solpart Menu is no longer accessible. I would imagine you want to do that to for the other z-index items inthe container so the container move capability doesn't superceed your ability to interact with the module |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/28/2007 9:14 AM |
Alert
|
I think I have a resolution to positioning. Varun(from here in the forums) helped me change the following
Graham, he changed you mouse location function to read like this
function DoGetPos(event)
{
tempX = event.clientX + document.body.scrollLeft;
tempY = window.event.clientY + document.body.scrollTop;
}
Then changed openfloating to read:
function openfloating(id,zind,xpos,ypos)
{
var floater = document.getElementById(id + "floatingbox");
floater.style.top = ypos + 3;
floater.style.left = xpos + 3;
floater.style.zIndex = zind;
floater.style.display = 'block';
}
Take out the zind/ZIndex if your not going to want to pass that parameter and have the z-index in your container ascx file. |
|
ListX....makes you look brilliant, even though you're not. |
|
pauldes
Posts:1392
|
| 05/28/2007 9:21 AM |
Alert
|
| Also note. This type of positioning is so that the wedject container opens where you click your mouse..... |
|
ListX....makes you look brilliant, even though you're not. |
|