<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!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>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
I cant believe that i was unable to implement this using all the resources that I know about and I'm stuck on implementing this small feature since last 5-6 hours but it is what it is. I need help to store a single variable on user's localStorage that initially has value 1. If user clicks on a button, then the localStorage value updates to 0. If he clicks again, it again becomes 1. This value is used to switch between light mode and dark mode of the website. Initially I have set the css variable as 1 (for dark mode) and I want to update it using only plain javascript (no libraries) whenever user clicks on the button. The code for the button is in the 2nd try's code. Or it can also be found at my last stackoverflow post regarding the same project.
Here are a few codes of me trying to implement it:
Code implemented and working perfectly without localstorage and with initial variable value as 0:
<!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>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
console.log(elem);
if (elem == 0 ) {
elem = 1;
}
else if (elem == 1 ) {
elem = 0;
}
// alert(elem);
console.log(elem);
root.style.setProperty("--numvar", elem);
}
</script>
</body>
</html>
Before 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>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
let avar = true; //assume it exists
if (localStorage.hardtoimplement) {
avar = true;
}
else {
localStorage.setItem("hardtoimplement", "on")
}
console.log(localStorage.getItem("hardtoimplement"));
var num = 1;
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("hardtoimplement") == "on") {
num = 1;
}
else if (localStorage.getItem("hardtoimplement") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("hardtoimplement"));
if (localStorage.getItem("hardtoimplement") == "on") {
localStorage.hardtoimplement = "off";
}
else if (localStorage.getItem("hardtoimplement") == "off") {
localStorage.hardtoimplement = "on";
}
console.log(elem);
if (num == 0 ) {
num = 1;
}
else if (num == 1 ) {
num = 0;
}
// alert(num);
console.log(num);
root.style.setProperty("--numvar", num);
}
</script>
</body>
</html>
The first try:
<!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>
<script>
let avar = true; //assume it exists
if (localStorage.thisisvar) {
avar = true;
}
else {
localStorage.setItem("thisisvar", "on")
}
console.log(localStorage.getItem("thisisvar"));
var num = 0;
function myfunc() {
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("thisisvar") == "on") {
num = 1;
}
else if (localStorage.getItem("thisisvar") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("thisisvar"));
if (localStorage.getItem("thisisvar") == "on") {
localStorage.thisisvar = "off";
}
else if (localStorage.getItem("thisisvar") == "off") {
localStorage.thisisvar = "on";
}
}
function func2(){
alert(num); //initial value is 0 here
}
</script>
</head>
<body>
<button id="result" onclick=" myfunc()">hi</button>
<button onclick="func2()">b2</button>
</body>
</html>
I tried looking for this feature at many places like google, codepen, stackoverflow, etc. and I did find many implementations of this feature but I am unable to integrate any of them to my project on my own.
The requirement can be basically defined as:
A CSS variable is initially set to 1 and it should change on button click to 0.
And if user refreshes the page, it should still be 0.
Thanks.
EDIT:
Integation of answer with project:
<!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>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" onclick="change()" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
if (!localStorage.getItem('thisvarisgud4me')) {
localStorage.setItem("thisvarisgud4me", "1")
}
function change() {
if (localStorage.getItem('thisvarisgud4me') == '1') {
localStorage.setItem("thisvarisgud4me", '0')
} else {
localStorage.setItem("thisvarisgud4me", '1')
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
Here is the correct version:
I think you should learn a bit more js as there were a lot of syntax errors.
Here are some resources:
JavaScript Reference
Learn JS at freecodecamp.org
Learn JS at Codecademy
<!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>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
</style>
</head>
<body>
<button id="res" onclick="change()">hi</button>
<script>
if (!localStorage.getItem('thisvarisgood')) {
localStorage.setItem("thisvarisgood", "1")
}
function change() {
if (localStorage.getItem('thisvarisgood') == '1') {
localStorage.setItem("thisvarisgood", '0')
} else {
localStorage.setItem("thisvarisgood", '1')
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
The biggest problem with the most recent attempt is you set the variable with the name "thisvarisgood" and access it with "thisvarisgud".
Once you correct that, you need to correct the way that modifies the css. Doing it in the script itself won't work, because the script only runs once. You'll need to set the style it in the function that is called to change the local storage value, and on page load.
edit: the other answer solved it for you, as you can see. He corrected the localStorage variable name and set the style in the function as well (lines 35-37). The "on page load" styling is lines 40-41.
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
Currently, I am working on a project to generate a dynamic card page. This page is based on the input of a specific json feed (e.g. a user role).
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
Next, I use jQuery and Kendo UI to create cards. First, I need to extract the information from the json feed. As you may notice, every card will be placed inside a div. And every div will be appended to the cards div:
Below is code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
Every card does have some simple styling:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p>Situatie vorige week</p>
<p>Situatie vorige maand</p>
<p>Situatie vorig jaar</p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
As you may expect, the program itself does not work properly. All cards will be displayed on top of each other in index.html, although they are placed in various div. I don't know what the problem is and I cannot fix this. Hopefully one can help me.
All cards are placed on top of each other.
Use static or relative position for .front and .back divs
Read that article about positioning for more info http://www.w3schools.com/cssref/pr_class_position.asp