Conversion Tag on Event - javascript

I am trying to get a conversion pixel on a button tag, I want this pixel to fire when a user agrees to hit the submit button, and the URL does not change (just a thank you message pops up on the page). I already have a conversion tag on the page, but want to count those that hit this action button separately. Any help would be appreciated.
<html>
<body>
click here
<script language="javascript">
<!--
function ftGoalTag19212(){
var ftRand = Math.random() + "";
var num = ftRand * 1000000000000000000;
var ftGoalTagPix19212 = new Image();
ftGoalTagPix19212.src = "http://servedby.flashtalking.com/spot/2531;19212;1515/?spotName=Demo_Thank_You&cachebuster="+num;
ftGoalTagPix19212.onload = ftLoaded19212;
}function ftLoaded19212() {
top.location.href="http://www.UrlGoesHere.pdf";
}
// -->
</script>
</body>
</HTML>

Related

Get an element in an <embed> tag

I'm a beginner in Javascript and i'm trying to get an element from an embed tag. This embed tag contains a pdf.
I want to get the button "next page" from the pdf viewer, and simulate a click on it, in order to automaticly scroll to the next page of the pdf.
My HTML code is something like this (really simplified) :
<html>
<body>
<div id="display-zone">
<embed id="myPdf" src="./myPdf.pdf">
#document
<html>
<body>
<!-- The button I want to get in my JavaScript -->
<button id="next" class="toolbarButton pageDown"></button>
</body>
</html>
</embed>
</div>
</body>
</html>
My JS code to print the pdf viewer on the web page :
affichage.innerHTML = "<embed class=\"media\" id=\""+ongletsMedias[i].firstChild.data+"\" src= \""+ongletsMedias[i].firstChild.data+"\" width= \"1000\" height= \"800\">";
// ongletsMedias[i].firstChild.data equals to "myPdf"
t = 5000; // time before starting pdfDefile()
setTimeout(pdfDefile,t,ongletsMedias[i].firstChild.data,i,1); //call the function to scroll pdf pages
And finally my function pdfDefile() that I'm calling in order to scroll the pdf pages :
function pdfDefile(dir,i,page) {
var xhttp = new XMLHttpRequest();
var t = 0;
xhttp.onreadystatechange = function() {
var checkbox = document.getElementById('checkbox');
if (this.readyState == 4 && this.status == 200 && checkbox.checked) {
document.getElementById("span").innerHTML = this.responseText; // display the number of pages of my pdf
var t = 5000;
if (page < parseInt(this.responseText)) { //test for recursive call
/*HERE is where I want to get the "next" button */
setTimeout(pdfDefile,t,dir,i,page+1);// recall this function while there is a next page to display
} else {
setTimeout(jouerMedia,t,i+1);// call the main fuction, no problem here
}
}
};
xhttp.open("GET", "nbPagesPDF.php?pages="+dir, true);
xhttp.send();
}
I already look at an existing topic (Get element in embed tag), but I can't make it work in my JS.
So please, can you help me to make my code great again (may it have been ;-) ) ?
Regards
Try
var embed = document.getElementById('myPdf');
// Wait for document to load inside embed element
embed.on('load', function() {
embed.getElementById('next').click();
});
(I am using jQuery in this example for adding the event listener, not sure if you are using it on your project?)
Without jQuery you could do:
var embed = document.getElementById('myPdf');
embed.onload = function() {
embed.getElementById('next').click();
};
It might be possible you can not trigger a click event on that button since a user action often must have taken place to trigger click's from js.

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.

php form sending to handler

I did an assignment and ended up with this correct code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Assignment 2</title>
<script type="text/javascript">
var imageURLs = [
"p1.jpg"
, "p2.jpg"
, "p3.jpg"
, "p4.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
$(document).ready(function() {
$("img").on("click", function(event) {
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
alert("X Coordinate: " + x + " Y Coordinate: " + y);
});
});
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>
so now the next assignment says this: Your task is to add some validation to task 1B, by creating two PHP scripts.
The first PHP script that will create an HTML document that contains an img tag that is randomly selected. The HTML document will contain a form that will be used to store and send data (the click co-ordinates) to the second (handler) script.
The second PHP script is the handler that will check the submitted coordinates with the answer. If the click is within 10 pixels of the answer, show the user a congratulations message, otherwise compute how far they were off from the answer. You should also display the number of seconds it took for the user to send their answer.
Hint: The first script needs to send data to the second script, namely the current timestamp and a value that represents which image is being presented to the user. The first script can send this data to the second script by using hidden input fields.
and is followed by this:
Image and Answer Data
$puzzles = array (
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p2.jpg",
'x' => 235,
'y' => 389),
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p3.jpg",
'x' => 437,
'y' => 221),
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p4.jpg",
'x' => 469,
'y' => 110),
);
I have no idea that they are even asking of me and am very confused, if anyone can help me it would be greatly appreciated!
This is what I think they are asking:
Script 1- show a random image, and when user clicks on an image, send the coordinates and the time it took since the puzzle started. The hint is to use form fields. So you need to create a form with hidden input fields. When user clicks on an image, set the values of these fields (time, coordinates, image name,etc.) and submit the form. Form needs to be handled by script two.
Script 2- decide if user should be shown win, lose or try again message, and relay this reply to the user.

