bring background on opacity 0.5 except pop-up form - javascript

I make a profile page and when the user will upload a picture, I will show a pop-up form-element. If I bring it visible, the opacity of my body-tag, I bring it to 0.5 except the pop-up form and that is my problem. It has also an opacity of 0.5.
document.getElementById('uploadfoto_button').addEventListener('click', function(){
toonUploadFoto();
});
function toonUploadFoto(){
document.getElementsByTagName('body')[0].style.opacity = 0.5;
document.getElementById('uploadfoto').style.visibility = "visible";
document.getElementById('uploadfoto').style.opacity = 1;
}
#uploadfoto {
visibility: hidden;
z-index: 3;
position: fixed;
background-color: white;
padding: 5px;
border-radius: 5px;
width: 600px;
box-shadow: 3px 3px 5px black;
margin: 5% 10%;
}
img.profiel {
width: 200px;
height: 200px;
background-size: cover;
float: left;
position: absolute;
}
span.upload {
position: absolute;
background-color: rgba(0,0,0,0.3);
width: 200px;
height: 50px;
cursor: pointer;
top: 276px;
line-height: 50px;
text-align: center;
z-index: 2;
}
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="Profielfoto" class="profiel"/>
<span class="upload" id="uploadfoto_button">upload image</span>
<form action="" method="POST" enctype="multipart/form-data" id="uploadfoto">
<p>Select image:</p>
<input type="file" name="fileToUpload" id="fileToUpload"/>
<input type="submit" value="Upload image" name="submit"/>
</form>
Can anyone help me? Thanks.

See https://jsfiddle.net/7pLxnrrb/1/
You can use an overlay div that'll cover the page with a high z-index and set poup's zindex to something higher.
CSS:
.overlay
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.7);
z-index: 100;
}
HTML:
<div id='overlay' class='overlay' style="display:none;"></div>
<form style='z-index:101;'
JS:
document.getElementById('overlay').style.display = 'block';
Hide the overlay when the form closes.

Related

How to turn an overlay into a giant button

I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.
Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
You don't necessarily need JS :)
#overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 2s;
background: gold;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
}
#overlay-handler:checked ~ #overlay {
visibility: hidden;
opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
<h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>
If you set the overlay to have position: fixed and proper z-index it would cover the page by default.
Then declare a click listener on it to either set its display to none or remove it from the DOM.
Just don't use it as a container for the real content
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});
#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}
<div id="overlay">
Click me to interact
</div>
<div>
This is the real content But you can't click me without closing the overlay
</div>
You can make the overlay disappear when the body of the HTML is clicked.
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>

HTML button inside label doesn't trigger file upload

I want to use the label for trick to create custom file input:
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
But when I click the button inside the label it doesn't not open the file popup, only when I click outside it's working. How can I do this?
<section>
<label for="test">
<input type="file" id="test">
<button onclick="document.querySelector('#test').click()">Click me</button>
</label>
</section>
You can trigger a click Event on your button that simulates a click on the input
Input should be in the front of button element and set the with as the width of button.
See the snippet, I made some change.
input[type="file"] {
opacity: 0;
overflow: hidden;
position: absolute;
width: 61px;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
position: relative;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
You can give the label inside the button tag and try it.
Be sure to reset the button padding and give styles to the label tag.
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
}
button {
padding: 0;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
padding: 1px 7px 2px;
}
<section>
<input type="file" id="test">
<button><label for="test">Click me</label></button>
</section>
JSFiddle link

How to achieve fullscreen editor on button click using jquery

