link on random image background - javascript

I have this code to have random background images, I need to make sure that when someone clicks on the picture to open a web page, one for each image. Can you help me please?
this is the code:
</head><body onLoad="LoadRandomBackground(); StartBackgroundRefreshTimer()">
</body>
</head>
<body onLoad="LoadRandomBackground()">
</body>
<script type="text/javascript">
var bgImages = [];
bgImages[1]="/img/sfondi/bg-stanem.jpg";
bgImages[2]="/img/sfondi/booking.jpg";
function LoadRandomBackground()
{
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background = bgImages[randomImageIndex];
}
function StartBackgroundRefreshTimer()
{
var timer = setInterval('LoadRandomBackground()',1000); // millisecondi
}
</script>
thank's
can someone help me?

you could create a second array ...
var bgImagesUrls=[];
then assign the urls to the array using the same indexes for the bgImages
you could then place in LoadRandomBackground
document.<someelement>.href=bgImagesUrls[randomImageIndex];

Here a short possible script http://jsfiddle.net/d2Dmh/3/
bgImages[0]= {url: ...
here you can place the url you want as destination as another parameter (destination : "url")
And with
window.location = "http://www.google.com/";
you can navigate to the new page in the document click function.
You need jquery for my example.

Related

Automating Printing in JavaScript

I have a large number of links I want to print. The links are in local HTML files, so I am able to add scripts to them. I attempted a few things, but I did not get to the end. The best I have so-far achieved is to open the links I want to print in separate tabs, and the Windows.print() function does not work. Could someone help me to what I might be missing here, or point me to how I might get to my goal. Please see the code below:
<!doctype html>
<html>
<head>
<title>Print</title>
<script>
function pickLinks() {
const anchors = document.getElementsByTagName("a");
for (const a of anchors) {
const url = a.href;
const urlBase = "https://www.huffpost.com/entry/";
if (url.startsWith(urlBase)) {
console.log(getQid(url));
openInNewTab(url);
}
}
}
function getQid(url) {
const res = url.split("-");
return res[res.length - 1];
}
function openInNewTab(url) {
const win = window.open(url, '_blank');
win.print();
//win.focus();
}
</script>
</head>
<body>
<h1>Print</h1>
<button onclick="pickLinks()">PRINT</button>
Link
Link
Link
Link
</body>
</html>
Ideally I would like the print to be a PDF with a filename that reflects the URL, such as getQid(url) in the code above.
Many thanks in advance!

How to open a new link everytime the page is reloaded by someone else?

I'm trying to open build a system which opens a new link every time an anchor tag is clicked. I tried using random function but at times it opens the same link again and again. But whereas as I want the link to open in an order and follow the cycle.. That is if I have three links, the user clicking the anchor text first time will open the first link, then second, then third and later again the first link..
This means the link must change if a different user clicks.
Here is a code that I found which uses random function..
<script type="text/javascript'>
function random_3(){
var myrandom=Math.round(Math.random()*2)
var link1="http://www.codingforums.com"
var link2="http://www.cssdrive.com"
var link3="http://www.dynamicdrive.com"
if (myrandom==0)
window.location=link1
else if (myrandom==1)
window.location=link2
else if (myrandom==2)
window.location=link3
}
</script>
<form>
<input type="button" value="random link!" onClick="random_3()">
</form>
so can someone help me out with this?
I tried using random function but at times it opens the same link again and again
You're probably getting the same link several times in succession due to the random calculation that you're using.
Try the following instead:
var myrandom=Math.floor(Math.random()*3);
You should get a better distribution this way.
Now, regarding your original question, if you want a persistent state to be kept between page reloads, so that each time the link is different, you'll probably need to use cookies or localStorage for storing what was the last used index for that user.
Example:
var links = ['http://www.codingforums.com', 'http://www.cssdrive.com', 'http://www.dynamicdrive.com'];
function nextLink() {
var index = localStorage.getItem('lastPos') || -1;
index = (index + 1) % links.length;
localStorage.setItem('lastPos', index);
return links[index];
}
What you need to do is save the index of the link, and then increase it every time so that you cycle through the links in order.
Here's a working example of what you want:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
urls = ['http://domain1.com','http://domain2.com', 'http://domain3.com', 'http://domain4.com'];
var urlIndex = 0;
function openUrl(){
url = urls[urlIndex % urls.length];
window.location = url;
urlIndex ++;
}
</script>
Get a link
</body>
</html>
Here's a demo :)
First of all, you have to list your links in an array. Second, you have to define a variable that hold the last opened link's index in that array, to void a successive opening of the same link (indeed it's a URL). In general you may follow something like the following code:
urls = ['http://domain1.com','http://domain2.com', 'http://domain3.com', 'http://domain4.com'];
var lastUrl = '';
function getRandomIndex(arr){
return Math.floor(Math.random() * ((arr.length+1) - 1));
}
function openUrl(){
url = urls[getRandomIndex(urls)];
do {
if (url == lastUrl){
url = urls[getRandomIndex(urls)];
}
else{
lastUrl = url;
//Using alert instead of window.location for testing
alert(url)
//window.location = url;
}
}
while (lastUrl != url);
}
Then for test:
Click here for test
This is an online Demo
Reference: Generating random whole numbers in JavaScript in a specific range?
Edit
According your comment, the requirement is pretty easier, instead of choosing according to random value, you will define lastUrl as an integer store and every time the openUrl() is called, it will be increased by 1 after checking its value if it is greater than urls array length or not as follows:
Modified openUrl
urls = ['http://domain1.com','http://domain2.com', 'http://domain3.com', 'http://domain4.com'];
//lastUrl Index in urls array
// Global variable
var lastUrl = 0;
function openUrl(){
if (lastUrl > (urls.length - 1)){
//reset it to 0
lastUrl = 0;
}
else{
url = urls[lastUrl];
lastUrl++;
alert(url)
//window.location = url;
}
}
var myrandom = 0;
function random_3(){
myrandom += 1;
var link1="http://www.codingforums.com";
var link2="http://www.cssdrive.com";
var link3="http://www.dynamicdrive.com";
if (myrandom==1)
window.open('http://www.codingforums.com','_blank');
else if (myrandom==2)
window.open('http://www.cssdrive.com','_blank');
else if (myrandom==3)
window.open('http://www.dynamicdrive.com','_blank');
else if (myrandom>3)
window.open('http://www.codingforums.com','_blank');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form>
<input type="button" value="random link!" onClick="random_3()">
</form>
You can count click like user click on button and basis on this manage.

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 to customise a tumblr feed on a website

Hi People and thanks for reading.
I am building a small (one-page) site for my friends band, and am using a tumblr feed instead of news section. The only thing is, I'm a total novice at JS / JQuery.
I've managed to get the posts showing fine, but at the moment the feed pulls the post title, some blurb, and the date (in that order). Because I want to display the date before the title, I'm crudely using some CSS to move the date above the title (position: relative).
So far I have this in the header:
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
And this in the body just before the closing body tag:
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feedControl = new google.feeds.FeedControl();
feedControl.setNumEntries(3);
feedControl.addFeed("http://xxxxxxxxxx.tumblr.com/rss");
feedControl.draw(document.getElementById("recentPosts"));
}
google.setOnLoadCallback(OnLoad);
</script>
Does anyone know how I can customise the output so that the date comes before the title?
Thanks,
John
I think you need to hack the html rendered by Google' script; you could try to use jquery in order to make things easier. Just remember to apply your changes after the
google.setOnLoadCallback(OnLoad);
Could be something like this (not tested):
<script language="Javascript">
google.load("feeds", "1");
function loadFeeds()
{
var feedControl = new google.feeds.FeedControl();
feedControl.setNumEntries(3);
var html;
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html+=entry.date+"<p>"+entry.title+"</p>"+entry.description+"<br>";
document.getElementById("feed").innerHTML =html;
}
}
});
}
google.setOnLoadCallback(loadFeeds);
</script>

New to JavaScript and need help on my first program

I'm trying to add a function to my website so when the user clicks on a footnote the browser will display it inline. Here is how far I have gotten,
var locate= document.getElementById("footnote1");
var note= document.getElementById("footnotes2");
function footnote() {
locate.onclick= note.style.display="inline";
};
any help would really be appreciated.
Here is an example of what you want.
var locate = document.getElementById("footnote1");
var note = document.getElementById("footnotes2");
locate.onclick = function() {
note.style.display = "inline";
};
Working Example
http://jsfiddle.net/v8fHE/
you just had to wrap the onclick action in a function
trigger.onclick=function(){toChange.style.background="#FF0000"};

Categories