I am following a tutorial to disable copy pasting from an iframe:
How do you disable copy paste within an iframe?
The problem with this is that it makes the HTML unusable on a mobile device. Is there any modification to the code that I can do that allows for scrolling?
Here is my code so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'notes/styles.css' %}">
<title>Document</title>
</head>
<body>
<div id="container">
<div id="overlay">
</div>
<iframe src="https://notioniframe.com/notion/2elm152pfy9" frameborder="0"></iframe>
</div>
</html>
and this is the css file:
#overlay {
width:580px;
height:500px;
z-index: 1;
background-color:rgba(255,255,0,0);
}
iframe {
width:600px;
height:500px;
}
#container {
position: relative;
}
#overlay, iframe {
position: absolute;
top: 0;
left: 0;
}
Related
Current condition of site
I want to make sure that the choose file button should be positioned at the upload image position. I am new to HTML and CSS.
<!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>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="class">Upload Image</div>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>
</body>
</html>
You can put the "choose file button" inside the "upload image" div. You can then position them to achieve what you want. Try this
<!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>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
<style type="text/css">
.class {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#myFile {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<form action="/action_page.php">
<div class="class">
Upload Image
<input type="file" id="myFile" name="filename">
</div>
<input type="submit">
</form>
</body>
</html>
Add the appropriate css attribute to the class fullscreen table-cell valign-middle text-centerwhich is having a input element.
body {
margin : 0px;
}
.fullscreen {
width : 100vw;
height : 100vh;
}
.table-cell {
display : table-cell;
border: 1px solid red;
position: relative;
width : 200px;
height :200px;
display:flex;
align-items: center;
}
.valign-middle {
vertical-align : middle;
}
.text-center {
text-align : center;
}
<!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>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="fullscreen table-cell valign-middle text-center">
<input type="file" id="myFile" name="filename"></div>
<form action="/action_page.php">
<input type="submit">
</form>
</body>
</html>
I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!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>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!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>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>
HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>
As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!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>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>
Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});
Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>
I have the below HTML. For some reason the page is being rendered with the head as text like:
Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form
I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.
<!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>Document</title>
<style>
* {
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)
I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window
.......
then for the
Document
{ display: block; width: 300px; } textarea { height: 300px; }
that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below
<!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>Document</title>
<style>
{
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
I am trying to use Visual Studio Code (VSC) to practice on. When I update my index.html file, the live server will change. When I update my style.css file, the live server will not change. Is something wrong with the way I'm doing CSS?
My code so far in index.html:
<!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>Product Landing Page</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/12_powerhouse_vegetables_slideshow/intro_cream_of_crop.jpg"
alt="logo"
class="logo-image">
</div>
<div class="links">
How it's Done
Available
Buy
</div>
</nav>
</body>
Code in style.css:
* {
margin: 0;
}
body {
background-color: white;
color: rgb(70, 69, 69);
font-family:Arial, Helvetica, sans-serif;
}
.navbar {
position: fixed;
top: 0;
min-height: 60px;
padding: 0px 20px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffffee;
}
Issue 1
Import style.css with <link> tag inside <head> tag. For exapmle,
<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>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
Issue 2
Maybe this is a typo:
❌background-color: #ffffffee;
✅background-color: #ffffee;
You haven't linked your style.css file with index.html so that is why it is not updating live. To do that create this code under Meta tag.
hope it resolves the issue.