Disabling javascript code on iPad only - javascript

I have a pretty large script in my page that seems to be crashing my site on iPads. It's a vertical image carousel that runs on intervals and it involves 5 functions. I can remove the script and then the site loads fine on iPad but the carousel no longer works (which is OK on ipad).
How can I disable this script on iPad?
I tried using this: http://davidwalsh.name/detect-ipad
basically:
<script>
var isiPad = navigator.userAgent.match(/iPad/i);
if ( !isiPad ) {
//large script goes here with multiple functions
}
</script>
Do I need to wrap each individual function in "if ( !isiPad ){} ? Is there any way I can only allow the entire script to run if the device being used is NOT an ipad?
Thanks in advance for help!
The full script can be seen here: https://jsfiddle.net/hf9tf7rs/

You've got the right idea! Just about any solution to this problem will involve using JS to detect the device or relevant browser feature and set a flag (like isiPad) which you can use in your code to turn on/off relevant bits of code.
A couple of things might improve this approach slightly, however:
If you can identify exactly what it is about the carousel that's acting up on iPad, you may be able to identify just one function that needs the isiPad conditional. E.g., if there's a $('#carousel').initCarousel() call somewhere, just wrap that one call in a conditional and you're done! If the carousel code is scattered around the codebase, see if you can't refactor it somehow to create a single bottleneck where you can put the isiPad check. An initialization block is a great spot for this. I can't be more specific without seeing your code, but if you find yourself repeating the if ( !isiPad ) {} block more than 2-3 times, take that as a red flag to seek a more central spot for it.
If you can identify which feature of the iPad's browser/bandwidth/CPU/GPU is causing the problem, you may be to use Modernizr (http://modernizr.com/) or a similar feature detection library to solve this problem on other similar devices. What appears to be an iPad bug is very frequently reproducible on other mobile tablets, and only checking for /iPad/i may leave the bug live on other devices.

Another user had asked beforehand how to conditionally load scripts.
With this in mind, what you could do is as follows:
<script>
var isiPad = navigator.userAgent.match(/iPad/i);
if ( !isiPad ) {
// Append the new <script> tag to <head>
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "insert-source-path-here.js";
head.appendChild(js);
}
</script>

Related

Website on mobile not functioning the same as when viewed on the browser at the smallest screen size

A client recently asked us to create a microsite that had the exact same look, feel and functionality as one of their current sites. Naturally, I ripped all the code, added a few bespoke classes etc, nothing big. Linked all the css and js within the site, and, once live on the staging server, it all looked great!
But then I looked at it on mobile, and it doesn't function properly. I find this strange as the site functions fine when the browser size is reduced to the minimum width. The site's live here: http://quantummarketing-group.com/Clients/Fujitsu/
I was able to find the source of my problem:
<script>
var NELibs = {};
NELibs.baseurl = "http://reshaping-datacenter.ts.fujitsu.com/";
NELibs.langid = "0";
NELibs.langkey = "en";
NELibs.langkey_alt = "";
NELibs.pageid = "9";
</script>
When I remove this code, the site displays on mobiles fine, just without the fancy JS effects, otherwise the site just does not function!
Now I can't understand why this code does not matter at all for the desktop version, but does on mobile. The code that references NELibs is here: http://quantummarketing-group.com/Clients/Fujitsu/js/bottomjquery.js (I tried absolutely referencing the links in that js file but there are some where that just won't cut it).
The original website was built using TYPO3 if that helps.
Let me know if you need anything else??

how apply scroll-sneak to my site

Hello I am currently look for solutions for keeping my scroll position on page load and I found this page ( http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/ ). Its javascript to keep scroll bar location on page load, but I just cant seem to get it working after looking through the page source and trying different things for a while (im not very experienced with JS) Could someone check this out and see if they can break it down a bit more for me ?
Thanks!
Seems like this git page comments the script a bit more.https://gist.github.com/ohaal/6882141 I'll give you an update when I have applied this to my own site. Probably I can give you a better explanation. What first comes in mind is that you need to set a ID by the latest script explained in the git page above.
// Example of applying sneak to a link:
/*
(function() {
var sneaky = new ScrollSneak(location.hostname);
document.getElementById('sneakytest').onclick = sneaky.sneak;
})();
*/

Best method of displaying an alternative on javascript crash

