I want to create a text that can be shifted for long title.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#abc {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
}
#def {
position: absolute;
font-size: 2em;
color: #000;
margin: 0;
width: 400px;
}
</style>
<script>
var teks = null;
function geser() {
var left = 0;
function frame() {
left--; // update parameter
teks.style.left = left + 'px';
if (left == -200) {
clearInterval(id);
setTimeout(function() {
runningtext();
}, 2000);
}
}
var id = setInterval(frame, 40)
}
function runningtext() {
teks = document.getElementById("def");
teks.style.left = '0px';
setTimeout(function() {
geser();
}, 2000);
}
window.onload = runningtext;
</script>
</head>
<body>
<div id="abc">
<p id="def">Cihampelas Demin Center</p>
</div>
</body>
</html>
The script is successfully work with 1 line.
Output :
Cihampelas Demin Center
Question is :
Is there another way to print 1 line without #def { width:400px; }?
(When I try #def { display:inline; }
Output :
Cihampelas
Demin Center
)
When object's left = -200px, I want to reserve in same way, but I have no idea.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
I have tried many other solutions on this problem but none of them are working. I checked my code from other questions I found and it seems to be perfectly fine.
I want the javascript to move the div called "snake" in what direction it is moving. But it keeps saying that snake is "null". Code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<style>
#main {
height: 100px;
width: 100px;
border: 1px solid black;
}
#snake {
position: absolute;
top: 20px;
left: 20px;
width: 10px;
height: 10px;
background: black;
}
</style>
<script src="script.js"></script>
</head>
<body>
<div id="main">
<div id="snake"></div>
</div>
</body>
</html>
Javascript:
let movePos = null;
let isMoving = false;
let snake = document.getElementById("snake");
function main() {
document.addEventListener("keypress", function(event) {
if (event.key == "w") {
movePos = "up";
} else if (event.key == "s") {
movePos = "down";
} else if (event.key == "a") {
movePos = "left";
} else if (event.key == "d") {
movePos = "right";
}
if (!isMoving) {
askToMove();
}
});
}
function askToMove() {
if (movePos != null) {
isMoving = true;
setInterval(move, 1000);
}
}
function move() {
if (movePos == "up") {
snake.style.top = 100;
}
}
main();
You've made the javascript run before the "snake" element is defined. Just replace your current HTML code with this.
<!DOCTYPE html>
<html lang="en">
<body> <!-- Body shifted up -->
<div id="main">
<div id="snake"></div>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<style>
#main {
height: 100px;
width: 100px;
border: 1px solid black;
}
#snake {
position: absolute;
top: 20px;
left: 20px;
width: 10px;
height: 10px;
background: black;
}
</style>
<script src="script.js"></script>
</head>
<!-- No Body Here -->
</html>
All I did was shift the body section up. I have had this same problem before and I fixed it with this.
I have created a button which should shift the window's Y to "BOX - 5" div's Y middle through onclick. So in other words I want to set the "Box - 5" div in the middle of the window. I have tried many methods using window.scrollTo and using elements.innerHeight/2, but I still cannot center the element to the middle of the window/screen. Please Help.
I wish to only use Javascript, but if its not possible with it then I would accept jQuery script.
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll("#box")[4];
/*
NEED HELP HERE
*/
}
body {
margin: 0;
}
#box {
position: relative;
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
Updated your snippet as below. You can use DOM element property offsetTop to check its Y position and use window.scroll to scroll the view to that element. Another sidenote, it's better to not assign the same id to multiple elements, so I change the id property to class and added identifier _{index} for the class name.
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.className += "box _" + (y+1);
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll(".box._5")[0];
if (box_5) {
// scroll the window view to the element
window.scroll({
top: box_5.offsetTop,
behavior: 'smooth',
})
}
}
body {
margin: 0;
}
.box {
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
How to make sure that when you change the background color from the in the same tab, the background color would be changed in the other? Now the background color changes when the page is reloaded. I want to do that when digging the two identical tabs, and update one of them would have changed the background and the other.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bg-1 {
background: chocolate;
}
.bg-2 {
background: aqua;
}
.bg-3 {
background: grey;
}
h1 {
color: white;
font-size: 3em;
}
</style>
</head>
<body>
<h1>Change the background color of the page when you reload.</h1>
<script>
var body = document.body,
currentStyle = +localStorage.currentStyle || 0;
window.addEventListener('load', function() {
body.classList.add('bg-' + (currentStyle + 1));
localStorage.currentStyle = ++currentStyle % 3;
});
window.addEventListener('storage', function( event ) {
body.classList.remove('bg-' + event.oldValue);
body.classList.add('bg-' + (currentStyle + 1));
console.log(event.key);
});
</script>
</body>
</html>
This is the code you are looking for:
<script type="text/javascript">
var body = document.body;
window.addEventListener('load', function () {
var currentStyle = localStorage.getItem('currentStyle'),
newStyle=1;
if (currentStyle !== null) {
newStyle = currentStyle % 3 + 1;
}
body.classList.add('bg-' + newStyle);
localStorage.setItem('currentStyle', newStyle);
});
window.addEventListener('storage', function (event) {
var currentStyle = localStorage.getItem('currentStyle');
body.classList.remove('bg-' + event.oldValue);
body.classList.add('bg-' + currentStyle);
});
</script>
HTML:
<div id="container">
<div id="bar">
</div>
</div>
CSS:
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
JS:
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
This code from jsfiddle http://jsfiddle.net/Mp7R3/ is not working when I copy paste the code but it is working fine on jsfiddle .maybe I have some onLoad problem but I dont know how to solve it . I tried $(document).ready(function() but it didnt help .
Be sure you don't forget the script for calling jQuery in the <head> of your code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You can also try to place the code at the bottom of your code so it's can run only if the full page is loaded.
I also write below the simplest page to make this code work (normally you should separate HTML, CSS and JS), so you can compare it with your own:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>- That's Work!!! -</title>
<style>
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="bar">
</div>
</div>
</body>
<script type="text/javascript">
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
</script>
</html>
I hope it will help you!
I want to move my background infinite, to do that i code this :
html, body {
margin : 0;
padding: 0;
width: 100%;
height: 100%;
cursor: url('../assets/img/ship.cur'), auto;
background-color : #000;
}
#background {
position : absolute;
background-image: url('../assets/img/littlestars.png');
height : 720px;
width : 1280px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../style/home.css">
<script language=javascript src="../js/navigate.js"> </script>
<script language=javascript src="../js/background.js"> </script>
</head>
<body onLoad="onLoad(); loadBG();">
<div id="background"> </div>
</body>
</html>
function loadBG() {
window.setInterval(moveStars, 100);
}
function moveStars() {
var bg = document.getElementById("background");
bg.style.backgroundPosition += 10;
}
But it doesn't work... if i can't display backgroundPosition.
Some ideas ? It's the good way to create javascript animation ? Thx.
backgroundPosition is a property that indicates x,y position of backrogund in units, not a single number.
You need to do something like:
var posx = 0;
function moveStars() {
var bg = document.getElementById("background");
posx+=10;
bg.style.backgroundPosition = posx+"px 0";
}