I'm probably missing something obvious, but is it possible to have on-image navigation, but still allow the visitor to right-click-save the image in Firefox? I'm using a very simple, absolutely positioned overlay to handle the previous/next duties, but that makes it impossible to right-click and save the image in Firefox. Firefox offers to save the link, but not the image itself. In Chrome and Edge, it's not a problem.
Stripped down, the code is very simple:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<style>
#slide {
position: relative;
width: 1344px;
height: 900px;
}
#prev {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
}
#next {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
}
</style>
</head>
<body>
<div id='slide'>
<a href='a01.html' id='prev' title='Previous image'></a>
<a href='a03.html' id='next' title='Next image'></a>
<img src='a02.jpg' width='1344' height='900' alt=''>
</div>
</body>
</html>
Changing browser settings, or using an add-on, is not an option - this is directed at site visitors, whose settings I can't change.
Related
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
I have overlaid previous and next arrows on an image placeholder for a slideshow, but I cannot get the placeholder to resize in relation to the screen size. I thought the solution would be as simple as nesting the placeholder in another div and using CSS margins, percentages, etc., but this does not seem to work. My code is below, with CSS styles in the header for convenience, and it should look like the image (see link below), but the buttons have to be working and not just for show - hence the overlaid arrows. Any help would be appreciated.
Slideshow Placeholder
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Image Placeholder with Direction Arrows</title>
<style>
#placeholder-image-container {
position: relative:
top: 0;
left: 0;
}
#placeholder-image {
position: relative;
top: 0;
left: 0;
}
#left {
position: absolute;
left: 0px;
top: 300px;
}
#right {
position: absolute;
left: 884px;
top: 300px;
}
</style>
</head>
<body>
<div id="slideshow-placeholder-container">
<img src="placeholder-image.jpg" id="coutts" />
<img src="left-pointer.jpg" id="left" />
<img src="right-pointer.jpg" id="right" />
</div>
</body>
</html>
This CSS causes a Button to be anchored at the bottom of the screen of our website. The button stays anchored to the bottom of the page when scrolling up or down. In IE, it just renders the button right where the DIV code is located instead of floating it and anchoring it to the bottom of the browser. Chrome and Safari both show the button at the bottom right of the browser window. I have gone through several articles and tried different CSS settings but cannot seem to get it. Any help would be greatly appreciated. Thanks!
<style type="text/css">
div[id="bottomButton"] {
position: fixed;
bottom: -20px;
right: 45px;
border: none;
z-index: 50;
border-color: transparent;
width: inherit;
}
</style>
you are missing HTML doctype in your code. Try below code.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style type="text/css">
#bottomButton {
position: fixed;
bottom: -20px;
right: 45px;
border: none;
z-index: 50;
border-color: transparent;
width: inherit;
}
</style>
</head>
<body>
<div id="bottomButton">
<button>mybutton</button>
</div>
</body>
</html>
In my html page, I have two links located on the top of the page:
<div id='my-link'>
<a class="school" href="../school.html" target="_blank">School</a>
<a class="police" href="../police.html" target="_blank">Police</a>
</div>
(When mouse click on the link, the linked page is supposed to be opened in a new browser window.)
the CSS:
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
a.school{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.police{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}
I tested on firefox 3.6.16, when I open the firefox browswer window with full screen, the links are working successfully ("school", "police" pages opened successfully,
CSS hover feature is also working).
BUT, if I open the browser window size not in full screen, the links are not working at all, the "school" and "police" pages are not open,
the CSS hover feature is not working either.
The link texts are like plain texts on the page. *WHY???*
My guess is that something else on the page that's positioned is above it. Can't be certain without seeing your whole page code though.
Try adding a z-index to your #my-link div
-- edit --
Sorry, with the nice range of CSS properties you'd already used I assumed you would have heard of z-index.
Replace
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
with
#my-link{
margin-top: 5px;
position: fixed;
z-index: 100;
margin-left: 22%;
width: 20%;
}
Lots of info on z-index at https://developer.mozilla.org/en/Understanding_CSS_z-index
-- edit --
Why it works
If x is horizontal and y is vertical, as on a graph, z is towards or away from you. Using a z-index will bring something towards you. You can overlap these properties as well.
Take this as an example. Copy it into Notepad (or similar), save it and take a look at the code to understand. Alter the z-index properties of each div in the style section to see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Z-Index Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div { width: 100px; height: 50px; border: 1px solid #000; }
#one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
#two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
#three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
</style>
</head>
<body>
<div id="one">Furthest away</div>
<div id="two">Nearest</div>
<div id="three">In the middle</div>
</body>
</html>
Naturally in HTML, the elements later on in the code would overlay the things that appear earlier. Using positioning to move things will affect where they sit in the natural flow of the page and may be overlapped. That's how I guesses your problem when I saw your fixed property in your CSS as you'd taken the div out of the natural flow.
Example - http://appdist.me
What I'd like to do is have the keyboard SVG fixed to the bottom of the screen and take up half the screen height, with the Facebook logo always overlaying the 'Q' key, no matter how the window is resized.
I've been trying to do this for days. What am I doing wrong? Thanks.
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>CSS Layout Problem</title>
</head>
<body>
<div id="svg">
<embed src="keyboard-gray.svg" id="keyboard"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="fb.svg" id="facebook"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="frame.svg" id="frame"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</div>
</body>
Here is my CSS:
body{
background-color: #333;
}
#svg{
}
#facebook{
position: fixed;
width: 6%;
height: 6%;
}
#frame{
position: fixed;
width: 100%;
height: 47%;
top: 2%;
left: 0;
}
#keyboard{
position: fixed;
width: 100%;
height: 50%;
bottom: 2%;
left: 0;
}
If you want to merge the images and make the SVG interactive, then you can use <a> tags in your xml (instead of <g>). Check out this IBM link for some ideas on how to achieve different types of interactivity.
Good luck - it looks like you have a fun project to play with.
Position the #facebook absolutely too and set the z-index so that it shows above the keyboard.
#facebook{
position: absolute;
height: 12%;
bottom: Y%;
right: X%;
z-index: 99;
}
Change X and Y so that it's above the Q key.