I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a <div> which will dim all elements except a specific region which is in a fixed width, height, top and left.
The problem is, I cannot find a way to "cancel" the parent's background-color (which is also transparent).
In the snipped below, hole is the div that is supposed to be without any background-color, including its parent's.
Can this be accomplished at all? Any ideas?
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}
<div id="bg">
<div id="hole"></div>
</div>
Here's a mockup image of what I'm trying to achieve:
You could do it with just one div and give it a box-shadow.
EDIT:
as #Nick Shvelidze pointed out, you should consider adding pointer-events: none
Added vmax value for box-shadow as #Prinzhorn suggested
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
You can create an SVG which is filled with a path that has the hole where you need it to. But I guess than you need to find a way to handle clicks, since all of them will be targeted to the overlaid svg. I thing document.getElementFromPoint can help you here. mdn
This can also be done similarly to #VilleKoo's answer, but with a border.
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}
<div></div>
You can achieve the same as in VilleKoo's answer using CSS outline property. It has excellent browser support (and works also in IE8+). Outlines have the same syntax as borders, but unlike border they don't take up space, they are drawn above the content.
Also for IE9+ you can replace 99999px with calc(100 * (1vh + 1vw - 1vmin)).
Disadvantage of this approach is that outline is not affected by border-radius.
Demo:
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* IE8 */
outline: 99999px solid rgba(0,0,0,.3);
/* IE9+ */
outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
/* for other browsers */
outline: 100vmax solid rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
Here is simple jQuery code using #VilleKoo css
var Dimmer = (function(){
var el = $(".dimmer");
return {
showAt: function(x, y) {
el
.css({
left: x,
top: y,
})
.removeClass("hidden");
},
hide: function() {
el.addClass("hidden");
}
}
}());
$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });
.dimmer {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
pointer-events: none;
}
.hidden { display: none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="submit" disabled>
</div>
<input type="button" value="Hide" class="btn-hide">
<input type="button" value="Show" class="btn-show">
<div class="dimmer hidden"></div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
#bg {
background-color: gray;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998;
}
#hole {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
z-index: 99999;
}
Related
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
Here is the jsfiddle link https://jsfiddle.net/109qve4t/
Here is the code for a mobile website design.The problem here i face is that my form remains static on the window.But what i want is tha the form should jump to the top of the window as the user writes his query in the "Enter your starting" city text box.I dont want to use jquery to accomplish it.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
#form_1 {
width: 20%;
}
}
#form_1 {
position: relative;
border-radius: 15px;
width: 80%;
margin: 15% auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
display: table;
border :solid 2px black;
padding: 15px;
}
.row {
display:table-row;
}
.row label {
text-align: right;
}
</style>
</head>
<body>
<div id="yt" >
<img src="bg.jpg" class="bg">
<form id="form_1" tabindex="0">
<label>Enter Starting City</label>
<div class="row">
<input type="text" name="s_city"></br>
</div>
<div class="row">
<label>Wait While The Cities Appear
</label></br>
<textarea rows="10" cols="30"></textarea></br>
<div class="row">
</form>
</div>
</body>
</html>
I don't think that you can do that without jquery or other javascript. Mostly cause you have to detect focus/blur on a child element (the input) and then modify the parent (form). CSS rules don't have the ability to change parent behaviour.
Some kind of user action is required. A solution using jQuery would be following:
https://jsfiddle.net/6gbk76fx/4/
$(function () {
$('form input, form textarea').on("focus", function (event) {
$(event.target).closest('form').addClass('jump');
});
$('form input, form textarea').on("blur", function (event) {
$(event.target).closest('form').removeClass('jump');
});
});
how does one position a html element in front of another so that when one a particular element is hovered over the new element will appear in front of it.
here is my code:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
i have a tooltip and it works so far. but when i hover over the textarea it shoves the element below it downwards so that the tooltip can fit in on the page and when i move the mouse so to 'unhover' it, the element re positions upwards. i want a way when i hover, a message box is brought to the front and all the elements underneath do not move. much like when you hover any links on this page, they bring up a little dialog box which is only there on hover and DOES NOT reposition other elements on the page.
You need to specify z-index and position property; for example:
p#tooltipbox{
z-index:1000;
position:absolute;
top:0;//move the element to the top of div.third of div.third
left:0;//if you want to move the element to the left;
}
div.third{
position:relative;
}
here's more information
z-index property
position propery
I created a jsfiddle for you. Click the following link to see an example:
http://jsfiddle.net/xL7j4k6g/
Refer to the link above, but here is also the code:
.fieldarea {
position: relative;
border: 1px solid red;
width: 50%;
}
.fieldarea label {
width: 35%;
display: inline-block;
}
.fieldarea input {
width: 50%;
display: inline-block;
}
.tooltipbox {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
max-width: 200px;
border: 1px solid gray;
background-color: yellow;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fieldarea:hover .tooltipbox {
opacity: 1;
}
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
(This doesn't look "cool" but works. I'd recommend looking into CSS3 transitions to some nice transformation touches - e.g. fade in the tooltip on hover.)
Thanks,
David
You can use absolute positioning and jQuery. This is not perfect but a simple example.
$(document).ready(function() {
$('.box1').hover(function() {
$('.box2').toggleClass('active')
})
})
.wrapper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
border: 2px solid black;
background-color: white;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 100;
background-color: red;
}
.active {
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I have a main div. Inside the div, I have an image. I want to place a text field and a button at a specific position on top of the image. Both of them should be transparent so that the users feels that they are writing on top of the image.
My question is how is this best solvable? Is it to make a div that contains those two and place the div in correct position using CSS? Or is there some kind of javascript I could use?
Also, when I hover over the button, I want it to replace the image with a new image.
I made a Fiddle on how it looks like. Here is the code from that fiddle.
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:147px;
top:472px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
position: absolute;
left: 165px;
}
.formcodeaktiv {
left: 5px;
position: absolute;
}
This is my solution, but please, read #Chandranshu advices:
HTML
<form>
<div class="iphone">
<div>
<input type="text"/>
<button></button>
</div>
</div>
</form>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.iphone {
position: relative;
width: 317px;
height: 595px;
background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}
div.iphone div {
position: absolute;
bottom: 122px;
left: 71px;
}
div.iphone div > * {
display: block;
float: left;
padding: 0;
margin: 0;
border: none;
background: transparent;
appearance: none;
border-radius: 10px;
outline: 0;
}
div.iphone input {
line-height: 10px;
width: 148px;
height: 10px;
padding: 5px;
background: #fff;
}
div.iphone button {
margin-left: 5px;
width: 50px;
height: 20px;
cursor: pointer;
}
http://jsfiddle.net/coma/jXCS3/
I've just updated my jsfiddle to show you the benefits of using position relative on the container and absolute on its children (try resizing the textarea):
http://jsfiddle.net/coma/jXCS3/4/
I have updated your jsfiddle to 'almost' solve your problem. Here is the updated code:
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" placeholder="Skriv in aktiveringskoden"/>
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
top:451px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
border: 0;
outline: none;
position: absolute;
left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
left: 72px;
position: absolute;
padding-left: 5px;
border: 0;
outline: none;
width: 153px;
color: black;
background-color: transparent;
}
Significant changes:
Your absolute positions were not right. Just correcting the positions positioned the inputs on top of the image.
Then you need to add border: 0 and outline: none to get rid of their borders.
Make sure that you also include the :focus and :active pseudoclasses because otherwise the borders will show up when the user starts typing.
Move the styles from your HTML to the CSS file. It's annoying to have inline styles.
Add a placeholder attribute to the text field. That way when the user starts typing, the placeholder text will disappear. If you keep the text in the image, user typed text will appear on top of the grey hint text.
Since you've also asked about the best way to solve this, let me answer that as well. If you can edit the image, just white out the area where the text field and the button are supposed to be and then use a pure CSS solution to render the them as you want. You can get the rounded corners using border-radius and use an image sprite for different states of the button.
I want to create a sort of light/thick box that only acts on a single DIV within a page.
When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.
What am I doing wrong?
Here is what I have so far:
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.zIndex = 100;
document.getElementById('phantom_back').style.height = '100%';
document.getElementById('phantom_back').style.width = '100%';
phantom_top();
}
function phantom_top(image)
{
document.getElementById('phantom_top').style.zIndex = 102;
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.top = 0;
document.getElementById('phantom_top').style.left = 0;
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
</div>
</body>
</html>
I was wandering why none of the tutorials I've been able to find offer something like this.
So, I got it. I set an absolute positioning on phantom_back and instead of trying to restack them I just set the visibility. When I tried to set the z-index it would fall apart on me.
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.height = 700;
document.getElementById('phantom_back').style.width = 700;
document.getElementById('phantom_back').style.zIndex = 50;
phantom_top();
}
function phantom_top()
{
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.visibility = "visible";
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="margin: 0 auto; text-align: center; height: 10px; width: 10px; position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
</div>
</body>
</html>
phantom_top is set to position:relative not absolute therefore it's currently not overlapping phantom_back.
Don't forget to concatenate a px string for height and width. You don't need the px for z-index
document.getElementById('phantom_back').style.height = 700 + "px";
Like that.