I am trying to change the URL of a website once a GIF has reached its last frame. What I got to, is that I can use the libgif.js setup.
However I am having difficulties making it work and figuring out the components. There are a couple of example suggestions, but all I need it to do is check if the GIF has finished and if so go to another URL.
The following code is what I have gotten to so far, it loads the GIF but nothing happens, other than it plays in a loop, even though the GIF isn't supposed to loop. But no URL change or anything.
Any help is much appreciated.
EDIT: the site now just doesn't load and goes directly to "unsafe website" message from browsers.
<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">
<script type="text/javascript" src="./libgif.js"></script>
</head>
<body>
<img id="taliAni" src="LogoAnimation2.gif" rel:animated_src="LogoAnimation2.gif"
rel:auto_play="1"/>
<script type="text/javascript">
var sup1 = new SuperGif({ gif: document.getElementById('taliAni') } );
sup1.on_end(window.location.href = "https://www.website.com/";);
</script>
</body>
</html>
Related
I've been using livereload with sublime text for a while, in order to live reload markdown and preview in the browser.
Now I'm wondering if it's possible to live reload non markdown also, i.e. my file.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
hello world 4
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
So I was hoping to save that file on sublime text and see the changes on the browser, but that's not happening. Perhaps I'm missing some fundamentals on how things work. Is that supposed to work, what part am I doing wrong?
I'm new to coding in HTML, CSS, and JavaScript, so please forgive me if my code is messy and/or incorrect.
I'm trying to make a website that can help people who are feeling mentally down, and for the first page, I added an input box which asks for the user's name, which will then be read in the next page. For example, if I put "Henry", the next page should say "Hello, Henry!" To read the variable in the next page, I used sessionStorage and sessionStorage.getItem("inputVal"). But, for some reason, when I try to log the variable (inputVal) in the first page, the console gives an error that simply says "Uncaught" for a brief moment before clearing when loading to the next page. Then, when I try to log the inputVal on the next page, the console only prints "null". I have scoured numerous forms, but I could not find anything to fix my problem! Have I written the sessionStorage wrong, or is there something else I'm missing? Here is the code for my first file:
<!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="main.css">
<title>Feel Happy</title>
</head>
<body>
<b class="welcometofeelhappy">Welcome to FeelHappy :)</b>
<input type="text", id="whatisyourname", placeholder="Please enter your name!", class="whatisyournameinput" required><br>
<form action="pages/landing.html">
<button class="startBtn", type="submit", id="btn1", onclick="getInputValue()"><h2 class="buttontext1">Let's Begin!</h2></button>
</form>
<script>
function getInputValue(){
var inputVal = document.getElementById("whatisyourname").value;
console.log(inputVal)
sessionStorage("inputVal", inputVal)
}
</script>
</body>
</html>
And the code to the second file:
<!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>
<button onclick="getName()" type="button">Click Me!!</button>
<script>
function getName() {
var inputVal = sessionStorage.getItem("inputVal")
console.log(inputVal)
}
</script>
</body>
</html>
Note: For testing purposes, I put a button to print the code in the console.
sessionStorage("inputVal", inputVal) is not how you write things to the session store. sessionStorage itself is not a function, it's an object that provides methods, like setItem.
You need sessionStorage.setItem("inputVal", inputVal).
In terms of debugging, your browser's console can almost certainly be configured to persist logs after page transitions, which will allow you to see error messages even after you navigate away from the page where the error occurred.
I am making a simple project in HTML/CSS/JS. I want to make a light bulb turn on and off. I have both the images in the same directory, and so far I have been able to make it so that when I click on it it will turn off. But, after that, I can click it no more.
I want to be able to do this repeatedly, again and again, to turn it off, and then on again. Any ideas? I am trying to do this with no tutorials, I can't think of anything.
Here is my 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>Light Switch</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: black;">
<img src="light-on.png" onclick="this.src='light-off.png'">
<img src="light-off.png" onclick="this.src='light-on.png'">
</body>
</html>
A working code can be created by your way, but it's inefficient and not elegant. You need only one img element and to change its source.
<img src="light-on.png" class="image--switchable" data-light="on">
You can use onclick in img tag, but I think event listener is a better solution.
let alternation = {
on: "off",
off: "on"
}
// I assume you have multiple images. That's why I used querySelectorAll and forEach.
document.querySelectorAll(".image--switchable").forEach(img => {
img.addEventListener("click", () => {
let light = img.dataset.light;
img.src = `light-${alternation[light]}.png`
img.dataset.light = alternation[light];
})
})
// If you have only one image use:
// document.querySelector(".image--switchable").addEventListener...
You would need to use javascript for the image to be changed
The answer to this might be quite easy but I couldn't find a solution since everything seems ok. I'm trying to create a google chrome extension and it has a button like this,
document.getElementById("autof").addEventListener("click", autofill());
function autofill() {
console.log("ENTER");
document.getElementsByName("session[username_or_email]").value = "sylent";
document.getElementsByName("session[password]").value = "abcdefg";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TWITTER</h1>
<button id="autof">Fill</button>
<script src="twt.js"></script>
</body>
</html>
When you add the event listener to the button, you should pass in the function without actually calling it.
document.getElementById("autof").addEventListener("click", autofill);
Using parenthesis with autofill(), you are assigning the result of calling your function to the click handler:
document.getElementById("autof").addEventListener("click", autofill());
Try this:
document.getElementById("autof").addEventListener("click", autofill);
when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue