Here is a example of a javascript popup:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
How would you modify this so that the popup disappears if you click anywhere outside the popup? I am using html5 and javascript within an epub3 document.
$('#trigger').bind('click touch', function(){
$('#tooltip').show();
});
$(document).bind('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#trigger')) {
$('#tooltip').hide();
}
});
// Stop propagation to prevent hiding "#tooltip" when clicking on it
$('#tooltip').bind('click touch', function(event) {
event.stopPropagation();
});
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
body {
font-size: 14px;
line-height: 1.5;
font-family: Helvetica, Arial, sans-serif;
color: #000;
}
#container {
position: relative;
min-height: 100%;
width: 100%;
max-width: 960px;
margin: 0 auto;
zoom: 1;
}
#trigger {
width: 200px;
height: 200px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 22px;
line-height: 200px;
color: #fff;
background: #ccc;
cursor: pointer;
}
#trigger:hover {
background: #0A9E01;
}
#tooltip {
display: none;
position: absolute;
left: 10px;
top: 10px;
width: 250px;
padding: 20px;
font-size: 18px;
color: #fff;
background: #222222;
}
<!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" xml:lang="en">
<head>
<!--Meta Tags-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="mihai vaduva" />
<meta name="email" content="" />
<meta name="copyright" content="" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<meta name="robots" content="noindex, nofollow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--Title-->
<title>Antimath - Hide if click outside</title>
</head>
<body>
<!--container-->
<div id="container">
<noscript>
<p class="warning">You have JavaScript disabled or are viewing the site on a device that does no support JavaScript.Some features may not work properly.</p>
</noscript>
<div id="trigger">
Click Me !
</div>
<div id="tooltip">
Now click anywhere to hide it.
</div>
</div>
<!--/container-->
</body>
</html>
Related
I need the strikethrough text with just the mouse click on the text.
List css is outside form line margin
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
const listaDeTarefa = $('#lista-de-tarefa').val();
const novoItem = $('<li></li>');
$(`<li>${listaDeTarefa}</li>`).appendTo(novoItem);
$(novoItem).appendTo('ul');
$("li").click(function() {
$(this).addClass("riscado");
});
$('#lista-de-tarefa').val("");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
ul {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required /> <button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
There were some bugs, i commented on the spots:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required />
<button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul></ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
<script>
$(document).ready(function () {
//👇remove from the submit, otherwise it will add a new event every time, causing problems
//changed to on to make it target dynamic added elements
$("ul").on("click", "li", function () {
$(this).toggleClass("riscado"); //changed to toggle to be able to remove on click
});
$("form").on("submit", function (e) {
e.preventDefault();
const listaDeTarefa = $("#lista-de-tarefa").val();
$(`<li>${listaDeTarefa}</li>`).appendTo("ul");
$("#lista-de-tarefa").val("");
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
li {
cursor: pointer; /* 👈looks better this cursor where clicking does something */
user-select: none; /* 👈prevent selection for better UX */
}
.riscado { /* 👈 changed ul to the class */
text-decoration: line-through;
}
</style>
</body>
</html>
I'm new to CSS and HTML and I don't have enough knowledge to do my task!
Problem:
I don't want any space between the mountain image and the place where my blue layer is ending, Any solution?
NOTE Don't use the positioning element or any else CSS function, change this code only!
body{
margin: 0;
text-align: center;
font-family: 'Merriweather',serif;
}
h1{
margin-top: 0%;
font-family: 'Sacramento',cursive;
font-size: 5.625rem;
}
h2{
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
}
h3{
font-family: 'Montserrat',sans-serif;
}
.top-container{
background-color: #E4F9F5;
position: relative;
padding: 100px;
}
.mountain{
padding: 0%;
}
.middle-container{
/* background-color: red;
width: 200px;
height: 200px; */
}
.bottom-container{
/* background-color: blue;
width: 200px;
height: 200px; */
}
.problem{
text-decoration: underline;
}
.top-cloud{
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud{
position: absolute;
/* left: 300px;
bottom: 300px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deepak Kumar</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./assests/icon.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#700;800;900&family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="./assests/cloud.png" alt="cloud-image">
<h1>I'm Deepak.</h1>
<h2 class="description">a <span class="problem">pro</span>grammer.</h2>
<img class="bottom-cloud" src="./assests/cloud.png" alt="cloud-image">
<img class="mountain" src="./assests/mountain.png" alt="mountain-image">
</div>
</body>
</html>
I didn't add the whole code, because it was lengthy.
This piece contains enough code for you to understand it.
you can remove padding in your .top-container .
I hope this helps
The padding for top-container is keeping the mountain image from having no space at the bottom of the page. I've slightly altered the padding property to have zero padding on the bottom.
body{
margin: 0;
text-align: center;
font-family: 'Merriweather',serif;
}
h1{
margin-top: 0%;
font-family: 'Sacramento',cursive;
font-size: 5.625rem;
}
h2{
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
}
h3{
font-family: 'Montserrat',sans-serif;
}
.top-container{
background-color: #E4F9F5;
position: relative;
padding: 100px 100px 0 100px;;
}
.mountain{
padding: 0%;
}
.middle-container{
/* background-color: red;
width: 200px;
height: 200px; */
}
.bottom-container{
/* background-color: blue;
width: 200px;
height: 200px; */
}
.problem{
text-decoration: underline;
}
.top-cloud{
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud{
position: absolute;
/* left: 300px;
bottom: 300px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deepak Kumar</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./assests/icon.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#700;800;900&family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="./assests/cloud.png" alt="cloud-image">
<h1>I'm Deepak.</h1>
<h2 class="description">a <span class="problem">pro</span>grammer.</h2>
<img class="bottom-cloud" src="./assests/cloud.png" alt="cloud-image">
<img class="mountain" src="./assests/mountain.png" alt="mountain-image">
</div>
</body>
</html>
I dont know anything about javascript but I just have to make this work, how can i count the number of times people have clicked a button? The code for it is below. I want to count the amount of times EVERYONE has clicked the button, like if i clicked the button from another PC.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
body{
background-color: #2e2e2e;
}
.mainBtn{
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: 'Roboto', sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover{
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device -width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Don't Do It. DT</title>
</head>
<body>
<button class="mainBtn">Button</button>
</body>
</html>
You can count the times each user clicks with localstorage (it is saved to their browser only) (Read here: https://www.w3schools.com/jsref/prop_win_localstorage.asp)
But if you were to track from all users, you would need a database for that. For web apps, I would recommend firebase.
You should write a javascript because that will make your button think nad count how many times a button is pressed.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Example</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>The button has been clicked</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>
Click on Run Code Snippet For Demo
Check The Code Below code
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap");
body {
background-color: #2e2e2e;
}
.mainBtn {
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: "Roboto", sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover {
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}
p {
color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Don't Do It. DT</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>You Have Clicked Button</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>
Could somebody help me to make this square rotate after clicking the button in javascript? I am very beginner, have absolutely no clue. Maybe my css is not good enough, so I cannot find a solution in js?
All I can do is declare variables, that addEventListner should look like ("click", function()).
I can imagine function should contain initial position of this square (0), then add, for example 10deg to this initial position... And now I stuck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
</head>
<body>
<button>Obróć</button>
<div class="square"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
</style>
</head>
<body>
<button onclick="myFunction()">Obróć</button>
<div class="square"></div>
<script>
var initioalRv = 20;
function myFunction() {
var elements = document.getElementsByClassName("square");
for (var i = 0; i < elements.length; i++) {
elements[i].style.transform = `rotate(${initioalRv}deg)`;
}
initioalRv += 20;
}
</script>
</body>
</html>
This solevs your problem. I changed your code a bit
Added onCLick to button.
Add some css to animate the rotation.
Added the javascript part.
You will need to use some javascript:
document.getElementById('btn').onclick = () => {
document.getElementById('square').style.transform = 'rotate(90deg)';
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
transition: all 2s;
}
</style>
</head>
<body>
<button id="btn">Obróć</button>
<div id="square" class="square"></div>
</body>
</html>
I've been working on my portfolio site and I've been trying to use li tags to display the different projects. One problem that I noticed is that everytime I add content to the li, it steps down and refuses to stay inline like I want. In the example below, I added "pp" and the first li stepped down. Once the content is removed from the li, it goes back in its original line. Any help would be greatly appreciated.
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>
Just add the rule vertical-align: top; for your li selector
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
box-sizing: border-box;
vertical-align: top;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>