I have web app with several pages, eventually it will be 100% mobile ready, but it's not right now.
When someone accesses it from a mobile device, I have a dialog which pops up to tell them it's not mobile ready yet.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
//alert(navigator.userAgent);
.dialog();
}
There is a lot of JS and HTML which executes when the page loads, I can stop the JS with an if statement, but the HTML still loads. The problem is all the HTML is broken and out of place behind the dialog. I'd rather not fill the entire screen with the dialog or just hide everything behind a big div. I would like to stop everything on the page except for the dialog.
Is there anyway to stop the HTML executing and is there a better way to stop the JS executing than with an if statement?
You cannot prevent loading of HTML or JS code to browser on client side, only on the server.
One option is to put all excess html and js in a separate file and load it through AJAX only if the mobile test failed.
For instance you can use jQuery.load() http://api.jquery.com/load/ Load data from the server and place the returned HTML into the matched element.
Related
I have created simple header bars. Each of them will send a request when clicked, but on the mobile device (doesn't matter which one but even desktop Google Chrome mobile mod on the console) DOM begin to get blocked and stops working at all.
I suspect that:
when user clicked button I send very long get request
I bind new listeners (again and again) but not this header bar
How can I prevent this?
How did you attach your click events ? It should not be complicated.
Here is a simple code sample that should work (also on mobile browsers):
HTML snippet:
<button id="myBtn">Click here to load content</button>
<div id="contentContainer"></div>
Javascript (using jQuery) snippet:
$('#myBtn').on('click',function(){
// show some indication to the user that you are loading something
$('#contentContainer').html('<strong>Loading content, please wait..</strong>');
// do your ajax call
$.ajax({
url:'https://api.myapp.com/get/user-info',
}).done(
function(data){
// all done - display the loaded content
$('#contentContainer').html(data);
});
});
Use this as a use-case, if you are still getting "blocked" after executing javascript on a mobile device (clicking an element that is attached to a click handler is also executing js), it usually means that you have a javascript error - which causes the mobile browser to stop from running any more javascript until you fix the problem and reload the page.
Hope it helps a bit!
I have template design. Everything works fine except when I submit a form. When the server responds (same page), it will go to the bottom of the page. It happens if the whole page is bigger than the screen's height.
Example (if whole page is smaller than the screen's height):
Submit form, server responds with same page, then the page stays at the top.
Example (if whole page is bigger than the screen's height):
Submit form, server responds with same page, then the page goes to the bottom.
I have disabled the javascript (removed the <script> tags). And it only happens in Chrome.
I have tested it in firefox and IE, and the page will stay at the top after submitting a form.
..........
Also, if I put an empty <script> </script> tag before the content, exactly like this. The page (in Chrome) will stay at the top. I'm assuming it has to be on how Chrome renders the page.
If there is no <script> tag, Chrome will aggressively render the page. And if there is a <script> tag somewhere in the content, it will render it slower or differently.
..........
Also, I'm using Symfony2 (a PHP framework), it happens every time when in dev mode. When I switch to prod mode (css and js get compiled and merged), it happens rarely.
I would normally say the problem is the CSS/HTML layout but in only happens in Chrome and if the page is served in a timely manner (fast), the problem disappears (the page stays at the top).
My question is: Is this a known issue? Can it be fixed relatively easy? Or should I just pray the page is loaded fast so the problem doesn't happen?
Chrome version: 38.0.2125.111 (64-bit)
If you need more details, I would be gladly to provide them. Thanks in advance
Edit: Server responds the same page both dev and prod mode. The difference is that in prod mode, it is optimized for a production environment. The CSS/JS get merged and compiled, making the page load faster.
If by any chance anybody is experiencing this, this is my solution:
Make sure to minify/uglify, compile/merge the CSS. Use aggressive cache. So Chrome doesn't render the page without the necessary CSS style.
Using <script> </script> tag somewhere in the content is a hack.
I would recommend to use jquery:
$('html,body').animate({scrollTop: 0}, 'slow');
The problem would only occur if after submitting the form, you don't redirect (form has errors). If there are form errors, you would probably show a message div alert, so with that script you would scroll/animate to that div element.
I am working in a desktop application that has an embedded browser. There is a process that loads a page in this embedded browser and sets the focus on it.
This is not wanted and disturbs. An interesting detail is that if I create an alert after the page gets loaded, when I click to close it, the focurs return to the "host" desktop application, which is exactly what I want.
Is there a way in javascript to tell "turn back the focus to wherever it was"?
Thanks in advance.
I have a link which opens in the child browser of phonegap - for those not familiar with phonegap just think of it as a new window.
The link that I am opening has an annoying alert which pops up the 1st time the webpage is loaded on the device. I would like to stop this alert poping up by trying to change the cookie the webpage uses to check if it has been loaded before.
Is this possible?
How would I go about doing this?
Little Difficult.
You could host your own html page remotely and enclose the page you are opening inside a iFrame which you could stop the alerts by some type of javascript. Or (using ajax) remotely retrieve the page you are after?
I would like to be able to print a PDF document automatically when a user clicks on a print button. Currently what the way I am doing it is I render the PDF and save to the server disk and have it appear in an iframe then I tried to print the content of the iframe using javascript:print(). however what is printed is an empty html page.
I am doing this because using the norm HTML print is wrecking the layout of the webpage i am trying to print. so i'm rendering the page to a pdf format to print the webpage. i don't want the users to be able to save the pdf hence i am trying to slient print the pdf page. hence i am loading it in an iframe by changing the src in the code behind and re-rendering the page and then triggering the js script.
function printPDF(){
document.iframe_printArea.focus();
document.iframe_printArea.print();
}
I am wondering if it is possible to print a pdf document loaded in an iframe using print() or whether this is even possible. I have extensively googled on this and have yet to come up with any solutions that works for a web application. Most of the resources are devoted to C# windows app. The platform I am using is .NET C#.
First of all I'm very sorry for whom that have to deal with IE6.
There is an non-standard DOM event developed by Microsoft that fire before print. It's onbeforeprint event (docs). What you can do is hiding everything but the iframe and shrink the iframe to the window size before print. and after print reverse the document to normal statues with onafterprint event.
function window.onbeforeprint()
{
// hide other elements and shrink the iframe
}
function window.onafterprint()
{
// unde what heppened onbeforeprint
}