show image on timer code. want to add close feature - javascript

I can't for the life of me figure out how to add an exit feature to my code. I want it so the user can click anywhere on the screen to make the image go away. Can someone help please?
HTML
<body>
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JS
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);

The default is visible. You need to set to hidden when you want to hide it.
And you need to bind your code on the click event.
var hidden = false;
window.document.addEventListener('click', function() {
document.getElementById("image").style.visibility = hidden ? "" : "hidden";
hidden = !hidden; // comment out this line if you do not want to show again on click
}, false);
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
Update 2, if you want the timeout code to show the image after 2 seconds (as mentioned in comments) and then when you click anywhere to hide it for ever use
var image = document.getElementById("image");
setTimeout(function() {
image.style.visibility = 'visible';
window.document.addEventListener('click', function() {
image.style.visibility = 'hidden';
}, false);
}, 2000);
#image {
visibility: hidden;
}
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">

<div align="center">
<img id="image" src="image1.png" height="200" width="200">
</div>
<script>
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility = "visible" ? "hidden" : "visible";
},2000);
</script>

Use jQuery to make it simple..
Codepen
$(document).ready(function(){
$('body').click(function(){
$('#image').hide();
})
})

you could use this.
$(window).click(function() {
//Hide the menus if visible
document.getElementById("image").hide();
});

var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
function myremove(){
document.getElementById("image").style.display = "none";
}
<body onclick="myremove()">
<div align="center">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" height="200" width="200" style="display:block;">
</div>
</body>

Related

Javascript button slideshow

I am new to the javascript programming so can someone help me.
This is my code
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg';
pic.width = 400;
pic.height = 150;
pic.style.display = "block";
}
function fillIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.
.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).
You can modify the tags attribute using setAttribute or by setting a property directly:
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg'
pic.width='400px'
pic.height='150px'
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
You were on the right track. However, you need to set each property in JS.
ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picsum.photos/150/400'
pic.width='400'
pic.height='150';
pic.style.display='block';
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Please try the below code:
function fillIt(e) {
pic.style.display = "block";
pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}
You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.
Hope this helps !

JavaScript - user selection function

I am new to JavaScript and I'm working on something. This is what I've reached so far and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}
var color = true;
function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}
function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}
function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}
function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">
</body>
</html>
So far, the "Colored", "Greyscale", and "Alternate" buttons along with the opacity slider work as intended only on the first image (image1.jpg). Also, when the user inputs his own image, it replaces the first image and the functions work on it as intended. Here is what am trying to do:
1 - Let the user select which of the three images he wants to edit by clicking on it, then apply a border around it and use it in the other functions (greyscale and opacity). Here's what I tried (but didn't work):
<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">
function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}
2 - When the user inputs his own image, I want it to replace all the 3 images I have displayed by default.
Your help is greatly appreciated. Thanks in advance!
You are missing quotes both on the id and the 50px. But it is better to define a style for the selection.
Then let a click handler first remove that style from all the images, except the clicked image, where it should set that style. The functions .classList.add and .classList.remove can be used for that.
Where you currently have document.getElementById('image1'), you would do instead:
document.querySelector('.selected')
Then you should also make sure that the page loads with one image selected, i.e. with the selected class.
Some other improvements make sure that when changing the selection, the opacity slider is also brought in line with that image's current opacity setting.
Here is a snippet that does all that:
function changeOpacity(newValue) {
document.getElementById("span").textContent = newValue*100 +'%';
document.querySelector(".selected").style.opacity = newValue;
document.querySelector('input[type=range]').value = newValue;
}
function getOpacity() {
return parseFloat(document.querySelector(".selected").style.opacity || '1');
}
function isColor() {
return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}
function imgColor() {
document.querySelector(".selected").style.filter =
document.querySelector(".selected").style.WebkitFilter =
isColor() ? "grayscale(100%)" : "none";
}
function colorImg() {
if (!isColor()) imgColor()
}
function greyImg() {
if (isColor()) imgColor()
}
function userImage() {
document.querySelector(".selected").src = document.getElementById("userImg").value;
}
// Add this function, and call it on click on an image
function select(img) {
Array.from(document.querySelectorAll('.myImages')).forEach(
myImg => myImg === img ? myImg.classList.add('selected')
: myImg.classList.remove('selected')
);
// bring opacity slider in line with selected image
changeOpacity(getOpacity());
}
.selected {
border: 1px solid;
}
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages selected" id="image1" onclick="select(this)"
src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
<img class="myImages" id="image3" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">
First - you are not using that imgID, but String like that variable. Change to:
function selectImg(imgID) {
document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID
activeImage = imgID; //set activeImage ID
}
And then when you are doing something to an image, don't use "image1", but activeImage that is global variable (defined outside and before functions).
And as for new uploaded image:
Put it into another div and work with such algorithm -
when (uploaded_new)
hide default pics
show DIV with new image
activeImage = uploadedPic