I have a editor. I want to make it fullscreen on certain button click.
Actually I want to acheive CKEditor like maximize feature through jauery,
Please see this link:
http://ckeditor.com/demo
This demo maximize button is there. I want to achieve same using jquery.
Besides from appending (and removing) a CSS class on it when a button is clicked with JavaScript, you can also use a few CSS tricks:
#full-screen-toggler:checked ~ #youreditor {
z-index: 9999;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: 0px;
}
#youreditor #fslabel::after {
content: "enter fullscreen";
cursor: pointer; /* optional */
}
#full-screen-toggler:checked ~ #youreditor #fslabel::after {
content: "exit full screen";
}
/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
border-radius: 2px; border: 1px groove white; }
<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
<label id="fslabel" onclick="" for="full-screen-toggler" />
</div>
Assign the user window's dimension to container, by window.innerWidth and window.innerHeight
css:
.container { width:200px; height:100px; background:#ccc; }
html:
<div class='container'>
<button class='maximize'>Maximize</button>
<button class='minimize'>Minimize</button>
</div>
javascript:
$('.maximize').on('click', function(){
$('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
$('.container').css({'width':'200px' , 'height': '100px'});
});
working example
link: http://jsbin.com/raduqihibo/edit?html,css,js,output
Working Fiddle
You could acheive that using custom css class :
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Hope this helps.
$('#maximize').on('click', function(){
$('#container').toggleClass('full-screen');
})
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
div{
width:100px;
height:100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<button id='maximize'>[]</button>
</div>

Can't make checkbox custom image show check mark

I have added CSS in to customize the images on my checkmark boxes, when clicked it's supposed to show the image with a checkmark in it. However upon testing it does not work.
I Used the CSS and the HTML from this stack overflow to implement the custom images for checkboxes multiple pairs. The Sprite has each icon stacked 50 px in heigh.
Not 100% certain where I went wrong to make it not work, what could be wrong with my code to not make the checkbox check and uncheck?
fiddle
<html><head>
<style>
#font-face {
font-family: 'Scribble Box'; /*a name to be used later*/
src: url('/scribbleboxdemo.ttf'); /*URL to font*/
}
.scribblebox{
font-family: 'Scribble Box';
font-size: 50px;
}
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
float: left;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
#station_C{
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
.hover {
color: green
}
#wrapper {
width:4000px;
clear:both;
}
#first {
border: 3px solid black;
width:300px;
float:left;
}
#second {
border: 3px solid black;
width:300px;
float:left;
}
#third {
border: 3px solid black;
width:200px;
float:left;
}
input[type=checkbox]{ display:none; }
input[type=checkbox] + label{
background-image: url('/checkmarkboxes.png');
display: block;
height: 50px;
padding: 0;
width: 48px; }
#lightblue + #lightblue_s{ background-position: 0 50; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }
</style>
<div id="wrapper">
<div id="map">
<span id="station_A" class="overlay"><img src="/Bandana_top.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
<span id="station_C" class="overlay"><img src="Bandana_top.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#8fc0ff"></span>
</div>
<p>
<div id="first">
<h2>
Choose a Color
</h2>
<input type='checkbox' name='methods' value='valuable' id="lightblue"/><label id="lightblue_s" for="lightblue"></label>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>'
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="paintbrush.js"></script>
<script>
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
Updated fiddle
I Figured this out, it seems when I defaulted back to the original code then added the custom images in for the checkmarks everything worked. So I assume I messed up the codeing some how.
<style>
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
input[type=checkbox]{ display:none; }
input[type=checkbox] + label{
background-image: url('checkmarkboxes.png');
display: block;
height: 50px;
padding: 0;
width: 48px; }
#lightblue + #lightblue_s{ background-position: 0 0; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A" id="lightblue"><label id="lightblue_S" for="lightblue"></label>
<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
</form>
</p>
<script>
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
<

HTML/CSS Help I cant't position my search box

for some reason my search box is stuck right under my logo every time I try to move it. Here is my code
.searchbox{
position: absolute;
top:50px;
right: 50px;
}
And my HTML
<div class="headerMenu">
<div id="wrapper"">
<div class="logo">
<img src="./img/logo.png" />
<div class="seachbox">
<p style="margin-right: 1px;"></p>
<form action="search.php" methond="GET" id="search" >
<input type ="text" name="q" size"60" placeholder="Find Surfers...">
My logo css doesn't have position: relative
.logo{
width: 125px;
}
.logo img{
width: 150px;
height: 38px;
padding-top: 5px;
}
That's probably because .logo has position: relative;. Throw out the searchbox from the .logo div. That isn't a part of the logo, is it?
Do something like this
header{
width: 100%;
height: 70px;
background-color: #eee;
position: relative;
padding: 25px 0;
}
header #logo{
width: 150px;
height: 60px;
background-color: orange;
line-height: 60px;
}
header #searchbox{
position: absolute;
top: 50px;
right: 50px;
}
<header>
<div id="logo">Logo</div>
<input type="text" id="searchbox" value="Search...">
</header>

Categories