Change the html page using a Processing function - javascript

I have a Processing sketch that I want to embed in a landing page inside a that will prompt the user to press a button and enter the site.
The function to receive the mouse click is inside the Processing file but needs to change the displayed html page - how can I do this?
<html><head>
<meta charset="utf-8" />
<title>Landing page before the main site</title>
<script src="processing-1.4.1.min.js"></script>
</head><body>
<canvas id="lander" data-processing-sources="lander/lander.pde"></canvas>
</body></html>
And the Processing sketch has the function:
void mousePressed(){
if(overBox){
// push the displayed page to home.html
}
}

Aside from being a terrible idea because you've now locked away what should be web functionality into a canvas (this is what we hate about Flash, too), you're in JavaScript context, so you can just call window.location = "http://...."; and it'll work.
That said, there is absolutely no reason to do what you're about to do here. An HTML5 button label and CSS to style it to look like your button is all you need, using Processing is plain old "you'r doing it wrong" in this instance.

Related

How to navigate to a web page via <a href> link with 150% zoom in?

I wonder if it's possible to navigate to a web page via link and zoom in to be 150%?
The only thing I could think about is to rewrite the '.click()' function and change the css there such as '-moz-transform', maybe something like this:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="https://www.google.com/search?q=kobe&igu=1" id="myLink" ></a>
</body>
<script>
$('#myLink').click(function() { zoom_page() });
function zoom_page()
{
// DO SOMETHING HERE!!
}
function autoClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", autoClick);
</script>
</html>
but not sure how exactly to do it.
Anyone can help? Thanks!
Andy
Given your example uses the URL of a well-known public site which you, almost certainly. have no control over: You can't do that.
Any JavaScript you run will apply to the current page and not the next one you navigate to.
If you could run JavaScript on arbitrary third-party websites then there would be a major XSS problem everywhere.
If you had control over the destination page then you could modify it with server-side code or JS embedded in the destination page contingent on data passed from the previous page (e.g. via the URL's query string).

Chrome- Go back to previous webpage automatically?

Is there a way to configure in Chrome (or any browser) that whenever a webpage changes it automatically goes back to the previous page.
E.g. If a user presses a "Submit" button on a survey, they will be shown the "finish" message but then the original webpage with the survey will load again?
To go to previous page use
window.history.go(-1);
Example
<!DOCTYPE html>
<head>
<script>
function initialize(){
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click",function(){
alert("successfully submited");
setTimeout(goBack,2000)
});
function goBack(){
window.history.go(-1);
}
}
window.addEventListener("load",initialize);
</script>
</head>
<body>
<button id="submitBtn">Submit</button>
</body>
To go to a specific page
window.location = "";
While I'm not convinced it's a great idea, you know your requirements better than I do.
So to go back, you run this javascript.
window.history.back()
When you say immediately go back, I assume you want them to see the finish message first before being sent back after, say, 3 seconds?
<script>
setTimeout(function() {
window.history.back();
}, 3000);
</script>
Edit
If you want to redirect without javascript, you can use a meta tag in the header
<meta http-equiv="refresh" content="3; url=http://www.example.com" />
So if you use server side rendering you could reference the HTTP_REFERER header and inject it into your meta tag.
If you don't use server side rendering (PHP, MVC, React, etc) and you can't use javascript, then no; you're stuffed.

Dropbox error: Failed to open popup window

I am experiencing a confusing error (for me it is confusing since I am new to this sort of thing, and I cannot find any good tutorials on it either) when I try to integrate a Dropbox saver into my webpage. The webpage is built using MVC4. The problem I am experiencing is that when I click on the "Save to Dropbox" button, I get the following error in dropins.js:
"Failed to open a popup window. Dropbox.choose and Dropbox.save should only be called from within a user-triggered event handler such as a tap or click event."
What does it mean? How must I rewrite my code to make this work? I've even tried making a button that calls Dropbox.save(), but the same error pops up.
So, the code:
// Button to open the saver dialog.
<button onclick="openSaveDialog();">Save</button>
// Javascript function.
function openSaveDialog() {
window.open('#Url.Action("SaveDialog")', '_blank');
}
// Controller function called by the above Javascript function.
public ActionResult SaveDialog()
{
return View();
}
// Here is the code for the save dialog. Note that the key to the Dropbox javascript link has been omitted for my safety ;)
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Save</title>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="<key omitted for safety>"></script>
</head>
<body>
<div id="save">
</div>
</body>
</html>
Any advice is warmly welcome... been scratching my head at this for a good two days now, trying to find any tutorials at all.

How to load another html file using JS

I'm trying to create a website, and I'm trying to figure out how to load a page.
For example:
You click on the navigator "Home" then a the bottom of the screen It loads a page witch text saying for example "Hello Word!".
Does anybody know what to do? I'm pretty sure It involves JavaScript.
To dynamically load content, you could make an AJAX call using XMLHttpRequest().
In this example a url is passed to the loadPage() function, in which the loaded content is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
</head>
<body>
<div onClick="document.getElementById('bottom').innerHTML =
loadPage('hello-world.html');">Home</div>
<div id="bottom"></div>
</body>
</html>
When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.
hello-world.html
<p>hello, world</p>
Ok, what you are looking for is a single page application.
There are plenty of technologies implementing it, but not that easy.
Here is a tutorial I followed for doing it : http://andru.co/building-a-simple-single-page-application-using-angularjs
If you want to go further with SPAs, you will certainly need angular templates.
It's not necessary to use Ajax calls to load html. Use them when need the server to process data successfully before loading the page, if processing was successful.
If you don't have this concern, and you just want to load the html without data processing, a simple anchor tag will suffice:
click

Javascript Body OnLoad Event is not triggered due to missing body tag

I am trying to entegrate 3D Secure payment logic with javascript.
As I post the credit card info to bank, I get a reply html.. This html redirects the screen to 3D Password screen of the bank which is
<html>
<head>
<title>MDpay default response template for web</title>
</head>
<body bgcolor="#02014E" OnLoad="OnLoadEvent();" >
<form name="downloadForm" action="https://katmai.est.com.tr/mdpayacs/pareq" method="POST">
<!-- Some Input Fields -->
</form>
<SCRIPT LANGUAGE="Javascript" >
function OnLoadEvent() {
document.downloadForm.submit();
}
</SCRIPT>
</body>
</html>
if we want to open this html in a pop up screen, OnLoadEvent does not get triggered with :
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.focus();
bu if this does work which is everything good. I call the onload function in body so i dont care what is the function to be called in OnLoad.
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.document.body.onload();
popup.focus()
BUT, we don't want to do this in popup, we dont want to open a new tab or page. We want to do this on same screen that we get the values from the user.. So I write the returning html to a div, but because there can be no 2 body tags in one html, the browser does not include the new body tag which includes OnLoad function name..
document.getElementById('vpos').innerHTML=data;
document.downloadForm.submit() // this is the code that works in OnLoad function.if a write that code statically of course it works, but this code logic can always change.
How will I solve this. Hope I am clear..

Categories

Resources