I manage a website and I have inserted a popup that explains the contents of the site, providing a choice to those who access it. I'm interested in knowing how to modify the javascript file, so that the same user doesn't see the page again for 24 hours, if he accesses the homepage again.
Thank you.
File Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Stylesheets-->
<link rel="stylesheet" href="PopUp/style.css">
</head>
<body>
<div class="popup">
<button id="close">×</button>
<h2><font color="red">A T T E N Z I O N E!!!</font></h2>
<p>
"""Site rules"""
</p>
Entra 18+
</div>
<!--Script-->
<script src="PopUp/script.js"></script>
</body>
</html>
File script.js
window.addEventListener("load", function(){
setTimeout(
function open(event){
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function(){
document.querySelector(".popup").style.display = "none";
});
File style.css
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;
}
.popup{
background-color: #ffffff;
padding: 40px;
width: 50%;
position: absolute; left: 50%; top: 10%;
height: auto;
margin-left: -25%;
height: auto;
display: none;
z-index: 100;
text-align: center;
border-radius: 30px;
color: #000;
}
.popup button{
display: block;
margin: 0 0 20px auto;
background-color: transparent;
font-size: 30px;
color: #c5c5c5;
border: none;
outline: none;
cursor: pointer;
}
.popup p{
font-size: 14px;
text-align: justify;
margin: 20px 0;
line-height: 25px;
}
a{
display: block;
width: 150px;
position: relative;
margin: 10px auto;
text-align: center;
background-color: #ff0000;
color: #ffffff;
text-decoration: none;
padding: 5px 0;
}
Google Translator
I expected the script to remember the user's choice, but I found this script online and it doesn't. I don't know how to program in Javascript, so I turn to you.
Google translator.
Related
I am using Concreate5 version 8.5.4 and PHP version 7.4 on my VPS.
I want to add a pop-up of notice to my users.
When I am adding this code in Global Region > HTML Block
then my site covered with black color and am not able to do anything.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
A simple pop-up!
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Is there any mistake in this coding, as I am reviewing this code then I am not able to pin point the actual part of code.
Please review this code and help me fix it for fine working.
Thanks
I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same
. I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
#include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
#include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
#include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}
The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some #media(max-width: ... px) settings.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
width: 70%;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: 0 !important;
}
/*
#include media {
height: 500px;
}*/
.inner {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
/* #include media {
width: 50%;
height: 100%;
}*/
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
/*#include media {
font-size: 30px;
}*/
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.Key{
margin-top: 50px;
}
.content-wrapper {
height: 100vh;
}
#media(max-width: 1000px) {
.Key, .subtitle {
font-size: 1rem;
}
}
#media(max-width: 750px) {
.Key, .subtitle {
font-size: 0.8rem;
}
.inner {
height: 70%;
}
}
#media(max-width: 720px) {
.Key, .subtitle {
font-size: 0.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-wrapper">
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
You have the width of .inner set to 500px.
That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100%, that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)
I'm new to javascript and jQuery, and I'm having trouble finding what's wrong with my code. I've written a very simple script that's supposed to change the text of a span on click, but I have to do two clicks to make it work. I have a slider, and the slider works perfectly on click, so I know that it's working on the first click, yet the text takes two clicks to change, and the two events are supposed to happen together. This is the code:
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});
/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}
<!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> Pricing Component </title>
<link rel="stylesheet" href="style.css">
<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=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Cause
The reason is that initially your price elements text() is " 19.99 ", not "19.99".
" 19.99 " == "19.99" // returns false
What's going on?
So when your click handler arrives here on your first click, it goes into your else branch, setting it to "19.99". Since doesn't change anything visually, you get the impression that "nothing happens on first click".
2nd click it does find "19.99", thus your comparison returns true, so this time your if-branch is executed.
Simplest way to fix it
To fix the issue, simply remove the leading and trailing space character from your
<span class="price1-span"> 19.99 </span>
so you end up with
<span class="price1-span">19.99</span>
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});
/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<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=Josefin+Sans&display=swap" rel="stylesheet">
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span">19.99</span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>
The initial text of the span has spaces around the price, but you don't have that in the string you're comparing with.
You can use .trim() to remove surrounding whitespace.
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text().trim() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});
/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}
<!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> Pricing Component </title>
<link rel="stylesheet" href="style.css">
<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=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 30%;
left: center;
width: 98%;
height: 50%;
}
html {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
margin-top: 20px;
margin: 1%;
box-shadow: 0 1px 10px white, 0 0 40px black, 0 0 80px white;
color: black;
height: 96%;
width: 98%;
}
body {
background-color: white;
float: center;
}
h1 {
color: black;
text-align: center;
font-size: 25px;
margin-bottom: 5px;
text-shadow: 1px 1px 4px gray, 1px 1px 4px white;
}
p {
color: black;
text-align: center;
margin-top: 0px;
font-size: 15px;
}
header {
padding: 1px;
margin: auto;
box-shadow: 0 0 10px white, 0 0 20px white;
}
nav {
margin-left: auto;
margin-top: 50px;
margin-bottom: auto;
float: left;
background-color: white;
height: auto;
width: auto;
}
article {
float: center;
margin-top: 50px;
margin-bottom: auto;
width: auto;
height: 100%;
}
/*NAV Menu*/
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color: black;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: black;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: rgb(0, 0, 0, 0.2);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*Responsive*/
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
footer {
float: center;
margin: auto;
margin-top: 60%;
}
p1 {
text-align: left;
}
.style {
font-size: 30px;
cursor: pointer;
font-family: monospace, arial;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*LOGO*/
img.ri {
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
border-radius: 3px;
width: 100px;
height: 100px;
}
img.ri:empty {
top: 55%;
left: 49%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
html {
background-image: url("C:/Users/Joalu/Desktop/WebApp/img/indexbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body {
margin: 0;
}
header {
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0, 0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0, 0.5);
/* Green background */
border: 0.5px solid rgb(0, 0, 0, 0.5);
color: white;
/* White text */
padding: 20px 33px;
/* Some padding */
cursor: pointer;
/* Pointer/hand icon */
float: left;
/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0, 0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0, 0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri {
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty {
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover {
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0, 0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/MainCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="image/favicon.png" sizes="32x32">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>
scxry
</title>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/12345.mp4" type="video/mp4">
</video>
</div>
<header>
<span class="style" onclick="openNav()">☰</span>
</header>
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "webapp.html";
}
</script>
<nav>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
Home
Store
Social Media
Contact
FAQ
<p>scxry cmpny est. 2020
<p>
</div>
</div>
</nav>
<img src="image/scxrylogo800back.png" class="ri" />
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
#media only screen and (max-width: 500px) {
html{
background-image: url("C:/Users/Joalu/Desktop/scxryshop.de/image/webappbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body{
margin: 0;
}
header{
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0,0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0,0.5);
margin-top: 30px ;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0,0.5); /* Green background */
border: 0.5px solid rgb(0, 0, 0,0.5);
color: white; /* White text */
padding: 20px 33px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left;/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0,0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0,0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri{
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty{
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover{
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0,0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
#media only screen and (max-width: 1920px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/webappcss.css" type="text/CSS" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="https://www.scxryshop.de/">
<button class="btnheader">
<h1>scxry</h1>
</button>
</a>
</header>
<body>
<div class="btn-group">
<a href="https://www.scxryshop.de/">
<button class="btn1">Media</button>
</a>
<a href="https://www.scxryshop.de/About.html">
<button class="btn2">FAQ</button>
</a>
<a href="https://www.scxryshop.de/Contact.html">
<button class="btn3">Contact</button>
</a>
<button class="btn4">About</button>
</div>
<img src="image/custom.png" class="ri" style="height: auto">
<div style="text-align:center">
<a href="https://www.scxryshop.de/">
<span class="dot"></span>
</a>
</div>
<h3>Blog</h3>
<div class="bordr">
<p>This new mobile update will provide you <br> with the
best experience.<br> Be sure to explore the whole website,<br>
some personal information about me:</p>
<p>I'm 15 years old and I'm a student at JKR Wendlingen <br>
I will finish my school soon and will then go <br>
to the MES in Kirchheim.</p>
<p>I was thinking of selling some 3D printed <br>
products because you can almost make everything <br>
therefor prototyping is no problem.</p>
<p>Also I'm looking forward to study abroad <br> and go to the
US. Thank you so much for visting <br>
this website if you need any help <br>
feel free to contact me.
</p>
<p><b>THANK YOU!</b></p>
</div>
<script type="text/javascript">
if (screen.width >= 500) {
document.location = "index.html";
}
</script>
</body>
</html>
There are various elements and techniques to responsive design (changing content and/or layout across different device widths). Try not to think about it as a different HTML page but elements on the same page that show and hide according to the device width.
For example: -
<div class="desktop-content">
<p>This is the content someone will see on a desktop</p>
</div>
<div class="mobile-content">
<p>This is the mobile content</p>
</div>
And then with CSS you can then do something like this: -
.mobile-content{
display:none;
}
#media only screen and (max-width: 500px) {
.desktop-content{
display:none
}
.mobile-content{
display:block;
}
}
The disadvantage here is that you are asking the browser to load both sets of content but only displaying one so if there are large images or a lot of content involved another approach may be better.
If you MUST have 2 separate HTML files then you can do a JavaScript redirect based on the width of the window to the correct one ... but I would not recommend this approach.
Instead on the main page you can use javascript to redirect the user
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "other.html";
} else {
document.location = "index.html";
}
</script>
I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom
You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});
You are using the id "editable" twice, could you change that and retry?
<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()