ASP.Net Details (was ASP.Net / HTML Buttons...)
0 views
Skip to first unread message
Jon
May 9, 2008, 10:28:42 AM5/9/08
to facebox
I've just spent the better part of a work day trying to figure out why
facebox would not "work" and what I learned might be useful to someone
else here.
I added the normal script, link, and jQuery read() code to an existing
page in an ASP.Net web app and then added an anchor tag. My pages
tend to have the general structure:
<html>
...
<body>
<form>
<div id="divPage">
...lots of stuff including other DIVs
</div>
</form>
</body>
</html>
When I reached that page in the application and clicked on the facebox
anchor I saw part of the background shade from the overlay's opacity
but that was it. The working part of the page didn't change. It was
working though because if I clicked on the part of the background,
outside the working divPage the overlay was removed as expected.
I'll skip all the things I did while testing and cut to the chase.
1. Someone else mentioned that it is helpful to modify facebox to
make it append to the form instead of the body. This has a certain
amount of truth to it but what I found was that the real problem lay
with the STYLE added to divPage automatically by VS2005. This style
included Z-INDEX: 100. When I scanned the rest of the markup of that
page I found many places where z-index was specified. All of those
were added automatically by Visual Studio during the design phase.
I found that I could simply change divPage's z-index value to
something less than 100 and everything worked OK. This is because
facebox has a z-index of 100 hardcoded.
Suggestion: Maybe facebox could quickly look at all the z-index
values and choose one that is larger? Never the less it is not
strictly necessary to edit facebox.js
2. This was the more difficult one to find. The popup class has a
simple style of position:relative. For some bizarre reason this was
disastrous. The overlay displayed and a modification to the #facebox
style to set a large border showed that the box was there but it had a
zero width. Nothing was being rendered inside the box.
I don't know why that style is there and I don't know what problems
might be caused by the removal of that style but I have done a number
of tests and the only thing conclusion I have been able to reach is
that I have to remove it!
Once these things have been addressed I was able to start integrating
facebox into the ASP.Net VS2005 web app. I hope this is useful to
someone.
-Jon
facebox would not "work" and what I learned might be useful to someone
else here.
I added the normal script, link, and jQuery read() code to an existing
page in an ASP.Net web app and then added an anchor tag. My pages
tend to have the general structure:
<html>
...
<body>
<form>
<div id="divPage">
...lots of stuff including other DIVs
</div>
</form>
</body>
</html>
When I reached that page in the application and clicked on the facebox
anchor I saw part of the background shade from the overlay's opacity
but that was it. The working part of the page didn't change. It was
working though because if I clicked on the part of the background,
outside the working divPage the overlay was removed as expected.
I'll skip all the things I did while testing and cut to the chase.
1. Someone else mentioned that it is helpful to modify facebox to
make it append to the form instead of the body. This has a certain
amount of truth to it but what I found was that the real problem lay
with the STYLE added to divPage automatically by VS2005. This style
included Z-INDEX: 100. When I scanned the rest of the markup of that
page I found many places where z-index was specified. All of those
were added automatically by Visual Studio during the design phase.
I found that I could simply change divPage's z-index value to
something less than 100 and everything worked OK. This is because
facebox has a z-index of 100 hardcoded.
Suggestion: Maybe facebox could quickly look at all the z-index
values and choose one that is larger? Never the less it is not
strictly necessary to edit facebox.js
2. This was the more difficult one to find. The popup class has a
simple style of position:relative. For some bizarre reason this was
disastrous. The overlay displayed and a modification to the #facebox
style to set a large border showed that the box was there but it had a
zero width. Nothing was being rendered inside the box.
I don't know why that style is there and I don't know what problems
might be caused by the removal of that style but I have done a number
of tests and the only thing conclusion I have been able to reach is
that I have to remove it!
Once these things have been addressed I was able to start integrating
facebox into the ASP.Net VS2005 web app. I hope this is useful to
someone.
-Jon
Reply all
Reply to author
Forward
0 new messages