I made a small webpage for some of my friends, and one of them is having an issue.
I'm using javascript to reload an iframe like so:
↺ Repair
Using jQuery, but for one of my friends using Firefox 21.0 on Windows 7, this causes the page to instead entirely change to the iframe itself; specifically, the livestream widget.
Livestream tends to bork fairly frequently, so the repair button is fairly important to the watching experience. Is there a way I could implement this differently so this doesn't happen to him?
Try binding to the click event instead:
HTML
↺ Repair
Javascript
$('#repair').click(function(e){
var pl=$('#player iframe')[0];pl.src=pl.src;
return false;
});
Related
The requirement is I get URL of excel file in webservice response. I want to open this URL in new tab/window using javascript.
window.open(url, '_blank');
doesn't work in mac safari.
I also tried creating <a> with target="_blank" and trigger click.But it didn't work with Mac safari.
Is there any way to achieve the requirement?
Open the excel file in some specific div will also serve if it is possible.
Thanks.
Do you have a popup blocker installed ? if yes then read this . Safari/Chrome have built-in pop-up blockers that stop this from working. The only javascript that is allowed to open a new window in Safari/Chrome is javascript directly attached to click handlers (and other direct user input handlers). In past versions people figured out some ways to cheat (like generating some other element -- a form or div -- and simulating user input with javascript), but newer versions are smarter about detecting this. I'd recommend re-configuring things so that you don't use a delayed pop-up -- that is the kind of thing that can generally be jarring to a user after all.
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
I'm trying to find out answer to my problem, but Google and other sites can't help me.
I'm building mobile website and I need redirect to homepage where browser is reactivated (unlock screen or open from minimalized). Is it possible?
Thanks a lot
Maybe you can do something with window.onunload event
No in short,
There is no specified way to detect a lock screen as such there is nothing in HTML / Javascript.
However you could use PhoneGap and create a mobile application,
I have a class to make events in PhoneGap easy
then you can use Application paused if you still want your application to only work online you can use an AJAX loader to load the content as using PhoneGap dose not hit the Cross-Origin domain policies of JavaScript normally
This i think is the only alternative you can use and it would require quite a bit of work to make your site become a mobile application.
EDIT:
Sorry a bit of Detail. PhoneGap allows you to build mobile applications HTML, CSS & JavaScript and provides some new events into JavaScript to help with mobile applications as well as the ability to call upon the hardware of a phone you can find more out at
http://phonegap.com/
Another Thought:
Thanks to #jeroenk for this idea it just came to me after reading his you might be able to do a little hack fix.
on your page
window.timestamp = Math.round(new Date().getTime()/1000);
setInterval(4000, function(){
var curTime = Math.round(new Date().getTime()/1000);
if(curTime > window.timestamp+5){
// do redirect
}
window.timestamp = Math.round(new Date().getTime()/1000);
});
I'm not 100% but i think Javascript gets halted when the browser on a mobile is not open, so lock screen on minimized so the above will check every 4 seconds that the Javascript has not become out of sink in (allowing for 1 second extra in case there is an application lag it would take some one more than 1 second to get though lock screen unless it was the user using the phone so it was not put down)
As i say this is a thought it might not work.
I am currently using the following JS code to trigger a file download without leaving the page I'm on:
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "/somefile.zip";
It works well pretty much everywhere I tested except on both the stock Android browser and Dolphin, where the download doesn't start at all. So far so good, after some research this hidden iframe trick happens to be known not to work on the Android browser.
But I tried several other methods to trigger the download on the Android browser, including window.open() (not reliable because popup blocking is enabled by default), or <a target="_blank"> with a simulated click() (which from a popup blocker perspective amounts to window.open() and gets blocked), or document.location = ... which downloads the file but breaks my app.
The problem with the latter document.location = ... is that this is a Comet application (server-push / long polling) so I really can't leave the page I'm currently on (and "leaving" includes changing document.location even for a file download, even if apparently the browser stays on the current page) otherwise the long polling connection is stopped and the updates stop, the app breaks. This obviously also applies when clicking normal links, either manually or simulated.
So in order not to break my app I really need to trigger a file download without leaving the page I'm on. Unfortunately I didn't find any viable solution that also works on the stock Android browser.
Any ideas?
Thanks for reading me.
Try using the anchor and simulated click without using a target=blank
I say this because I had a similar download consisting of an iframe and a simple link as fallback. The iframe worked on everything but the android, but the simple link would download successfully without leaving the page.
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)