We Keep Coding

Change image and text info with one button click prev and next simultaneously

I'm a absolute beginner to HTML CSS and javascript. I have almost finished the website I'm building but stuck at one javascript thing... On different pages I have made image arrays with Javascript, no problems there. Only the text info next to the image has to change with the same button click.... I have tried several things but I need some help. I hope someone will help me.
HTML
<div><img style="width:573px" src="images/omejan.jpg" class="omejan-images"></div>
<div><p class="titel">ome<br>Jan</p>
<p class="platte-tekst">Een dressoir, bloemenvaas, lamp, kalender, telefoon en een lijstje. Elke week verse bloemen voor hun broer.</p>
<p class="voetnoot">Onderdeel van het project de tantes</p>
<p id="imageinfo" class="foto-info">2007</p><!--only this text line has to change-->
</div>
<div></div>
<div></div>
<div></div>
<div>
<div><button class="pijl-links" onclick="prev()"><img src="images/pijl_links.svg"></button></div>
<div><button class="pijl-rechts" onclick="next()"><img src="images/pijl_rechts.svg"></button></div>
</div>
<div></div>
<div></div>
Javascript
var slider_img = document.querySelector('.omejan-images');
var images = ['omejan_2007.jpg', 'omejan_2009.jpg', 'omejan_2010.jpg', 'omejan_2011.jpg', 'omejan_2013.jpg', 'omejan_2014.jpg'];
var i = 0;
//var imageinfo = ['2007', '2009', '2010', '2011', '2013', '2014'];
//document.getElementById("imageinfo").innerHTML= imageinfo[0];
//I have tried the two lines above, won't work.
function prev(){
if(i <= 0) i = images.length;
i--;
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++;
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
////next option I have tried
function shuffle(){
var images1 = [], descriptions = [],
index1 = 0;
images1[0] = "images/omejan_2007.jpg";
images1[1] = "images/omejan_2009.jpg";
images1[2] = "images/omejan_2010.jpg";
images1[3] = "images/omejan_2011.jpg";
images1[4] = "images/omejan_2013.jpg";
images1[5] = "images/omejan_2014.jpg";
descriptions[0] = "2007";
descriptions[1] = "2009";
descriptions[2] = "2010";
descriptions[3] = "2011";
descriptions[4] = "2013";
descriptions[5] = "2014";
index1 = Math.floor(Math.random() * images1.length);
document.getElementById("omejan-images").src = images1[index1];
document.getElementsByClassName("foto-info")[0].innerText = descriptions[index1];
}
///With the code above I was glad to have some movement on the page, only it is shuffle... I want the Images and text in order. Couldn't solve it
// myself...

You could make use of objects here in order to keep your image information together - e.g.
const images = [{
src: 'omejan_2007.jpg',
description: '2007'
}, {
src: 'images/omejan_2009.jpg',
description: '2009'
},
{
//...etc
}];
As we're still using an array (just an array of objects instead of strings), your next() and prev() functions still work to set the index. So, we'd just need to make a slight change to setImg:
function setImg(){
const image = images[i];
const description = document.getElementById("imageinfo"); //this could also be declared at the top with your other variables
description.innerHTML = image.description;
slider_img.src = image.src;
}
As an aside, there are a few other "code review"-y things I've noticed.
Typically, you should try to avoid onclick="function" attributes. The more preferred way of doing this is to use event handlers, e.g.
<!-- adding ids to the buttons -->
<div><button class="pijl-links" id="prev"><img src="images/pijl_links.svg"></button></div>
<div><button class="pijl-rechts" id="next"><img src="images/pijl_rechts.svg"></button></div>
<script>
document.getElementById("prev").addEventListener("click", prev);
document.getElementById("next").addEventListener("click", next);
</script>
i isn't the most descriptive variable name - this should probably be renamed to something like current_image
var is no longer recommended for variable declarations - instead you should look to use const (for constant variables) or let.
You are returning from setImg, next and prev, but not doing anything with the return value. You probably don't need to do this? If it's to do with the page refreshing and/or jumping, you can add the type attribute to the button to stop it from being treated as a submit
<button type="button" class="pijl-links" id="prev"><img src="images/pijl_links.svg"></button>

Replace relative URL from Facebook Feed

I have a page that is pulling in a Facebook RSS feed. Unfortunately, the feed contains both relative and absolute paths. I want to give users the ability to click on any given story and read it on Facebook. One of the generated links is relative, so what should be:
http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1
is converted to
http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I tried the following:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("/ShannonBaumGraphics/photos/","http://www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
But ended up with
http://www.shannonbaumsigns.comhttp//www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I know it's something simple, but I'm not strong enough with Javascript to pinpoint the problem.

you can simply assigning new url.try using this :
aEl.href ="http://www.facebook.com/ShannonBaumGraphics/photos/";

aaEl.href = aEl.href.replace('http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/','http://www.facebook.com/ShannonBaumGraphics/photos/');
// http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1

Thanks for your help. It pointed me in the right direction. Part of the problem is that the site uses multiple domain names (I should have mentioned that). So I added some PHP to grab the domain name to search for the address, and then replaced it with the Facebook link.
Here's what it looks like now:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("<?php echo $_SERVER['SERVER_NAME']; ?>/ShannonBaumGraphics/photos/","www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
Maybe there are better approaches, but this seems to work.

How can i change the contents of HTML dynamically

I have a Some messages to be displayed on every specific set of interval say 10 seconds.But at present i am able to show only one message .How to show rest of the messages after interval ..
Here is the Code..
<script type="text/javascript">
var v = "Your Text<br/>Hello";
var v2 = "Your Text2<br/>Hello2";
var v3 = "Your Text3<br/>Hello3";
window.setInterval(function () {
$("#dynamicMessage").html(v);
}, 10000);
</script>
As per my current code i am able to display the first message but how to show others like v2 ,v3 here.
Please help me..

Make an array with all your messages, and increase a counter inside the setInterval function.
You can take a look at the sample in this fiddle: http://jsfiddle.net/s6c4hs91/
var v = {};
v[0] = "Your Text<br/>Hello";
v[1] = "Your Text2<br/>Hello2";
v[2] = "Your Text3<br/>Hello3";
var i = 0;
window.setInterval(function () {
$("#dynamicMessage").html(v[i]);
if (i == 2) {
i = 0;
} else {
i = i + 1;
}
}, 500);
You should control how you want the messages to appear after you get to the end of the array of messages: I have done a loop to start with the first message.
For doing the fade in/out transition just add those functions arounfd the html "write" sentence:
$("#dynamicMessage").fadeOut(800,'swing',$("#dynamicMessage").html(v[i]).fadeIn(100));
view sample in: http://jsfiddle.net/s6c4hs91/1/
For more info. on fade in take a look at: http://www.w3schools.com/jquery/eff_fadein.asp

Try this : you can use array instead of three different variables and iterate through array after every 10 seconds.
<script type="text/javascript">
var v = ["Your Text<br/>Hello","Your Text2<br/>Hello2","Your Text3<br/>Hello3"];
var i = 0;
window.setInterval(function () {
$("#dynamicMessage").html(v[i]);
i++;
if(i==3)
i=0;
}, 10000);
</script>
DEMO

try it :
var messages = ["Your Text<br/>Hello","Your Text2<br/>Hello2","Your Text3<br/>Hello3"];
var index = 0;
window.setInterval(function () {
index /=3;
$("#dynamicMessage").html(messages[index]);
}, 10000);

Creating a very simple game in JS

I'm currently making a game in JS, and I faced a problem.
I got an 2D array that stores an image, now I want some random pic to be changed every 1 second, everything is working but, I don't know how I can change the picture.
Do I have to print all the other images if I want to change the random cell in the array?
I'm almost sure that there's another way to change it without doing it.
I'll be glad for help, if anyone needs other explanation I'll be glad to.

You can try using something like this in your header. It should call changePic() every second, incrementing through your picture array, and setting the new picture on an image element.
//know your array sizes
var max_x = picArr.length;
var max_y = picArr[0].length;
var current_x = 0;
var current_y = 0;
function changePic()
{
if(current_y == max_y-1)
{
if(current_x == max_x-1)
{
current_x = 0;
current_y = 0;
}
else
{
current_x++;
current_y = 0;
}
}
else
current_y++;
var pic = picArr[current_x][current_y];
getElementById('randomImage').setAttribute('src', pic);
window.setTimeout(changePic, 1000);
}
setTimeout(changePic, 1000);
https://developer.mozilla.org/en/DOM/window.setTimeout

I would start out with something like
var ImageOne = new Image();
ImageOne.src = "UrlToImage";
And so on just to make sure all the images are loaded when the game starts
Thereafter I would be using jQuery:
$("#IdOfImg").attr("src", ImageOne);

You might want to try using a css class for the elements with a background image rather dan adding images to the DOM. I think a css class for back.png and one for the 1.png should do the trick.
Toggle the classes on the td elements every second.
Hope this helps.

random image; without repeating?

First off I'm not very familiar with javascript, thus here I am.
I have this code for my site to draw a random image. Working from this, how can I make the images not repeat? Thanks in adv! Code:
<script type="text/javascript">
var banner_list = ['http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/LM_LogoMark4-4-2.gif', 'http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/logobg_dome.png', 'http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/logobg_brain.png']; $(document).ready(function() { var ran = Math.floor(Math.random()*banner_list.length);
$(".logobg img").attr(banner_list[ran]);
}); $(document).bind("projectLoadComplete", function(e, pid){
var ran = Math.floor(Math.random()*banner_list.length);
$(".logobg img").attr("src", banner_list[ran]);
}); </script>

After you display the image splice it out of the array, you can use banner_list.splice(ran, 1);. The arguments are .splice(index, howManyToRemove, howManyToInsert). Inserting is optional, so you can just use splice to start at the index of the image you're displaying and remove one. Make sure not to remove it until you're done referencing it.

You can use Array.splice() as Robert suggest with 2 Arrays. One for unsused and one for used images. Check my JSfiddle.
var images = ["http://www.fowkesauto.com/products_pictures/nutsbolt.jpg",
"http://i01.i.aliimg.com/photo/v0/114511763/Fasteners_Bolts_and_Nuts.jpg",
"http://us.123rf.com/400wm/400/400/DLeonis/DLeonis0810/DLeonis081000018/3706757-bolts-and-nuts-on-white.jpg",
"http://static3.depositphotos.com/1003288/173/i/950/depositphotos_1737203-Nuts-and-bolts.jpg"],
usedImages = [];
setInterval(function () {changeImage();},500);
var changeImage = function () {
var index = Math.floor(Math.random() * (images.length)),
thisImage = images[index];
usedImages.push(thisImage);
images.splice(index, 1);
if (images.length < 1) {
images = usedImages.splice(0, usedImages.length);
}
$("#image").attr("src", thisImage);
}