animate image with opicity in javascript doesnt work - javascript

This code is suppose to hide image and then show image in slow manner but it is directly show no image and full image
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
Window.setTimeout(trans(),1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>

Use window.setTimeout not Window ... notice the casing
Instead of invoking trans() in your setTimeout, you should pass only the function name trans.
window.setTimeout(trans,1000);
OR if you insist on invoking then wrap it with an anonymouns function.
window.setTimeout(function(){
trans();
}, 1000)

You can try this, "trans()" instead of trans(), the latter is a call.
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
window.setTimeout("trans()",1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>

Related

How we apply condition on 'This' event in jquery?

This code use to display text and picture's in jquery language by slide and confirmation message. In this code I faced a problem that to hide the picture call by id by using fun that when we say ok then it hide the picture otherwise it did not hide the picture...
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--we add jquery library file-->
<script src="test.js"></script>
<!--fun applied on text & images-->
<script>
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function()
{
alert("You did not hide this Picture!");
}
)
})
$(document).ready(function()
{
$('#img').click(function()
{
let shouldHide = confirm("Are You Sure To Hide This Picture?");
if (shouldHide)
{
$(this).hide('slow');
} else
{
return;
}
})
})
</script>
<!--apply to clean the screen-->
<style type="text/css">
h1,h2
{
display: none;
}
</style>
</head>
<body>
<!--display the image with class and id-->
<img src="images/1.jpg" width="400" height="500" id="img">
<img src="images/2.jpg" width="400" height="500" class="img">
<!--Display text by slide-->
<h1>How Are you?</h1>
<h2>I'm fine....</h2>
</body>
</html>
You can use the confirm method of JavaScript
$('#img').click(function () {
if(confirm("Are you sure?"))
{
$(this).hide('slow');
}
});
Also you can't use break when you're not in a loop.
Tell me if it worked for you!
You dont need to write two same functions make it as one.
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function()
{
alert("You did not hide this Picture!");
}
)
})
$(document).ready(function() {
$('#img').click(function () {
if(confirm("Are You Sure To Hide This Picture?"))
{
$(this).hide('slow');
}
})
})
confirm returns boolean value which you need to decide whether to hide or not and you cannot use break; inside the function, you should use return; instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--we add jquery library file-->
<script src="test.js"></script>
<!--fun applied on text & images-->
<script>
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function() {
alert("You did not hide this Picture!");
})
})
//apply on image that call by id
$(document).ready(function() {
$('#img').click(function() {
let shouldHide = confirm("Are You Sure To Hide This Picture?");
if (shouldHide) {
$(this).hide('slow');
} else {
return;
}
})
})
</script>
<!--apply to clean the screen-->
<style type="text/css">
h1,h2
{
display: none;
}
</style>
</head>
<body>
<!--display the image with class and id-->
<img src="images/1.jpg" width="400" height="500" id="img">
<img src="images/2.jpg" width="400" height="500" class="img">
<!--Display text by slide-->
<h1>How Are you?</h1>
<h2>I'm fine....</h2>
</body>
</html>

Display image legend on hover (not as tooltip) using innerHTML?

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>

Javascript AppendTo speed and a href link

I wish to link different sites to the pictures.
All I did is link the pictures to the same link.
So I want to link each pictures to the different website.
<!DOCTYPE html>
<html>
<head>
<style>
#rectangle{
width:2500px;
position:absolute;
margin-left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
$('.crimson').first().appendTo('#rectangle a' );
}, 2000);
});
</script>
</head>
<body>
<div id="rectangle">
<a href="html/Main.html">
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" /></a>
</div>
</body>
</html>
So adding 'a' behind the appendTo rectangle is the best thing I can do.
Try wrapping each picture in to individual <a></a>
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" />
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
// $('.crimson').first().appendTo('#rectangle a');
}, 2000);
$('#rectangle .crimson').each(function () {
link = "html/Main" + $(this).index() + ".html";
$(this).wrap("<a href='"+link+"'/>");
});
});

javascript showing up as text on my HTML page

Greetings all: Here is my simple code, Why is my javascript showing up as text on my page? any help would greatly appreciated, also any tips would be appreciated. thank you in advance
<html>
<head><title>jsn massage - home page</title>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/100_0350a.jpg"
var image2 = new Image()
image2.src = "images/circle.jpg"
var image3 = new Image()
image3.src = "images/AddisonStudioI.jpg"
</script>
</head>
<body>
<img src="images/100_0350a.jpg" name="slide" width="400" height="400>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src=eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()", 2500);
}
slideit();
</script>
</body>
</html>
You forgot to put a closing quote on height="400"
<img src="images/100_0350a.jpg" name="slide" width="400" height="400"/>
Your height attribute is missing the closing quotation mark and the img tag should be closed properly.
<img src="images/100_0350a.jpg" name="slide" width="400" height="400"/>
<img src="images/100_0350a.jpg" name="slide" width="400" height="400>
You should properly close this.
<img src="images/100_0350a.jpg" name="slide" width="400" height="400" />
Add this code in css
script { display: none !important; }

Can't bind 'tap' event to canvas

Trying to tap on canvas and nothing happens. What am I doing wrong please?
<html>
<head>
<title>canvas tap</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#my_canvas').bind('tap', function() {
alert("Canvas pressed!");
});
});
</script>
</head>
<body>
<div id="div1" style="width:auto;height:auto;background-color:yellow">
<canvas id="#my_canvas" width="200" height="200"></canvas>
</div>
</body>
</html>
Thanks!
The tap event is defined by jQuery Mobile while you only included the plain jQuery.

Categories

Resources