CODEWITHSUNDEEP
htmljquerycssz-indexopenseadragon
Garet Jax
Garet Jax

Reputation: 1171

HTML CSS Cannot See Element OpenSeadragon Viewer

I am missing something simple I think. I am using OpenSeadragon viewer (OSD) and would like to insert some floating text over the images. No matter what I do, the viewer is on top of everything. I can see the text flash, but then the viewer hides it all. The HTML with the viewer is:

<body>
    <div class="demoarea">
        <div id="toolbarDiv" class="toolbar">
            ...
        </div>
        <div id="contentDiv" class="openseadragon"></div>
    </div>
</body>

I have created a number of tags in an attempt to display text floating over the viewer:

    #watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
    
    .watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
<p>Top</p>
<div id="watermark" style="display:block;">Top</div>
<h1>Top</h1>
<div id="watermark" class="watermark">
    Top
    <span>Top</span>
</div>

I have tried to make the text as obnoxious as I can so that if it flashes quickly, I can still see it. This is exactly what is happening. Multiple instances of the "Top" text is visible for a split second and then is covered up by the viewer.

When I look at the CSS elements of the viewer, the z-index of the fullpage class is 999999. I set my CSS z-index to 1000000 so it should be on top, but it isn't.

Anyone have other ideas?

Thanks.

This is the viewer with all the Top text messages.

Upvotes: 0

Views: 254

Answers (1)

Garet Jax
Garet Jax

Reputation: 1171

Very interesting. It is as though the viewer is removing all elements it doesn't recognize. When I inspect the HTML after it is drawn, the elements I add are no where to be found. I am not sure my assessment is correct, but I added the Div using jQuery after the viewer is drawn and it worked like a champ.

if (!watermark) {
    watermark = $('body').append($('<div/>', {id: 'watermark', class: 'watermark'}));
} // iif

Upvotes: 0

Related Questions