localStorage not working to "save" game

Good day!
Complete JS noob here. I was following this tutorial: http://dhmstark.co.uk/incrementals-part-2.html regarding saving and loading the game. However, it is not working at all. I was hoping you fine folks might be able to easily tell me the issue with the code. There are no errors coming up on the browser console at all. But, when I re-load the page, it is not loading the "saved" data. I have tried putting the load() function within the js file itself, as well as including in the HTML header. I have also tried calling the load() function with a window.onload within the script itself.
Please help.
HTML
<!DOCTYPE HTML>
<head>
<title> Game </title>
<link rel="stylesheet" type="text/css" href="interface.css" />
<script type="text/javascript">
function load() {
var savegame = JSON.parse(localStorage.getItem("save"));
if (typeof savegame.clicks !== "undefined") clicks = savegame.clicks;
}
</script>
</head>
<body onload="load()">
<button onClick="increment(1)"> Click </button>
<span id="clicks"></span><br /><br />
<button onClick="buyThing()"> Buy Thing </button><br />
Things: <span id="things">0</span><br />
Next Thing Cost: <span id="thingCost">10</span>
<script type="text/javascript" src="main.js"></script>
</body>
JS
//click tracker
var clicks = 0;
function increment(number){
clicks = clicks + number;
document.getElementById("clicks").innerHTML = clicks;
};
//cursor
var things = 0;
function buyThing(){
var thingCost = Math.floor(10 * Math.pow(1.1, things)); //works out cost of this cursor
if(clicks >= thingCost){ //check that player has enough clicks to afford cursor
things = things + 1; //increase number of cursors
clicks = clicks - thingCost; //remove clicks spent
document.getElementById('things').innerHTML = things; //update the number of cursors for the user
document.getElementById('clicks').innerHTML = clicks; //update the number of clicks for the user
};
var nextCost = Math.floor(10 * Math.pow(1.1,things)); //works out the cost of the next cursor
document.getElementById('thingCost').innerHTML = nextCost; //updates the cursor cost for user
};
var save = {
clicks: clicks,
things: things,
}
//loop
window.setInterval(function(){
increment(things);
localStorage.setItem("save",JSON.stringify(save));
}, 1000);
Your save object will be declared and defined only once and never be changed, so you will be saving over and over again the first initial value of the progress, you should save a newly object on each interval:
window.setInterval(function(){
increment(things);
localStorage.setItem("save",JSON.stringify({clicks: clicks, things: things}));
}, 1000);
You are getting a reference issue. The memory addresses of clicks and save.clicks are not pointing to the same thing, since it's a primitive number.
Putting all your game data into a single object will help reduce the global namespace pollution as well.
<!DOCTYPE HTML>
<head>
<title> Game </title>
<link rel="stylesheet" type="text/css" href="interface.css" />
<script type="text/javascript">
function load() {
return JSON.parse(localStorage.getItem("game")) || {
clicks: 0,
things: 0
};
}
</script>
</head>
<body onload="load()">
<button onClick="increment(1)"> Click </button>
<span id="clicks"></span><br /><br />
<button onClick="buyThing()"> Buy Thing </button><br />
Things: <span id="things">0</span><br />
Next Thing Cost: <span id="thingCost">10</span>
<script type="text/javascript" src="main.js"></script>
JS
//click tracker
var game = load();
function increment(number){
game.clicks += number;
document.getElementById("clicks").innerHTML = game.clicks;
};
//cursor
function buyThing(){
var thingCost = Math.floor(10 * Math.pow(1.1, game.things)); //works out cost of this cursor
if(game.clicks >= thingCost){ //check that player has enough clicks to afford cursor
game.things++; //increase number of cursors
game.clicks -= thingCost; //remove clicks spent
document.getElementById('things').innerHTML = game.things; //update the number of cursors for the user
document.getElementById('clicks').innerHTML = game.clicks; //update the number of clicks for the user
};
var nextCost = Math.floor(10 * Math.pow(1.1,game.things)); //works out the cost of the next cursor
document.getElementById('thingCost').innerHTML = nextCost; //updates the cursor cost for user
};
//loop
window.setInterval(function(){
increment(game.things);
localStorage.setItem("game",JSON.stringify(game));
}, 1000);

iframe next page button for src (non array, actual src change)

I want to be able to change the source of an iframe but not the ways that I have found.
I want the iframe to start as http://www.example.com/1 then with the click of a Next button have the source change to http://www.example.com/2 but only the number needs to change.
So far I've found this:
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
Which is great for keeping track of clicks on a page but I want to append the iframe src with the next number and have it load, sequentially.
Any ideas?
Tested and works:
<script>
var c=1;
var url="http://www.google.com/";
function f(){
document.getElementById("clicks").src = url+c;
c++;
}
</script>
<iframe src="http://www.google.com/1" id="clicks" >
</iframe>
<input type=button onclick="f()">

Categories