[ilsuocero]

I used a canvas to show a progress bar in mobione without problem.
I inserted a transparent panel at the bottom list of the screen objects and then I used the following code:

 var stile = "position: absolute; z-index: 999; ";  
var infoArea = document.getElementById('m1-MapDetail-infoArea');
var infoA = document.createElement('canvas');
 infoA.id = 'downloadCanvas';      //  canvas name
 infoA.setAttribute("style", stile);
 infoA.style.cssText = stile;
 infoA.style.visibility = 'visible';
 infoArea.appendChild(infoA);

Once I terminate to show the progress bar, I eliminate the canvas child with:

var myCanvas = document.getElementById("downloadCanvas");
infoArea.removeChild(myCanvas);

Eberything is ok… But, the transparent panel in the highest position disables all stuff below it, like buttons or scroll panels.
So, I defined a transparent panel in the first position and all objects of the screen depending from it.

–panel(transparent)
!— button
!— scroll panel
!— text
!— other stuff…

Using the code above, the canvas child has to be create at the bottom position. Then, in the style i use the z-index at the 999 position which must be in the highest level. So if I create the canvas child and I delete it after showing the progress bar, I should then be able to use scroll panel and buttons.

BUT, the canvas remains always hidden. why?
Thanks
Roberto

[ilsuocero]

Partially solved.
One problem persist….
partial Solution:

First I used

$('#m1-MapDetail-infoArea').css('z-index', '999');

to move the element at the top when the canvas is created and then a little thin gray area appared at the bottom of the screen. The reason is because offsetTop of the canvas was positioned at the end of the last object. No way to modify it.
So, I moved the transparent panel alone in the first position; not with the other objects depending from it as before.
-|transparent panel
-|button
-|other stuff…
Then the whole screen became gray and the progress bar show started.
At the end of the progress bar show, i delete the canvas child and I use the code below for pushing back the transparent panel so buttons and scroll panels should be enabled again.

$('#m1-MapDetail-infoArea').css('z-index', '1');

BUT even though the debug shows the object’s z-index = 1 the transparent panel remains in the highest position since I cannot touch enymore in the screen.

[ilsuocero]

A sample test case is here:
http://goo.gl/SXcec

regards

[ilsuocero]

Finally SOLVED!

Since all css elements by default are set to “auto” the element that you want to move in a different position has to be returned to “auto” if you want to move it back to its original pos.

 $('#m1-test_canvasZindex-panel1').css('z-index',999);

The element is in highest position

 $('#m1-test_canvasZindex-panel1').css('z-index', 'auto');

The element is back to its original position.

The above link has now a correct running example.

Happy new year.

[support-octavio]

@ilsuocero,

Thanks for your follow up informing that your problem is resolved. Marking thread as closed.

[Author]

Posts