I will appreciate if somebody could help me to find how to solve out one problem, probably I need very simple thing but I don't know how to put it in one, so what I need - Section which include tick box, then button submit, but if you don't tick the check box and push the button appear window which says You must do....,
I've done it but I need this
but if you tick and push button should smoothly appear pop up window with just text information! I don't know how to get that,
This is thats section with checkbox and button
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" value="agree_terms" class="terms">
I´ve read terms and conditions and I´m ready to shop
<input type="submit" name="submit" value="" class="submit">
</form>
and this is javascript
function checkme() {
missinginfo = "";
if (!document.form.agree.checked) {
missinginfo += "You must agree to the Terms and Conditions";
}
if (missinginfo != "") {
missinginfo ="" +
"\n" +
missinginfo + "" +
"\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
return true;
}
}
I tried in Different Way
<body>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
But when I tick check box on the background appear window with the content but I need pop up window appear only after when I tick the box and push the button
"f you tick and push button should smoothly appear pop up window with just text information" - you've almost did it. Just add alert to the second branch. Try this code:
<!DOCTYPE html>
<html>
<!-- [[[ head -->
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
</script>
</head>
<!-- ]]] -->
<body>
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="submit" value="Submit" class="submit">
</form>
</body>
</html>
Related
function check_email() {
var at_present = false;
var email = document.getElementById("email").value;
if (email !== "") {
for (let i = 0; i <= email.length; i++) {
if (email[i] === "#") {
at_present = true;
break;
}
}
if (at_present == false) {
alert("Invalid email! # missing");
}
}
}
h1 {
text-align: center;
}
.background {
background-image: url("https://firebasestorage.googleapis.com/v0/b/diffusion-library.appspot.com/o/soldiers-at-a-distance-fighting-in-a-savana-biome-high-quality-little-blurred%2F1.jpg?alt=media&token=559b6e72-c738-4b56-889c-d4ad6466548d");
background-size: 1600px;
position: center;
background-position-y: -300px;
filter: blur(8px);
}
<!DOCTYPE html>
<html>
<head>
<title>MODULO ISCRIZIONE SOFTAIR</title>
<link rel="stylesheet" href="Modulo_softair_css.css">
</head>
<body>
<div class="background"></div>
<h1>MODULO ISCRIZIONE SOFTAIR</h1>
<div class="content">
<strong>Nome:</strong>
<br>
<input type="text" id="nome">
<br>
<br>
<strong>Numero di Telefono:</strong>
<br>
<input type="text" id="telefono">
<br>
<br>
<strong>Email:</strong>
<br>
<input type="text" id="email" onchange="check_email()">
</div>
<script>
</script>
</body>
</html>
The background isn't loading I don't know why. Before adding the div and class the background was loading correctly. Can somebody help me figure out why? This program is meant to be a web page for a form about softair, and I wanted to add a photo to the background with a blurred effected so that it wouldn't disturb. As I said before, I had the background in the body without the div, but when I tried to blur, it blurred the whole body. So i made the class but now it isn't working.
Thanks
Tried removing some adjectives form the css but I had no luck.
I have the situation where I want to blur and unblur a background dynamically based on the inclusion of text in an input.
The unblur happens nicely, however, the re-blur on clearance of the input is not working? Not sure if I've just been staring at this too long, but hitting up SO because I'm slowly going insane looking at this. Thanks in advance for any help!
Code below:
<div>
<form name="search" class="searchBarClass" action="/action_page.php" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="searchInput" onkeyup="unblur();blur();">
<button type="submit"><span class="material-icons">search</span></button>
</form>
</div>
<div id="background"></div>
Script for update:
function unblur() {
document.getElementById("background").style.filter = "none";
}
function blur() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
document.getElementById("map").style.filter = "blur(2px)";
}
}
The intention is to blur the background whenever the input is empty. Here's some minimal code that accomplishes that:
const bgDiv = document.getElementById("background");
// blur background image when input is empty
function blurOnEmptyInput() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
bgDiv.classList.add('blur');
} else {
bgDiv.classList.remove('blur');
}
}
/* style with CSS instead of embedding in JavaScript function */
.bg-image {
background-image: url("https://picsum.photos/300/100");
height: 100px;
width: 300px;
border: 1px solid gray;
}
.blur {
filter: blur(2px);
}
div {
margin: 1rem 0 0 1rem;
}
<div>
<form name="search">
<input placeholder="Search.." name="searchInput"
onkeyup="blurOnEmptyInput();">
</form>
</div>
<div id="background" class="bg-image blur"></div>
I've found tutorials that make an image hidden with some css, javascript and html but I'm having trouble making the image hidden first, and then having the button be able to make it visible and then hidden if pressed again.
edit: hopefully this code should help! Again, sorry I can't figure some of this out, I don't really know how this site works and I'm pretty new to coding,,,,
edit 2: I added where the function is being called. It's suppose to be a multiple choice that shows an image when correct!
<style>
div.notdropdown {
margin-top: 100px;
margin-bottom: 100px;
border: 1px solid black;
background-color: rgb(181, 204, 180, 0.9);
}
.hide{
display:none;
}
</style>
</body>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="myDIV">
<img class= "hide" src="https://www.merriam-webster.com/assets/mw/static/art/dict/frig_bi.gif">
<br>
<a class= "hide" href="https://www.merriam-webster.com/dictionary/frigate%20bird">https://www.merriam-webster.com/dictionary/frigate%20bird </a>
<br>
</div>
<h1>What is a Frigate?</h1><br>
<form >
<input type="radio" name="choice" value="Bird"> A type of Bird
<input type="radio" name="choice" value="Mangrove"> A type of Mangrove tree
<input type="radio" name="choice" value="Sea Creature"> A type of Sea Creature
<input type="radio" name="choice" value="None"> None of These
</form>
<button onclick="submitAnswer();"> Submit Answer</button>
</body>
<script>
function submitAnswer() {
var radios = document.getElementsByName("choice");
var i = 0, len = radios.length;
var checked = false;
var userAnswer;
for( ; i < len; i++ ) {
if(radios[i].checked) {
checked = true;
userAnswer = radios[i].value;
}
}
if(!checked) {
alert("please select choice answer");
return;
}
// Correct answer
if(userAnswer === "Bird") {
myFunction();
alert("Answer is correct!");
}
// incorrect answer
else {
alert("Answer is wrong!");
}
}
</script>
</body>
</html>
in fact it's very simple, just use the toggle method, which allows you to easily enable and disable a class in an element
function toggleImage(){
document.querySelector('#image').classList.toggle('hidden');
}
.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}
<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>
to work with a link to just change the tag to a and use href="#"
function toggleImage(){
document.querySelector('#image').classList.toggle('hidden');
}
.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}
<a onClick="toggleImage()" class="w-100 mb-10" href="#">Show/Hide</a>
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>
You just need to call your function on button tag. Add a button in your html file on which you want your div to toggle. As you are using function name myFunction, call it on that function using
onClick="myFunction()"
And your code should work fine. Don't need to add any new class or even hide your div by default.
check this code. I think this will help you.
<button id = "showhide" onclick = "showhide()">Show Hide Image</button>
<div id = "image" style="width: 100px; height : 100px;">
<h4> Image Code </h4>
</div>
<script>
$('#showhide').on('click', function(e){
$("#image").toggle();
});
</script>
I want to make a gallery for my website. I developed the code to add an image, but I want to add an edit button to images, like Facebook.
I want it so when you pass the mouse on the image, you can the see an edit button.
I've searched a lot but without anything helpful.
Here's my code:
<?php
if(isset($_POST['upload_img'])){
$file_name = $_FILES['images']['name'];
$file_type = $_FILES['images']['type'];
$file_size = $_FILES['images']['size'];
$file_tmp = $_FILES['images']['tmp_name'];
if($file_name){
move_uploaded_file($file_tmp,"img/$file_name");
}
}
?>
<html>
<head>
<title>Test upload img</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload Image</label><br>
<input type="file" name="images"><br><br>
<input type="submit" value="upload img" name="upload_img">
</form>
<?php
$folder="img/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file=readdir($handle))!=false){
if($file==='.' || $file==='..')
continue;
echo'<img src="img/'.$file.'"width="150" height="150">
<form>
<input type="file" value="Edit">
</form>
';
}
closedir($handle);
}
}
?>
</body>
</html>
hope this help.
HTML:
<div class="image_container">
<input type="file" class="edit_btn" value="Edit">
<img src="img.jpg">
</div>
CSS:
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }
I have been working on creating a popup with some different functionality. It is being used as a pop for users to subscribe to my website. I have added in a form connected my DB, which is all working great. I am now trying to add some custom features.
I am trying to add some overlay (faded) to my background of the popup so my homepage is faded out in the background of the popup
I need to add in a input type field (if possible) to close my form. * I have added in a image with a X, if there is not input type option I will use this to exit the form
Here is my code:
JavaScript:
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') {
document.getElementById('ac-wrapper').style.display = "none";
}
else if(localStorage.getItem("popupWasShown") == null) {
localStorage.setItem("popupWasShown",1);
document.getElementById('ac-wrapper').removeAttribute('style');
}
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
function hideNow(e) {
if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}
HTML:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
<div id="popup">
<img alt="#" class="close-image" src="Assets/images/Deep_Close.png" />
<form name="Mail_list" action="save.php" method="post">
<br/>
<h4>Subscription</h4>
<br/>
<div class="form-group">
<label for="first_name">First Name: </label>
<input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
</div>
<div class="form-group">
<label for="last_name">Last Name: </label>
<input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required />
</div>
<div class="form-group">
<label for="email">User Email: </label>
<input type="text" name="email" id="email" size="25" placeholder="Email" required />
</div>
<br/><br/>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
}
#popup{
position:absolute;
display:hidden;
top:300px;
left:50%;
width:500px;
height:auto;
margin-left:-250px;
background-color:white;
z-index:6;
padding:20px;
border:solid 5px #333333;
border-radius:5px;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-15px;
right: -15px;
height: 20px;
}
As you can see I have added in the 'Overlay' CSS already, I just am not sure how to implement this in my popup to make the functionality work.
Also, the 'close-image' CSS will be used to close the form if their is no input type available to close the form (which I haven't been able to find), How do I implement this is my JavaScript?
For the overlay, give it position: fixed and place it outside of your other elements. You want it to be 'fixed' to the body, so with 100% height and width it'll cover the full page, effectively.
Just build your overlay/ form to look how you want - with all elements visible, then handle the show/ hide afterwards in your JavaScript.
To close the form, just have a click handler to hide both the form and the overlay when the given element is clicked. See a brief example:
var closeImage = document.getElementById('close-image');
var overlay = document.getElementById('overlay-back');
var formWrapper = document.getElementById('ac-form-wrapper');
// Hide the elements & do other stuff you may want..
function hide() {
overlay.style.display = "none";
formWrapper.style.display = "none";
}
// Call this whenever you want to show stuff.
// In this case, it would go inside the setTimeout
// function also.
function show() {
overlay.style.display = "block";
formWrapper.style.display = "block";
}
// Click handler for the image element.
closeImage.addEventListener("click", function() {
hide();
}, false);
It may be better to change the close-image element to be an ID instead, it's easier to target in native JavaScript, and the element probably doesn't need to be a class anyway.