I'm building a simple webapp using NFC(near field communication), which involved certain tags being programmed with the URL of my website + a hash that will trigger a specific JavaScript function.
For example, "www.website.com/index.html#hide/one" will hide the element labeled "one" on the webpage. Simple enough, right? I thought it would be.
I've since learned that when you tap an NFC tag, it opens the URL in a new webpage/tab. I think this could be averted if my webpage checked to see if there are any other open pages and closes them, though.
If there's a better way to do this(trigger JavaScript functions on a webpage via a URL to that webpage), please let me know. It's important to note that there are 8 tags(elements) in total, and they all have to be triggered for the game/app to end, which requires it all to be done on the same page, preferably without refreshes(although I could probably rig something up using localstorage so it could be refreshed).
Thanks in advance, I'm just not sure how I would proceed here.
-Mitchyl
EDIT - I should mention that I already am using backbone.js for my routing needs. It's perfect for my situation at the moment,
What you need is a hash tag routing libary. http://projects.jga.me/routie/
This will run when your app page loads and read the hash, diverting the logic of your code to do something based on the hash tag, thus you make your items remove on the page in your code logic. No need for lots of pages.
But!
If the url launcher on the device launches new windows each time an item is detected, that is a problem since you can't close those windows, other than from the window itself.
Solution
The app has a main window for the game, each item is stored in local storage, You can use the local storage event system to detect if another page changes an item, and update the UI in real-time.
addEvent(window, 'storage', function (event) {
if (event.key == 'item1') {
item1.innerHTML = event.newValue;
}
});
When NFC launches a new window, display user feedback that states they have completed a task of the game then close it using a timeout.
Below that window will be the main page window with the update displayed.
Done properly it will work brilliantly. You can also add a nice x close button on the pop windows as tasks are completed.
Related
I have made a basic HTML file by using HTML, CSS and javascript. Based on the user's input and specific actions, I've run methods to create elements(which alter the page). And when the user wishes to go to another page via the link in the page, I want to save the changes that are made in the page.
Note: I am using Google Chrome on Windows XP
And the method execcommand() does not work on Chrome
Any help is appreciated
Thanks in advance
Then you can do two things,
first:
Detect when the user changes the page, at that time script for coping the page like:
var your_var = $(document).html();
$(document).load("new-page.html");
and then navigate a back button detection, when the user comes back to the first page just place your_var like:
$(document).html(your_var);
This is only applicable when your page navigation is done using only jQuery/ Ajax.
Second:
If you want to save state with server side scripting as well then use
javaScript.history();
this will give you the same page you left before with state.
We have designed the application with tabbed pages layout.
Tabbed Page Style
the tabs are page and are created on click of menu, these are and added in parent container as child DOM element,it is a new form which has input elements,we could have many tabbed pages at a time. my application is in Spring MVC ,PostgresSQL ,Jquery.
What happens when refreshed, lost all the added dynamic new tabs (tabs are pages and we lost the current state).
I could share the reference code if required.
Please suggest how could I manage the state of application.
Window reload/refresh is a pure browser event that ends the execution of the page, you can't really have script continuity after it.
One option is to attach an alert to window.onbeforeunload informing the user that the content will be lost if they reload - this will work with closing the window and refreshing it.
If, however, you need to be able to reload (eg, to load fresh data in the tabs) while preserving tabs, you can use window.onbeforeunload to prompt the user whether they want to save the data/layout before closing, and if so, execute an AJAX call to the server, where you save the tabs (associating it with the session). This would mean that on loading the page you need to first check if there is tab data associated with the session, and load from there.
Other option - and this would be my preference - is to use window.localStorage to save the data on user's disk, and on page load check if there is data in localStorage. It has pretty wide browser support at this point, and there are good libraries that make using it a breeze. I have used store.js and can vouch for its ease and reliability.
We have a small group of guys who play the game below. We take these games and stream them on Twitch so we can watch them as a group live. We have gotten down the process of automatically opening the URL and streaming the games. However, to get the plays to show there is an OnClick function that we have to manually remote in each time and click. Is there a way we can open this webpage and simulate the click so they are turned on? If you click the link below, you'll see a yellow button called Plays. If you click it you'll see what we want to be able to turn on without manually having to do it.
http://glb2.warriorgeneral.com/game/replay/171542
This depends a lot on how you're automating the page opening.
Normally, you can simply call .click() on an element in JS. But since you want to click something on a page you don't control, it gets complicated.
If you're simply opening a new tab/window via Javascript, you won't be normally able to do this because of cross-domain JS protections. You can disable them which is not recommended--if you go this path, you'll want to load the page in an iframe and execute a callback on it: see this answer. The callback you'll want will look something like:
function(){ window.frames[0].document.getElementById('toggle_plays').click(); }
Knowing how you're doing the automation would help significantly on how to solve the problem within your limits.
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
I'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.