Im looking for a very general method of providing an alternative site to a Javascript heavy site (a link going to the old static site).
My current implementation is:
//<Some JS/HTML>
$(document).ready(function() {
//<Some JS Code>
$('#error').attr('style','display: none;');
});
//<Some html>
<div id="error">
<span>If you can see this, that means something went very very wrong. Click Here to use the old portal. Please contact some#email.com with this error and provide as much information as possible, thank you :) </span>
</div>
My current problem is that this is visible while the site is loading :(. Is there a better method?
I know i can try and add lots of trys and catchs (theres already several), but the problem is the primary clients are going to be using a mixture of clients between. FF2-FF3, all version in between, and IE5-IE6. The IE5 im just placing a messagebox and redirection if they try to load the site, im not even going to try and make that compatible.
And these old browsers just are not compatible with certain things.... I know i could add in an .onerror, but FF didn't add compatibility until FF6 which is to new for most of the clients. (although strangely, IE5.5 has it)
NOTE: Im just jQuery 1.7.1
The basic flow of the current operation is just when it finishes loading the initial javascript it hides the div.
You can use mainly CSS with a JS helper for this.
Put this JS code as close to the top of the document as you dare, preferibly after the charset declaration. You will need to include jQuery before this line or you can use standard JS (document.getElementByID('html-tag').className='js';, this assumes you've given the html tag an id of html-tag):
$('html').addClass('js');
Then you can write your CSS to take into account the fact that JS may or may not be available:
#error {
display : block;/*if no JavaScript is available then show this element*/
}
.js #error {
display : none;/*if JavaScript is available then hide this element*/
}
Here is a demo: http://jsfiddle.net/x4tjL/ (JSFiddle seems to be having problems right now, here is a JSBin: http://jsbin.com/ahezuc/edit#preview)
Update
Putting the JavaScript code as near the top of the document and not wrapping the code in a document.ready event handler allows you to minimize the "flash" of content that is common when trying to hide/show content based on JS.
A simple solution would be to detect all incompatible browsers and show the message to upgrade their browser or to redirect to non js site, something like:
for IE5 and 6
if ($.browser.msie && $.browser.version <= 6){
//show my message here
}

Page load in IE, page includes flash banner

So here is the problem.
I have a flash banner consisting of two swf's which talk to each other through LocalConnection and also call external JS functions. (I haven't figured out whether this is important or just a coinsedense.)
I also have an external JS file, which tells the banner what to do through flashVars. And has the function which the banner calls on events.
As you can imagine this works everywhere allright except IE.
In IE I expirience this problem: I try to load a test page, which has a lot of pictures and a heavy background (so it takes a while to load). And i place the banner, which is added whith javascript before all that content. Something like this:
http://pastebin.com/nnTuPPhN
And sometimes usually on reload some pictures just do not appear. All text appears though.
I did try do dig through the script, but since it's not my script it prooved to be a bit difficult, finally I came to a conclusion that even though I don't like some parts of it, there are no apparent problems with it.
FireBug and Chrome, Safari, Opera debuggers show no errors of any kind.
Now as last resort I added this to my JS file
window.onload = function()
{
alert('The page has loaded completely');
};
The outcome is that when i see all the pictures i see this message, when i don't i don't. It's doesn't help to wait for the pictures to load.
I have also found this topic:
window.onload() is not firing with IE 8 in first shot
which talks about similar problem, so it would be nice if anyone specifies what addon can cause this? QUOTE: One of the IE addons created this problem, after disabling its working fine. Thanks for your time and answers :)
As long as it isn't the flash plugin=)))
I do check for flash plugin on page this way:
var ad_checkPlugin = function(){
// From SWFObject v2.2 <http://code.google.com/p/swfobject/>
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object")
{
d = navigator.plugins["Shockwave Flash"].description;
return (d && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin))
}
else if (typeof window.ActiveXObject != "undefined")
{
try
{
var d = new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version");
// new window.ActiveXObject(...) will return null if ActiveX is disabled
return d?true:false;
}
catch(e)
{
return false;
}
}
}
And there was another way which caused the same problems in Ie, so i guess it's not the problem with the plugin check.
I would be happy if you tell me general things which can cause such problems, i can also ad the script if you guys ask for it.
And i will be even happier if you tell me specific things=)) , if you're going to say that problems lie whithin the script I will no be able to agree or disagree I've cheked and see no problem, browsers see no problems too. But it must be there somewhere since it doesn't work.
UPDATE: I also have alerts every where in my JS now, now what i witness is this: in FF for example sometimes i see the alert
alert('The page has loaded completely');
but I am not left any time to click this one(click ok), when another alert pops up. Is that a normal thing for alerts? I should add that many of the alerts are in function called by the banner.
UPDATE no2:
I've isolated the problem even more I stopped any calls from flash to JS functions at all (First i tried to replace them with alert("hello world"); that didn't help the loading problem).
Now when flash doesn't call to JS the page loads just fine. Of course i need the flash to call external functions.
Anyway NEW QUESTION : could javascript called from flash make IE think that everything is loaded and it can stop, that is can it be something like:
clean your room (and two seconds later)
now brush your teeth
result: the room is half clean but the teeth are
I might add that whatever loads on the page, some things load always: text, spaces fo future pictures but that may just be a coincedence, apart from this there is no system at all to what has, and what hasn't loaded.
---------------------------> ANWSER FOUND
Thanks))) for voting for my question, and here is the anwser guys! The function used in flash namely
getURL("javascript: ...","");
is what actually stops the page from loading! Hm, rather than this it's better to use ExternalInterface(); I'll point out we are talking about AS 2.0 in AS3.0 there is no question that ExternalInterface should be used, since getURL is now navigateTo or smthg.
Thanks to the guy who wrote this AS to realise what the problem was=)
Just copying anwser from above so the question is solved
The function used in flash namely
getURL("javascript: ...",""); is what actually stops the page from
loading! Hm, rather than this it's better to use ExternalInterface();
I'll point out we are talking about AS 2.0 in AS3.0 there is no
question that ExternalInterface should be used, since getURL is now
navigateTo or smthg.

