getElementById from a txt file - javascript

I'm trying to get ElementById from a txt file and pass it into marquee class. Do I need a javascript function for this?
Also, I can't get the white-space: nowrap to work. Here is what I have put together so far. The javascript function credit goes to Sid function readTextFile
function readTextFile(file){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span> Test .</span></h1>
</body>
</html>
Any help is much appreciated. I'm brand new to html, javascript, and css but I'm excited to learn.
Thank you!

You need to get span element and replace its content (I've added id attribute to span element for simplicity: compare first two lines in snippet - commented one is shorter). white-space: nowrap should be applied for span element.
Remove that <a> element and call your readTextFile in js snippet. Replace alert(allText) with document.getElementsByClassName("marquee")[0].children[0].innerHTML = allText (or make it simpler)
Demo below shows how to replace strings:
//document.getElementById("mytext").innerHTML = "some test"
document.getElementsByClassName("marquee")[0].children[0].innerHTML = "some test"
setTimeout(function(){
document.getElementById("mytext").innerHTML = "bla bla bla"
}, 7000)
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
white-space: nowrap;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span id="mytext">Need Text File String Here</span></h1>
</body>
</html>

Related

Can i animated or transform a shadow

i want to ask something. Can i add animation style on shadow with css. The animation what i mean is the shadow can do fade in and fade out in several time.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Yes you can. You could use #keyframes.
h1 {
animation: shadow-animate 3s infinite ease;
}
#keyframes shadow-animate {
0% {
text-shadow: 20px 20px;
}
100% {
text-shadow: 0px 0px
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

How to refresh keyframe animation by click in js?

I want make animation which started every click by button. It is work but only once. When pressed again nothing happens. Tried to remove and add the same class again. Did not help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
margin: 0;
padding:0;
widht: 100%;
}
</style>
</head>
<body>
<style>
#keyframes red-to-black {
0% {background: rgba(150,0,0,100);}
100% {background: rgba(0,0,0,100);}
}
.RedBack {
animation: red-to-black 1s ease-out;
}
</style>
<div id="back" style = "background: black; width: 100vw; height:100vh;">
<button onclick="document.getElementById('back').classList.add('RedBack');">Hello!</button>
</div>
</body>
</html>
You must remove the class after the animation ends. Then, when you add the class again, the animation will trigger again.
Here, I have removed the class after 1 second, because the animation duration is 1 second.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
margin: 0;
padding:0;
widht: 100%;
}
</style>
</head>
<body>
<style>
#keyframes red-to-black {
0% {background: rgba(150,0,0,100);}
100% {background: rgba(0,0,0,100);}
}
.RedBack {
animation: red-to-black 1s ease-out;
}
</style>
<div id="back" style = "background: black; width: 100vw; height:100vh;">
<button onclick="onClick()">Hello!</button>
</div>
<script>
function onClick() {
document.getElementById('back').classList.add('RedBack');
setTimeout(() => {
document.getElementById('back').classList.remove('RedBack');
}, 1000)
}
</script>
</body>
</html>

My code claims to have an unexpected token

<html>
<head>
<title>lorem ipsum</title>
<style type="text/css">
body{
background-color:#222222;
margin:0px;
padding:0px;
}
#typed{
color:red;
font-size:150%;
float:left;
}
.cursor{
height:24px;
width:2px;
background:lawngreen;
float:left;
opacity:0;
animation:blink 0.75s linear infinite alternate;
}
#keyframes blink{
50% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
</head>
<body>
<div id="typed"></div>
<div class="cursor"></div>
</body>
<script type="text/javascript">
var i;
var txt='lorem ipsum';
var speed=50;
for (i=0; i<txt.length;i++){
setInterval(addLetter("typed"),speed);
}
function addLetter(word){
document.getElementById(word).innerHTML += txt.charAt(i);
i++;
}
</script>
</html>
I cannot see why it thinks it's wrong, but perhaps I'm just missing something. Chrome tells me that the error is an uncaught syntax error in the for loop, the error, it says, is the ")". I've been trying to figure it out all day long.
EDIT: What I'm trying to do is get the text in the variable, "txt" to pop up on screen as if being typed out. I fixed it with the below suggestion
Change , by ; in for loop.
for (i=0; i<txt.length;i++){
Also, remove the } before </script>.

Moving background doesn't seem to be working

So i'm trying to make my background move endlessly from left to right repeatedly. I tried all sorts of things, but I don't know why the code doesn't work.
Here's my code
HTML:
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
Javascript:
var i=null;
window.onload = function(){
var move = setInterval(move, 30);
move();
}
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
Here are updated code for your requirement.
You only need pass move method to setInterval, don't need call move() after setInterval
var i=1;
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
window.onload = function(){
var move1 = setInterval(move, 30);
//move();
}
#section1{
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg')
}
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
You can use CSS animation to achieve this.
#section1 {
width: 200px;
height: 200px;
background: url('http://placehold.it/1000?text=test image');
background-size:cover;
animation-duration: 3s;
animation-name: scroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes scroll {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
<div id="section1"></div>

Hide an element after clicking on it

Todo :
Hide an element smoothly after clicking on it , like in this page https://www.alphafx.co.uk/ , when you click on the letter A it fades away smoothly
Achieve this effect with just HTML,CSS,JavaScript ?
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
Text
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
You can achieve this using jQuery fadeOut check working fidle below:
Using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
<script>
$(".hide").click(function() {
$(".hide").fadeOut("slow");
});
</script>
</body>
</html>
Using JavaScript
function fadeOutEffect() {
var fadeTarget = document.getElementById("hide");
var fadeEffect = setInterval(function() {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
#hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
</body>
</html>
You can easily achieve this using jQuery fadeOut() effect.
Below is the w3scool reference:
https://www.w3schools.com/jquery/eff_fadeout.asp
Click on "try it yourself>" button and you can modify the code as per your requirement.
Here is another working example for you:
https://jsfiddle.net/kag4jqyh/
Please try this:
$(function() {
$('#spantext').on('click', function() {
// $(this).hide();
$(this).fadeOut("slow"); // if you want to hide it slow
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>
Here's an answer in vanilla JavaScript (without using jQuery)
HTML
Text
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>
JavaScript
const hideButton = () => {
document.getElementById("foo").classList.add('hidden');
}
const showButton = () => {
document.getElementById("foo").classList.remove('hidden');
}
CSS
.foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
.foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
What you want is just an animation to hide the view.
You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> for getting such beautiful effects. You can see the sample code below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity: 0});
});
$("#btn2").click(function(){
$("#box").animate({opacity: 1});
});
});
</script>
</head>
<body>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
if you want to use JavaScript rather than using jQuery. then
Try this
/******define time-delay only in s(seconds)****/
var timeSlot = '.3s';
function hide(obj){
obj.style.visibility= 'hidden';
obj.style.opacity= 0.8;
obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
}
.div1 {
font-size: 1.2rem;
cursor: pointer;
text-align: center;
margin-top:-100px;
}
.logo {
font-size: 10rem;
}
<div class="div1" onclick="hide(this);">
<h1 class="logo">A</h1>
</div>

Categories

Resources