In my javascript Program I have created a page to display an image and description at the same time when the user moves the mouseOver a link, and display a different image with no description when user moves the mouseOut of link. but I am not getting output on mouseOver/mouseOut as per expectation. Can anyone help ? I did the following:
(i) When the mouse moves over a link, I am calling the function by passing the text and image.
(ii) When the mouse moves out,I am calling the function by passing a blank text and a different image. This image is the same when the mouse is out from all the links.
code:
<!DOCTYPE html>
<html>
<head>
<style>
div a{
text-decoration: none;
font-size: 25px;
color: yellow;
}
.container {
width: 1002px;
margin-top: 50px;
margin-left: 130px;
}
#first {
width: 400px;
float: left;
height: 350px;
background-color:#f4b2ef;
border:inset;
}
#second {
width: 590px;
float: right;
height: 350px;
color: white;
border:inset;
}
</style>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<p style="text-align:center">First Place Winner</p>
<p style="text-align:center">Third Place Winner</p>
<p style="text-align:center">Merit Prize Winner</p>
<p id="para"> </p>
</div>
<div id="second">
<img id="default" src="images/default.jpeg" alt=""
width="590" height="350"/>
</div>
</div>
<script>
var blank = "";
var txt = "Beautiful fall";
var txt2 = "Natural pictures are beautiful";
var txt3 = "Beautiful Rose garden"
var w1 = new Image(590, 350);
var w2 = new Image(590, 350);
var w3 = new Image(590, 350);
var def = new Image(590, 350);
w1.src = "images/w1.jpeg";
w2.src = "images/w2.jpg";
w3.src = "images/w3.jpg";
def.src = "images/default.jpeg";
function replaceImg(txt, w1) {
w1.src;
var para = document.getElementById("para").innerHTML = txt;
}
function defaultImg(blank, def) {
def.src;
var para = document.getElementById("para").innerHTML = blank;
}
</script>
</body>
</html>
I amputate your code just to demonstrate that you can make it work by using js function addEventListener("moustover",callback) to do the work. I have never wrote code in your way so I don't know how to improve upon yours. You should always seperate your html css and js codes.
var firstTarget = document.querySelector("#first");
firstTarget.addEventListener("mouseover",function(){
document.querySelector("#target-image").setAttribute("src",'https://via.placeholder.com/350x150)');
})
firstTarget.addEventListener("mouseout",function(){
document.querySelector("#target-image").setAttribute("src",'#');
})
<!DOCTYPE html>
<html>
<head>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
First Place Winner</p>
</div>
<div>
<img id="target-image" src="#" alt="">
</div>
</div>
Related
How to add new tags to text that is already present inside some element. Is there a better way than copying the text into new element and then deleting from old?
In the example below, text Hello World! is already present inside a div. The goal is to add h1 around the text.
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
let h = document.createElement("h1");
h.textContent = d.textContent;
d.textContent = "";
d.appendChild(h);
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
This question is likely going to get multiple opinions.
Mine is that you are doing it just fine using the DOM API. However, if you understand the performance and security implications of .innerHTML, you could do this:
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
d.innerHTML = "<h1>" + d.textContent + "</h1>";
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
I am displaying UV index from json data, however I can't figure how to display the colour relevant to the UV index value.
so far here is what I have:
document.getElementById("uvIndex").innerHTML = getUvIndex();
function getUvIndex() {
miliVolts = 0;
text = "UV Index: "
if (miliVolts < 50) {
text += " 0 <div style='width: 20px; height: 20px; display: inline-block";
text += "background-color: rgba(0,190,0, 0.5); position: relative; left: 5px;";
text += "top: 5px;background-color: rgba(0,190,0, 0.5);' ";
text += "width='20'></div>";
text += " <div>Exposure Level None - No Light</div>";
}
return text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="label label-default" id="uvIndex">Loading UV index.</div>
but what I am thinking from bootstrap, I can apply class i.e. class="label label-default"something other based on value.
i think you can use HTML DOM className Property or jquery add class method.
Just customize it to your need.
HTML class name property example:
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 300px;
height: 100px;
background-color: coral;
text-align: center;
font-size: 25px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="myDIV">
I am a DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myDIV").className = "mystyle";
}
</script>
</body>
</html>
This is the code I have currently come up with. It fills in the correct title, but the page does not become visible on having a page title match. How do I go about fixing this? What is the proper way of "if page title, execute this code"?
<head>
<title>Page Name 1</title>
</head>
<body>
<style>
#notavailablemsg {
font-size: 30px;
color: #f04e37;
display: inline;
}
#notavailablemsg div {
display: inline;
visibility: hidden;
}
#submsg {
font-size: 22px;
visibility: hidden;
}
#pagename {
font-style: italic;
}
</style>
<center>
<div id="notavailablemsg">
<div>The page </div>
<br>
<div id="pagename">page title</div>
<div> no longer exists</div>
</div>
<div id="submsg">
We are sorry for the inconvenience.
</div>
</center>
<script>
var errortitle = document.getElementsByTagName("title")[0].innerHTML;
document.getElementById("pagename").innerHTML = errortitle;
</script>
<script>
if (errortitle == "Page Name 1") {
document.getElementByID("notavailablemsg").innerHTML.style.visibility = "visible";
document.getElementByID("submsg").innerHTML.style.visibility = "visible";
}
</script>
</body>
</html>
#Midas answered: Modify to
document.getElementById("notavailablemsg").style.visibility = "visible";
document.getElementById("submsg").style.visibility = "visible";
You can use document.title to get current title.
Example
<!DOCTYPE html>
<html>
<head>
<title>YourGoodTitle</title>
<style>
div {
border: 1px solid red;
width: 100%;
height: 50px;
display: none; /* its good to use display: none to hide elements*/
}
</style>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<center>
<div id="notavailablemsg">
Bad title
</div>
<div id="availablemsg">
Glad you are here
</div>
</center>
<script>
function myFunction() {
var title = document.title;
if( title == "YourGoodTitle" ) {
// select and make elements visible
document.getElementById( "availablemsg" ).style.display = "block";
} else {
// hide the elements you want, make their display = none;
// for example
document.getElementById( "availablemsg" ).style.display = "none";
// show your expected elements
document.getElementById( "notavailablemsg" ).style.display = "block";
}
}
</script>
</body>
</html>
https://plnkr.co/edit/KS2obzXrUqtzT8FWUvwL?p=preview
So if your title is YourGoodTitle, YourGoodTitle message will be shown. Else Bad title will be printed
Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.
I am using EaselJS, and for some reason my canvas isn't showing the image as a background even though this is how tutorials do it. My HTML file is as so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requiescat in Pace</title>
...lots of .js imports for EaselJS
<script type="text/javascript" src="RIPwitheasel.js"></script>
<style>
canvas {
position: absolute;
left: 0;
right: 0;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
background: transparent;
}
</style>
<link rel="stylesheet" type="text/css" href="style_2.css">
</head>
<body onload="init()">
<font color = white>
<img alt = "full screen bg img" src = "images/backgrounds/pagebackground.jpg" id = "full-screen-background-image"/>
<div style="position: relative">
<h1 style="position: fixed; width:100%; text-align: center"> <strong> Requiescat In Pace </strong> </h1>
<p style = "text-align: center"> Prototype 1 </p>
</div>
<form action="" style = "position: fixed; top: 0; width: 100% text-align: center" >
<input type="button" value="Donate!!!">
</form>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> Credits: To be added</p>
</div>
<canvas id="gameCanvas" width="1000" height="736">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</font>
</body>
</html>
And my RIPwitheasel.js is this:
var stage;
function init()
{
var canvas = document.getElementById("gameCanvas");
stage = new createjs.Stage(canvas);
var background = new createjs.Bitmap("images/backgrounds/grass-tiled.png");
stage.addChild(background);
createjs.Ticker.setFPS(60);
stage.update();
}
function tick()
{
stage.update();
}
What is it that is incorrectly defined? All of the page displays correctly but the canvas doesn't display the image. I get zero run-time errors in the browser console for the js file.
EDIT: I just realized that if I use a .jpg file instead of a .png file it loads it. Why is this?
See this answer from CreateJS developer: https://stackoverflow.com/a/20682883/1996480
Here's how you could use PreloadJS to load your background:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadFile({id:"myBackground", src:"images/backgrounds/grass-tiled.png"});
function handleComplete() {
var image = queue.getResult("myBackground");
stage.addChild(image);
}