HTML CSS Cannot See Element OpenSeadragon Viewer - html

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.

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

Related

Go to top of page

I created an icon at the side of my page that can be clicked to go back to the top of the page.
I thought this would be fairly simple, like so:
#back_to_top{
position:fixed;
right:0px;
bottom:80px;
padding:10px;
background-color:#fff;
opacity:0.5;
border-radius:10px 0px 0px 10px;
cursor:pointer;
}
#back_to_top img{
width:50px;
height:50px;
}
#content{
height:9999px;
}
<a id="top_of_page"></a>
<div id="content">loads of content</div>
<div id="back_to_top">
<a href="#top_of_page">
<img src="media/top.png">
</a>
</div>
However, when I click the icon it actually moves down the page by the same amount of pixels each time.
I have no other anchors or anything else with a similar ID.
My anchor tag is the first tag in my body.
my 'loads of content' is all generated dynamically from php.
I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.
Adding an a element with href="#" should do the trick.
Here you have an example of it working:
<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
To the moon!
I prefer to use the Javascript window.scrollTo method. Passing in 0,0 will scroll the page to the top left corner instantly.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord - Pixels along horizontal axis
y-coord - Pixels along vertical axis
This method allows you to scroll to any point on the page.
Depending on whether you want to use a link tag <a> or a <button> tag you have two simple approaches.
For a link tag:
<a href='#'>To Top</a>
is all you need.
For a button tag:
<button onclick="window.scrollTo(0,0)>To Top</button>
Both of these work well.

PNG Images distorted muddy in IE7

I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)

Clickable divs beneath transparent div

Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.
<style type="text/css">
#holder{
width:200px;
height:200px;
}
.clickMe {
width:100px;
height:100px;
cursor:pointer;
background-color:red;
border:1px solid black;
float:left;
margin:-1px;
padding:0;
}
.hidey {
position:absolute;
top:0;
left:0;
z-index:50;
height:50%;
width:50%;
opacity:.25;
background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
</div>
Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).
Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.
See this answer for details:
Trigger a button click with JavaScript on the Enter key in a text box
Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.
See the second answer here for how to do that.
How do I get the absolute position of a mouse click from an onClick event on the body?
EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.
Let me suggest the simple old school method rather than going to any length to make this work.
Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.
I.E. rather than this:
<div class="wrapper">
<div class="clickMe">
...
</div>
<div class="clickMe">
...
</div>
</div>
Use this:
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.

How to make image in html transparent?

I have a html file and I want to put an image in. The image should be transparent. The way I am doing now - first comes the image, and after it finishes, there comes the text and the other images. How to add transparent image in html?
This is my code now:
<img src="result_files\image003.png" alt="some_text"/>
Try using opacity (and filter for IE).
<img src="result_files\image003.png" alt="some_text" style="opacity:0.4;filter:alpha(opacity=40);"/>
Now, I understand your question, the answer is something like this:
<div style="background:url(image.jpg)"> the content here </div>
Use CSS property opacity or just make the png transparent in an image editor.
if you want the image be the background, should be
HTML
<div class="content">
...content...
</div>
CSS
.content {
background-image:url('imageurl.jpg');
}
Here's how to make it transparent, paste this into your javascript and edit as you please.
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="http://www.hlgjyl888.com/data/wallpapers/30/WDF_780770.png" style="position:fixed; right:10px; bottom:20px; width:80px; height:80px; border:none; cursor:pointer; background:none;">
<script>
function bigImg(x) {
x.style.height = "120px";
x.style.width = "120px";
x.style.opacity = "0.2";
}
function normalImg(x) {
x.style.height = "80px";
x.style.width = "80px";
x.style.opacity = "100";
}
</script>
x.style.opacity tells the browser to set the opacity, if copying this to your document there are a few more things you should know...
style="position:fixed; right:10px; bottom:20px; Positions it at bottom right of page.
cursor:pointer; Makes the cursor stay pointer on all or almost all browsers.
Hope this helps you!

Make a div appear as though the bottom left and right corners are lifting off the page a little using box shadow?

Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html
The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.
The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}