I am very new to programming and I am trying to setup a dark overlay over a whole page of my site, except some content with z-index. But the issue is the following, I need to be able to close/disable the dark overlay once I press on the overlay, I have not been able to find a way to do it on Google or on Stackoverflow. The only way I have seen it done is by using a button but that won't work in my instance, I just want to be able to disable the dark overlay when you click on any part of the dark overlay.
Any ideas to solve this?
You should use JavaScript (and jQuery) for that:
Event listener for click and then hide overlay
$(document).click(function() {
$('#overlay').css('display', 'none');
});
#overlay {
position: absolute;
top: 0;
left: 0;
background-color: grey;
width: 100%;
height: 300px;
opacity: 0.6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
This is the content below the overlay
</div>
<div id="overlay">
</div>
Related
I have a button in html.
Button is partially covered by canvas (with transparent background) and I can't click it in area covered by canvas.
It is very complicated form rich in graphic and moving these things will require a lot of work.
Is is possible to make canvas "invisible" for mouse click?
Just make button position:relative. It will allow you to click on button.
button {
position: relative;
}
canvas {
background-color: black;
margin-left: -30px;
}
<button>click</button>
<canvas width="100" height="100" />
Try a z-index on the button and canvas.
button, canvas {
position: relative;
}
button {
z-index: 1;
}
canvas {
z-index: 0;
}
You can use z-index in your css to apply a z-order. z-index
Maybe try something with z-index?
Button:
z-index: 1;
Canvas:
z-index: 0;
So, I'm really, really a noob when it comes to HTML/CSS, so I apologize already.
So, what I need to do, is center an image (so that it's centered also at different resolutions/screens), on mouseover change the image to another source, and also make it act as a link to another web page.
At HTML I have this:
<a href="url to the webpage">
<img class="Logo" src="Logo.png">
</a>
And at CSS I have this:
img.Logo{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
So I have it nicely centered and acting as a link too, but I have absolutely no freaking idea how to make it show another image on mouseover. I'm sorry if this has been asked before or if this is a really simple question, I tried googling it out but none gave me an answer that's simple enough for me. :|
use the css if you don't have position: absolute-
img {
margin: 0 auto;
}
if you want to apply position: absolute then use this css-
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* make sure to add all the vendor prefixes */
}
for the mouseover effect use this JS-
document.getElementsByClassName('Logo')[0].onmouseover = function() {
this.src = 'yourAnotherImgUrl';
}
if you want to revert back to the image when mouse is out then use this JS -
document.getElementsByClassName('Logo')[0].onmouseout = function() {
this.src = 'yourOriginalImgUrl';
}
<a href="url to the webpage">
<img src="Logo.png" onmouseover="this.src='your_other_image'"
onmouseout="this.src='Logo.png'" />
</a>
Using JavaScript you can have the default image displayed before the onmousehover event changes the image to a second image, then back to the original upon the onmouseout event being triggered.
If I create an isometric grid of tiles using only HTML (each grid item being a diamond-shaped image), the tiles overlap on the corners. So, clicking on one will likely click the image that is overlapping it.
I can use JavaScript to get the X/Y of the mouse click event and determine which image was clicked. I can use HTML5 and, similarly, translate the X/Y of the click into an image.
I'm looking into using SVG to rotate images 45 degrees. Then, they don't overlap. I can use an on-click on the SVG objects. So far, this appears to be the simplest method of handling click events in isometric view in HTML.
Is there a method of displaying non-square objects in HTML that I've overlooked?
Long time since this question was asked, so most probably you already found the answer that you were searching for, but I would like to clarify it for anyone reaching here with the same doubt.
If you apply CSS transformations to an HTML element, you don‘t need to make any JavaScript calculation to know if it was clicked. Looking at your comment it seems that you think that the mouse events work in the element boundary box instead of the element itself, but it doesn‘t work in that way. The mouse events are triggered when the area respective to the element is clicked, respecting its transformations.
Take a look at this small snippet. The tiles have been transformed with CSS transformations, click on the tiles so you can check that the events are triggered taking into account the diamond shape of each one.
document.querySelectorAll('.isometric').forEach(tile => {
tile.addEventListener('click', function () {
this.dataset.active = 1 - (this.dataset.active || 0);
});
});
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
left: 50%;
position: relative;
top: 50%;
transform: translateY(-100px);
}
.isometric {
background-color: #CCC;
height: 100px;
outline: 2px solid #FFF;
position: absolute;
width: 100px;
}
.isometric[data-active="1"] {
background-color: #F00;
}
<script src="https://unpkg.com/isometric-css#2.2.3/index.js"></script>
<div class="container">
<div class="isometric" data-view="top" ></div>
<div class="isometric" data-view="top" data-right="100"></div>
<div class="isometric" data-view="top" data-left="100" data-left="100"></div>
<div class="isometric" data-view="top" data-right="100" data-left="100"></div>
</div>
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.
Is it possible to manually scroll a JPG inside a div with 'little hand' cursor by grabbing and draging the actual image?
Just when for example you have long horizontal bitmap and want to show it in small window so people scroll like in photo editors when you zoom in.
You need some JavaScript magic to do this. Check this out: http://jsfiddle.net/bCuGM/.
<style type="text/css">
#container {
width: 400px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
#draggable {
width: 1024px;
height: 819px;
}
</style>
<div id="container">
<div id="draggable">
<img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
</div>
</div>
<script>
$("#draggable").draggable();
</script>
You can do it by using javascript and a bit of css.
On your image add a css rule with :
cursor: pointer;
using javascript, add mousedown, mousemove and mouseup events on your image. Then use javascript to change the scroll on the parent div