Loading Profile...
Why does zIndex for full-screen mode have to be so high?
In seadragon-min.js (v0.8), the zIndex of the viewport in full screen mode is set to 99999999. But I need to place a javascript modal dialog box on top of everything if a user clicks on certain things. Works perfect in seadragon's regular mode. But even if I set the zIndex of my modal dialog box to 99999999 + 1, it appears underneath seadragon. I see my modal dialog box when I get out of full screen mode.
So I changed the zIndex to 99 in seadragon-min.js and everything works perfect now! I'm guessing 99999999 is the limit, at least in firefox? Why is it so high? Will I be screwing anything up by having zIndex set to 99?
So I changed the zIndex to 99 in seadragon-min.js and everything works perfect now! I'm guessing 99999999 is the limit, at least in firefox? Why is it so high? Will I be screwing anything up by having zIndex set to 99?
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
-
Inappropriate?Hey Scott,
The 99999999 is actually just an arbitrary high number, to ensure that the viewer is above all other elements on the page (some of which may have z-index set). It seems to be near some limit, but I didn't test to see if it was an actual limit. While this is not ideal, it seems necessary in order for full page mode to be robust across all types of pages.
For what you're doing, I would recommend adding the modal box as a control to the viewer when it's needed: adding custom controls. On that page, for example, you can see that adding the "Random" link as a control allows it to "stick" to the viewer, even in full page mode. What do you think? If this is viable for your case, that's probably the best option.
Aseem
-
Inappropriate?Aseem, thank you for the response and suggestion. My specific issue is I have links within the visualization. Some of the links take you to another location within the visualization and some links take you to another webpage. But some links take you to more than 1 place, so I need to ask the user where he wants to go. I do this by displaying a modal dialog box where the screen behind the dialog box is inaccessible and faded black a little.
I don't think the modal dialog is possible as a control, but I'm open to implementing this differently. I guess I could add a control when the user clicks on one of these links where the control is centered where the mouse is or in the center of the viewport. This control would list the link's destinations. Clicking anywhere else on the viewport would remove the control. Seadragon.ControlAnchor.NONE apparently requires css to absolutely position the control. Sounds like I can easily figure out where to place the control absolutely. I would use Seadragon.Viewer.isFullPage() to possibly position it differently. How can I tell when someone has clicked elsewhere in the viewport outside of my box with a list of links? Is there a way to slightly fade black the viewport behind the control? Is there a way to make this control appear above the other controls (I'm already using all 4 corners with a link, a legend and a message)?
It would be nice if Seadragon could make the zIndex a property that could be adjusted. -
Inappropriate?Have you seen our "About Seadragon Ajax" screen we use for our branded viewers? E.g. in our gallery, click the bottom-left button in the viewer to see what I mean. Is that something like you want?
It sounds like it's a bit different in your case, since you may want the modal dialog box to cover the whole page when the viewer is small, whereas our "about" screen covers only the viewer.
Are you implementing the modal dialog box yourself, or is it an off-the-shelf widget? If it's a widget, I can understand that you may not be able to tweak it without modifying the widget code.
If you can customize the behavior, however, here are some ideas:
* When a user clicks one of these links, check if the viewer is in full page mode, through viewer.isFullPage().
* If so, add the dialog box as a control to the viewer. The dialog box will indeed be ControlAnchor.NONE, and you can set its width and height to 100%.
* If not, show the dialog box as a regular modal dialog box by adding it as a child of the <body> tag with fixed position.
With either way, you can get the darkened background by adding a black background div that has its opacity set to 70%. Add a click listener on this that closes the dialog box. Finally, add your actual modal dialog box as a centered child of this background div that also handles click events appropriately. These are the techniques we used for our "about" screen, and I can help you out more with these if you need.
If all this is too much effort, changing the zIndex of full page mode directly does seem like a suitable workaround. =) I'm not convinced we want to expose it as a property (I worry things like that can clutter up the API), but we'll keep it in mind. -
Inappropriate?I think your suggestion is great. I'm going to implement my solution just like your about screen. Thanks Aseem!
-
Inappropriate?This is what I did and it works great for both full page and regular mode (I don't even need to check which mode the viewer is in):
var chooserBox = $('<h3>Choices</h3>').append(links);
var underlay = $('');
chooser = $('').append(underlay).append(chooserBox);
// so that clicks don't penetrate the choosing screen onto the visualization links
chooserActive = true;
underlay.click(removeChooser);
viewer.addControl(chooser.get()[0], Seadragon.ControlAnchor.NONE);
// need to set position after adding the control to get the box height
chooserBox.css("top", viewer.viewport.getContainerSize().y/2 - chooserBox.get()[0].offsetHeight/2).css("left", viewer.viewport.getContainerSize().x/2 - 230);
-
Inappropriate?Sorry, getsatisfaction's html parser didn't agree with my code... Here's a link to the code:
http://jsbin.com/uratu/edit -
Inappropriate?my css might be helpful in addition to the javascript for anyone wanting to implement this:
.chooser {
width: 100%;
height: 100%;
position: relative;
}
.chooser .underlay {
width: 100%;
height: 100%;
background-color: black;
filter:alpha(opacity=70);
opacity: 0.7;
-moz-opacity:0.7;
}
.chooser .box {
width: 450px;
border: solid 3px black;
background-color: #ddf;
font-size: 1.7em;
position: absolute;
top: 0px;
left: 0px;
}
.chooser h3 {
font-size: 1.7em;
margin: 0px;
background-color: #bbf;
} -
Inappropriate?I'm looking forward to seeing it in action. =)
EMPLOYEE
