so... today I started to learn a bit of jquery and Im trying to make a little text-animation with the words 'improvise' 'adapt' and 'overcome' (idea comes from meme) but when I use
improvise.animate({left: "50px"})
with improvise being the text-element, just nothing happens.
Here is my code(very bad code, but Im beginner), I hope you can help me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1 id="improvise">Improvise</h1>
<h1 id="adapt">Adapt</h1>
<h1 id="overcome">Overcome</h1>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
JS:
let improvise = $("#improvise")
let adapt = $("#adapt")
let overcome = $("#overcome")
improvise.hide()
adapt.hide()
overcome.hide()
function start(){
setTimeout(function(){improvise.fadeIn()}, 0)
setTimeout(function(){adapt.fadeIn()}, 1000)
setTimeout(function(){overcome.fadeIn()}, 2000)
setTimeout(function(){improvise.animate({left: "50px"}, 500)}, 3000)
}
You aren't calling your start() function anywhere, so that's why nothing's really happening.
And inside your css you need to give your #improvise element the position: relative property.
Related
My CMS uses
<link rel="prev" href="/t/119152/page-18" />
<link rel="next" href="/t/119152/page-20" />
to link to previous and next thread pages. I want to add rel=preftech value to these links using javascript.
I tried
<script>
document.querySelector("link[rel=prev]").setAttribute("rel", "prev prefetch");
document.querySelector("link[rel=next]").setAttribute("rel", "next prefetch");
</script>
and
document.querySelector('link[rel=prev]').rel = 'prefetch';
document.querySelector('link[rel=next]').rel = 'prefetch';
but none of these seem to update it.
Also, where should the script tag should ideally be placed for it to work?
Both techniques work as you can see here.
<!DOCTYPE HTNL>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="prev" href="/t/119152/page-18" />
<link rel="next" href="/t/119152/page-20" />
</head>
<body>
<script>
document.querySelector('link[rel=prev]').rel = 'prefetch';
document.querySelector("link[rel=next]").setAttribute("rel", "next prefetch");
console.log(document.querySelectorAll("link")[0].outerHTML);
console.log(document.querySelectorAll("link")[1].outerHTML);
</script>
</body>
</html>
I made an HTML document with a button that when I click were to it display a prompt that modify a p tag.
Probably, I made a dumb error of code syntax(I am beginner in js).
Help me and explain please.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function name(x){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="name()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
name is reserved in javascript.
You should avoid using the name of JavaScript built-in objects, properties, and methods
https://www.w3schools.com/js/js_reserved.asp
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function names(){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="names()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<script src="app.js"></script>
</body>
</html>
This is my html code and the js I have written is here
const myHeading = document.getElementById('myHeading');
myHeading.addEventListener('click', () => {
myHeading.style.color='blue';
});
It is very simple however for some reason the h1 tag does not seem to be turning blue on click event?
Maybe your dom is not ready when js executed. Try this
document.addEventListener("DOMContentLoaded", function() {
// your code
})
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
Ok. so i am learning how to make a clock. went to W3schools to check out the code. now i want to mess around with it from military time and so forth. but i cant seem to get the code to work. when i take the code and put it in a JS file. i do not get the code running. If i put it in the HTML as embedded it works? what am i doing wrong here?
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
HTMl is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<h1> Austen's Clock</h1>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
move <script type="text/javascript" src="clock.js"></script> into head of the document
OR
Rewrite you code like this
window.onload = function startTime() {.....
You've included the <script> tag after the first closing </html> tag - there shouldn't be any other elements after that, so they should be ignored.
Move it so that it's the last thing inside the </body> tag.
[FWIW, you code actually does work for me in both Chrome and Firefox on MacOS X. In Chrome at least, the <script> element was automatically moved inside the </body> tag by the browser.]
Recap of the previous replies:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
<script type="text/javascript" src="clock.js"></script>
</head>
<body onload="startTime()">
<h1> Austen's Clock</h1>
<div id="txt"></div>
</body>
</html>