jQuery/Interface + CSS layer replication issue?
Posted: Mon Jul 16, 2007 11:50 pm
A quick warning, this is a VERY complex bug regardless of the fact that my code is pretty clean and standards compliant.
Any way I like jQuery and Interface....have it implemented nicely though I've somehow created a bug. I know a lot but not enough and need some other folks to poke at it in hopes we can squash this!
Just updated my site at...
http://www.jabcreations.net/
Required to reproduce the bug!
At the top right click on "site options" and enable DHTML and Keyboard Power Keys.
When the page reloads, open any prompt (site options, site themes, or any links on the Personal Toolbar which is on the sidebar on the right side of the page). You'll know it's a layer/prompt in Opera 9, Firefox 1.5+, or IE 5.5+ if the rest of the page fades giving the prompt a visual focus.
Move the layers around by clicking and holding the mouse button down on the headers. When you close the layers (which I call prompts) using the mouse and open another layer/prompt everything displays fine.
To find this bug you'll need to open a layer/prompt...move it around by it's header...close it using the power key (just press escape, make sure to have them enabled in site options)...and open another layer/prompt.
You'll notice that the previously opened layers/prompts are displayed that you closed with the power key...but not layers/prompts that you have closed only using the mouse. If you open, move, and then close any/all prompts via the power key the issue will continuously reoccur until the page is reloaded.
Using the Web Developer Toolbar's Element Information I have determined that the layers are beneath the #body (the large iframe like divisible layer with the white border). #body has a z-index of 1. The layers/prompts have a default class of "div.prompt" and are displayed when their classes are changed to "div.promptshow". "div.prompt" has a z-index of 0 and "div.promptshow" has a z-index of 777 (or something nutty like that).
However somehow they are fully opaque?
For easy references there are two places where code for the mouse version of closing of a layer/prompt (line 45)...
http://www.jabcreations.net/scripts/scr ... nctions.js
For the Keyboard Power Keys (line 77+ish)...
http://www.jabcreations.net/scripts/scr ... er-keys.js
And the main stylesheet is located at...
http://www.jabcreations.net/themes/clas ... le.css.php
I know there is a lot of repetitive JavaScript code...I'm not worried (or proficient enough) to deal with that and it's of no interest to make the situation any more sophisticated then it already is (I know someone is going to feel the need to mention something along those lines LoL). Oh yeah the page is served by default as XHTML...meaning application/xhtml+xml...fun right?
Please poke this with a stick and test it out as much as you'd like. I'm really confused...though I think mostly because I finally got this done and maybe my brain has deflated of late from all the work...
Looking forward to your replies! 
Any way I like jQuery and Interface....have it implemented nicely though I've somehow created a bug. I know a lot but not enough and need some other folks to poke at it in hopes we can squash this!
Just updated my site at...
http://www.jabcreations.net/
Required to reproduce the bug!
At the top right click on "site options" and enable DHTML and Keyboard Power Keys.
When the page reloads, open any prompt (site options, site themes, or any links on the Personal Toolbar which is on the sidebar on the right side of the page). You'll know it's a layer/prompt in Opera 9, Firefox 1.5+, or IE 5.5+ if the rest of the page fades giving the prompt a visual focus.
Move the layers around by clicking and holding the mouse button down on the headers. When you close the layers (which I call prompts) using the mouse and open another layer/prompt everything displays fine.
To find this bug you'll need to open a layer/prompt...move it around by it's header...close it using the power key (just press escape, make sure to have them enabled in site options)...and open another layer/prompt.
You'll notice that the previously opened layers/prompts are displayed that you closed with the power key...but not layers/prompts that you have closed only using the mouse. If you open, move, and then close any/all prompts via the power key the issue will continuously reoccur until the page is reloaded.
Using the Web Developer Toolbar's Element Information I have determined that the layers are beneath the #body (the large iframe like divisible layer with the white border). #body has a z-index of 1. The layers/prompts have a default class of "div.prompt" and are displayed when their classes are changed to "div.promptshow". "div.prompt" has a z-index of 0 and "div.promptshow" has a z-index of 777 (or something nutty like that).
However somehow they are fully opaque?
For easy references there are two places where code for the mouse version of closing of a layer/prompt (line 45)...
http://www.jabcreations.net/scripts/scr ... nctions.js
For the Keyboard Power Keys (line 77+ish)...
http://www.jabcreations.net/scripts/scr ... er-keys.js
And the main stylesheet is located at...
http://www.jabcreations.net/themes/clas ... le.css.php
I know there is a lot of repetitive JavaScript code...I'm not worried (or proficient enough) to deal with that and it's of no interest to make the situation any more sophisticated then it already is (I know someone is going to feel the need to mention something along those lines LoL). Oh yeah the page is served by default as XHTML...meaning application/xhtml+xml...fun right?
Please poke this with a stick and test it out as much as you'd like. I'm really confused...though I think mostly because I finally got this done and maybe my brain has deflated of late from all the work...