I have here a code where you can display a random image but I want to show the name of the image in the link of my website. Example: mywebsite.com/random.html=funnycat.png (or something like that)
Here is my code
It would be nice if someone could help me with that problem. Also is it even posible with HTML or do I need php?
<!DOCTYPE html>
<html>
<script>
function display_random_image()
{
var theImages = [{
src:
"http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
width: "240",
height: "160"
}, {
src: "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
width: "320",
height: "195"
}, {
src: "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg",
width: "500",
height: "343"
}];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
// create random image number
function getRandomInt(min,max)
{
// return Math.floor(Math.random() * (max - min + 1)) + min;
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
// 0 is first image, preBuffer.length - 1) is last image
var newImage = getRandomInt(0, preBuffer.length - 1);
// remove the previous images
var images = document.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].parentNode.removeChild(images[0]);
}
// display the image
document.body.appendChild(newImage);
}
</script>
<head>
<meta charset=utf-8 />
<title>Display a random image.</title>
<style type="text/css">
body {margin-top: 30px;}
</style>
</head>
<body>
<div>
<button id="jsstyle"
onclick="display_random_image();">Show Image</button>
</div>
</body>
</html>
Please try this on your example.
preBuffer[i].title = theImages[i].src;
Related
I'm trying to use appendchild to make a button that displays a random image from an array into a table, and will continue to display a new image on each click, but I need the newest image to stick to the top of the column, not the bottom. I tried to do this below but it appears to be an error.
function display_random_image1() {
var theImages = [{
src: "https://i.imgur.com/Ej3qKfd.png",
width: "120",
height: "120"
},
{
src: "https://i.imgur.com/P1i0O2m.png",
width: "120",
height: "120"
},
{
src: "https://i.imgur.com/FRaU0bc.png",
width: "120",
height: "120"
}
];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
// create random image number
function getRandomInt(min, max) {
// return Math.floor(Math.random() * (max - min + 1)) + min;
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
// 0 is first image, preBuffer.length - 1) is last image
var newImage = getRandomInt(0, preBuffer.length - 1);
// display the image
var targetContainer = document.getElementsByClassName("container");
targetContainer[0].appendChild(newImage);
targetContainer.insertBefore(newImage, targetContainer.childNodes[0]);
}
th,
td {
border: 1px solid black;
width: 100px
}
<table>
<tr>
<td>
<button id="initial" onclick="display_random_image1();">Beginning R</button>
</td>
</tr>
<tr>
<td>
<div class="container">
</tr>
</table>
If you want the new image to stick at the top, use ParentNode.prepend() instead.
...
// display the image
var targetContainer = document.getElementsByClassName("container");
// targetContainer[0].appendChild(newImage);
// targetContainer.insertBefore(newImage, targetContainer.childNodes[0]);
targetContainer[0].prepend(newImage);
Change your insertBefore statement like below,
targetContainer[0].insertBefore(newImage, targetContainer[0].firstChild);
Check the below running code,
function display_random_image1() {
var theImages = [{
src: "https://i.imgur.com/Ej3qKfd.png",
width: "120",
height: "120"
},
{
src: "https://i.imgur.com/P1i0O2m.png",
width: "120",
height: "120"
},
{
src: "https://i.imgur.com/FRaU0bc.png",
width: "120",
height: "120"
}
];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
function getRandomInt(min, max) { // create random image number
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
var newImage = getRandomInt(0, preBuffer.length - 1); // 0 is first image, preBuffer.length - 1) is last image
var targetContainer = document.getElementsByClassName("container"); // display the image
targetContainer[0].insertBefore(newImage, targetContainer[0].firstChild);
}
th, td { border: 1px solid black; width: 100px }
<table>
<tr>
<td>
<button id="initial" onclick="display_random_image1();">Beginning R</button>
</td>
</tr>
<tr>
<td>
<div class="container">
</tr>
</table>
hi
i was playing around with js and video tag in html5
and i successfully achieved to seek the cursor at any point of time i want
now the task is more difficult, i want to control the buffering of the video
like this pic here
what i want to achive
my code is still looks very basic
var video_length;
var buffer_area = [
[0, 20],
[50, 75],
[80, 100]
];
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<video width='440' height='250' src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay controls poster="posterimage.jpg">
</video>
</body>
</html>
I assume you mean control the look of the progress bar when buffering?
That can be accomplished with the video's playing and buffered attributes
var video = document.getElementsByTagName("video")[0];
var bufferBar = document.getElementById("bufferBar");
var bufferRanges = document.getElementById("bufferRanges");
var progressRanges = document.getElementById("progressRanges");
video.addEventListener("progress",function()
{
bufferRanges.innerHTML = "";
for (var b = 0; b < video.buffered.length; b++)
{
var startX = video.buffered.start(b) * (440/video.duration);
var endX = video.buffered.end(b) * (440/video.duration);
var width = endX - startX;
var newRange = document.createElement("div");
newRange.className = "bufferRange";
newRange.style.left = startX + "px";
newRange.style.width = width + "px";
bufferRanges.appendChild(newRange);
}
})
video.addEventListener("timeupdate",function()
{
progressRanges.innerHTML = "";
for (var p = 0; p < video.played.length; p++)
{
var startX = video.played.start(p) * (440/video.duration);
var endX = video.played.end(p) * (440/video.duration);
var width = endX - startX;
var newRange = document.createElement("div");
newRange.className = "progress";
newRange.style.left = startX + "px";
newRange.style.width = width + "px";
progressRanges.appendChild(newRange);
}
})
#bufferBar
{
width: 440px;
height: 15px;
background-color: #2c2c2c;
position: relative;
}
.bufferRange
{
height: 100%;
background-color: #636363;
display: block;
position: absolute;
}
.progress
{
height: 100%;
background-color: #e73853;
display: block;
position: absolute;
}
<video width='440' height='250' src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay controls poster="posterimage.jpg">
</video>
<div id="bufferBar">
<div id="bufferRanges"></div>
<div id="progressRanges"></div>
</div>
I don't know if it's possible to directly affect what is buffered. I think the closest you can get is manipulating the video's current position to be within defined zones
var video = document.getElementsByTagName("video")[0];
var video_length;
var buffer_area = [
[0, 20],
[50, 75],
[80, 100]
];
video.currentTime = buffer_area[0][0];
function set_time()
{
//Just in case the first number is higher than 0
if(video.currentTime < buffer_area[0][0])
{
video.currentTime = buffer_area[0][0];
}
//Make sure the current position is between the two numbers of a pair, and if not, bump it up to the next one
for(var b = 0; b < buffer_area.length - 1; b++)
{
if(video.currentTime > buffer_area[b][1] && video.currentTime < buffer_area[b + 1][0]) video.currentTime = buffer_area[b + 1][0];
}
//Stop the video if the player tries to go beyond the last number
if(video.currentTime > buffer_area[buffer_area.length - 1][1])
{
video.pause();
video.currentTime = buffer_area[buffer_area.length - 1][1];
}
}
video.addEventListener("timeupdate",set_time);
video.addEventListener("seeked",set_time);
I have practiced one question and this is about checking time to click the shape that comes up. I want to save the the high score and compare with the next one coming up. It is just how to store the high score . It would be great help if somebody give the way to do it. Thank you in advance
<!doctype html>
<html>
<head>
<title> Javasript </title>
<style type="text/css">
#shape {
width: 200px;
height: 200px;
display:none;
position : relative;
}
</style>
</head>
<body>
<h1>Test your reaction </h1>
<p>Click on the boxes as soon as possible and win it </p>
<p>Your time taken <span id="timeTaken"></span></p>
<div id="shape"></div>
<script type="text/javascript">
var start = new Date().getTime();
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function makeShapeAppear() {
var top = Math.random() * 400 ;
var left = Math.random() * 400 ;
var width = (Math.random() * 200) + 100 ;
if (Math.random()> 0.5) {
document.getElementById("shape").style.borderRadius = "50%";
} else {
document.getElementById("shape").style.borderRadius = "0%"; }
document.getElementById("shape").style.backgroundColor = getRandomColor();
document.getElementById("shape").style.height = top + 'px';
document.getElementById("shape").style.width = width + 'px';
document.getElementById("shape").style.top = top + 'px';
document.getElementById("shape").style.left = left + 'px';
document.getElementById("shape").style.height = top + 'px';
document.getElementById("shape").style.display = 'block';
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeShapeAppear, Math.random() * 2000 );
}
appearAfterDelay();
document.getElementById("shape").onclick = function() {
document.getElementById("shape").style.display = 'none';
var end = new Date().getTime();
var timeTaken = (end - start)/1000;
document.getElementById("timeTaken").innerHTML = timeTaken + "s";
appearAfterDelay();
}
</script>
</body>
</html>
I want to achieve something like image shown below.
More specifically, I need to have smiley faces randomly distributed throughout a 500px area and have a border on the right-hand side of the area.
but with the following code I am not getting the desired result.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute
}
div {
width: 500px;
height: 500px
}
#rightSide {
position: absolute;
left: 500px;
border-left: 1px solid black
}
</style>
</head>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
var numberOfFaces = 5;
var top_position = 400;
var left_position = 400;
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function generateFaces() {
while (i < numberOfFaces) {
var this_img = document.createElement("img");
this_img.src = "#";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = top_position - 50;
left_position = left_position - 50;
i++;
}
}
</script>
</body>
</html>
The result I am getting for the above code snippet looks like
How will I make it proper?
In your while loop you subtract 50 from top and left every time, so you get even distances for each image.
Use Math.random() for random values. The function returns values between 0 and 1, so multiply with the container size to get random positions.
You just need to go with random funtion if you require random positions. For fix position you need to implement particular position checks.
top_position = Math.random()*400; left_position = Math.random()*400;
JS Fiddle - https://jsfiddle.net/manishghec/13k8caen/
If you want to use random positions:
top_position = Math.random()*400; left_position = Math.random()*400;
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
Here is the fiddle: https://jsfiddle.net/v222wgav/1/
This is how you generate random top_position locations and random left_position locations.
You should be able to modify the code below to suit your needs.
I've included a random function getRandom which is just a standard "get a random number within this range" function.
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
To use it, just provide a minimum number of pixels, and a maximum number of pixels in the range you need.
getRandom(0, 400);
var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
while(i < numberOfFaces)
{
var this_img = document.createElement("img");
this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = getRandom(0, 400);
left_position = getRandom(0, 400);
i++;
}
}
img {
position:absolute
}
div {
width:500px;height:500px
}
#rightSide {
position:absolute;
left: 0px;
top: 0px;
border-right: 1px solid black
}
<!DOCTYPE html>
<html>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
I would do away with the #rightSide div all together like so:
var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
while(i < numberOfFaces)
{
var this_img = document.createElement("img");
this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = getRandom(0, 400);
left_position = getRandom(0, 400);
i++;
}
}
img {
position:absolute
}
div {
width:500px;height:500px
}
#leftSide {
border-right: 1px solid black
}
<!DOCTYPE html>
<html>
<body onload="generateFaces()">
<div id="leftSide"></div>
</body>
</html>
Happy Random Smilies!
Resources:
Image Credit: https://commons.wikimedia.org/wiki/File:718smiley.svg
How to use generate random numbers in a specific range
I am using the following code and tried many other codes to display images in slide. but all in vain.. no error is in my code but not a single image is displaying on web page.. my code is:
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.JPEG";/>
<img src = "Slide2.JPEG";/>
<img src = "Slide3.JPEG";/>
<img src = "Slide4.JPEG";/>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = funtion() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
}
</body>
</html>
Please guide me where is the error.
Thanks
First error:
Yor aur using file type in caps (.JPEG) it should be .jpeg / .jpg
Second error:
You forget to type the <script> tag at the starting of JavaScript code.
Third error:
You are using invalid function keyword (funtion)
var randomize = "funtion"() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
Now put this code and it should work...
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.jpg" />
<img src = "Slide2.jpg" />
<img src = "Slide3.jpg" />
<img src = "Slide4.jpg" />
<script>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = function(){
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
</body>
</html>