Has Chrome browser broken dynamic script loading?

This isn't my code, I'm just troubleshooting it. Some code that has been working for over a year has now stopped working in Chrome (12.0.742.122), but works in the other "big" browsers (including fellow WebKit stablemate Safari (5.0.5)). By "not working anymore" I mean that although the script file does load, it doesn't execute. The kind of behaviour you'd expect if loading a script into innerHTML or writing it into a div, but neither of which things are being done. The commented-out lines below were all failed attempts at getting it working, the first of those being the original code that had worked up until recently.
<div id="abc"></div>
<script type="text/javascript">
var d=document.getElementById("abc");
var s=document.createElement('SCRIPT');
if(s){s.src=script_path;}
//if(d)d.appendChild(s); //original line that still works in all other browsers
//if(d)d.parentNode.appendChild(s);
//if(d)d.parentNode.insertBefore(s,d);
//if(d)d.parentNode.insertBefore(s,d.nextSibling);
document.body.appendChild(s); //this works, script executes
</script>
What is wanted from this code above, is that the script is a child of the div. Presumably they want to be able to remove that child and have all script be removed at the same time (I'm not sure of their motivation).
I've discovered what the problem was, largely thanks to Martin Bieder's back and forth and introducing me to jsfiddle.net with his working example.
The issue was actually the test page and what you'd think would be a fairly harmless error they made in creating it. The div and all of the code will be represented below simply as ######, as it's not even relevant to the problem. It's actually a HTML problem. Chrome 12 isn't happy if you don't match up your closing tags properly. I really can't believe that it has an effect on the execution on script files, but it does. I've tried many many times in the last 10 minutes with the HTML tags right and wrong and unbelievably this really is the problem.
<font><center><b>
##########
</b></font></center>
You see how the font and center closing tags are the wrong way around, and that's enough to confuse Chrome sufficiently that it won't execute any dynamic script being added within those tags. Bizarre. I can't recreate this on jsfiddle, probably due to the nature of the site runs the html/js that you put onto it (using onload for example).
No it works. Google Analytics uses is, too.
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.google-analytics.com/ga.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga,s);
Have you tried to set to async the script element?
var script = document.createElement('script');
script.async = 'async';
It is all about 3 things.. Organization, Optimization, and debugging.
1)properly scoping your tags makes things easier to read.
2)properly organizing your code makes it easier to parse which means parsers can be faster and more efficient.
3)alot of the debug tools we use rely on this organization in order to display things like collapsible tags and present a more visual scoping

Categories