JS function won't hide element

I'm trying to hide or show a div when clicking on a link.
This is the HTML part that I want to show or hide:
<div id="product">
<div ng-repeat="producto in productos" >
<figure class="floating">
<img ng-src="{{ producto.image }}" alt="image" class="rcorners3" style='width:100%;' border="0" alt="Null">
<figcaption> {{ producto.name }}</figcaption>
</figure>
</div>
</div>
When clicking this:
<li onclick="isitvisible()" class="guides">
And this is the script I run when clicking:
<script type="text/javascript">
function isitvisible() {
var vale = document.getElementById('product').offsetLeft;
if (vale <= 0) {
document.getElementById('product').style.visibility='hidden';
} else {
document.getElementById('product').style.visibility='visible';
}
}
</script>
The div would hide but not show at all after clicking. I think I'm failing with the offsetLeft but not sure.
offsetLeft doesn't change when you toggle a element's visibility.
Try this isitvisible function instead:
function isitvisible() {
// Get a reference to the element's style.
var style = document.getElementById('product').style;
if (style.visibility === 'hidden') {
style.visibility = 'visible';
} else {
style.visibility = 'hidden';
}
}
Or a little shorter:
function isitvisible() {
var style = document.getElementById('product').style;
style.visibility = (style.visibility === 'hidden') ? 'visible' : 'hidden';
}
Change it to this:
<script type="text/javascript">
var style = document.getElementById('product').style;
function isitvisible() {
if (style.display=='none') {
style.display='block';
} else {
style.display='none';
}
}
</script>

Show image, hide it after 5 seconds and a button comes up to show next image

For school I want to make an webpage, where I show 1 image, which disappears after 5 seconds and a button appears. You have to push the button before the next image shows up which shows then for 5 seconds. So the same story every time.
As I know a little about coding I found some piece of code here and tried to use it, but I can only let 1 image show for 5 seconds after I push the button.
Here is the code
<input type="button" value="Show image for 5 seconds" onclick="show()"><br><br>
<div id="myDiv" style="display:none"><img id="1" src="img/logo.png"></div>
<div id="myDiv" style="display:none"><img id="2" src="img/test.jpg"></div><br>
<script type="text/javascript">
function show() {
document.getElementById("myDiv").style.display = "block";
setTimeout("hide()", 5000); // 5 seconds
}
function hide() {
document.getElementById("myDiv").style.display = "none";
}
</script>
Thanks and I hope you guys can help me out! :)
Well, for starters, you've got two divs with the same id, which is incorrect. Assuming you've got your images like this:
<button id="next" onclick="showNext();">Show next image</button><br />
<div class="image" style="display: none;"><img src="img/logo1.png" /></div>
<div class="image" style="display: none;"><img src="img/logo2.png" /></div>
<div class="image" style="display: none;"><img src="img/logo3.png" /></div>
<div class="image" style="display: none;"><img src="img/logo4.png" /></div>
<script type="text/javascript">
var divs = document.querySelectorAll('div.image'); //select all divs with class 'image'
var button = document.getElementById('next'); //button.
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 5000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
</script>
I didn't bother with styling your elements with CSS rules, which would be recommendable, but this would work as intended.
Remove the double quotes:
setTimeout(hide, 5000); // 5 seconds

Set location as if invisible pictures don't exist

I have the following HTML and JavaScript. There are three pictures and three links. Clicking on one link shows one picture and hides the other two.
This works. However, I'd like it so that when a picture is shown, it is shown as if the other two pictures don't exist, instead of being pushed somewhere down the page. Is that possible?
HTML
<div id="content">
<div id="left">
show image1
show image2
show image3
</div>
<div id="right">
<img id="img1" src="berlin.jpg" height="200px"/>
<img id="img2" src="london.jpg" height="200px"/>
<img id="img3" src="madrid.jpg" height="200px"/>
</div>
</div>
JavaScript
function showImage(id) {
var images_id = new Array("img1", "img2", "img3");
for (var i = 0; i < images_id.length; i++) {
setImageVisible(images_id[i], false);
}
setImageVisible(id, true);
}
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Instead of this:
img.style.visibility = (visible ? 'visible' : 'hidden');
Use this:
img.style.display = (visible ? '' : 'none');

Categories

Resources