The problem is that the slider on the home and products page only works with firefox chrome and Opera. It just fails to move in either IE or Safari. The second issue is about how the site scales on mobile devices. I've looked into mobile event handling, but with less than great results.
http://dextersaltmedia.net78.net/
Copy-pasting the entire responsiveslides.jquery.js file into the console makes the thing work normally, so your problem is in
<script type="text/javascript" src="responsiveslides.min.js"></script>
The only issue is that the library module never runs, even though the library gets included as a file.
Put your script tags at the end of the page, that might work better. Or try placing the library script tag at the end alone.
Ideally though, you should just bunch up jquery and the library file in one .js file and include that one.
Related
Using JQuery mobile 1.4.5 (https://jquerymobile.com/)
Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...
My stripped down page (HTML) contains the following:
<div data-role="content">
<script src="test.js"></script>
<script>
$( document ).on( 'pagecreate', function( event ) { do_something(); });
</script>
</div>
The file "test.js", contains the following code:
function do_something() {
alert('here in do_something()');
}
When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).
On all other browsers, I get the alert.
Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).
ANY suggestions would be helpful.
Thanks in advance.
First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.
As you can see spinner that would mean jQuery Mobile and jQuery are loaded.
If they were successfully running on your desktop computer then you may check these:
Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.
Thanks to all who provided some insight...
Turned out it was an external javascript file that contained a try/catch block as:
try {
// code
}
catch {
// code
}
When changed to:
try {
// code
}
catch(err) {
// code
}
... after the change was made, all tests passed !!
For a few reasons, I'm loading AngularJS, jQuery and my scripts at the bottom of body.
This works fine on all the desktop browsers, as well as on iPhone 6, but not on iPhone 5 running iOS8.0. The libraries all load and I get no errors, but the scripts just don't work.
The crazy thing is that if I just move the libraries up higher in body, everything works fine.
I've (sort of) solved the jQuery issue — by not wrapping my script in $(document).ready, my scripts run OK.
But no luck so far with AngularJS. Anyone seen this before?
Update: No issue in iOS9 on iPhone 5 either.
Definitely wan to load scripts outside js code. Keep in mind that the order of loading the scripts matter, specially if you have dependencies.
I would load the jquery first, then angular.js files and finally your js code. I've noticed that it's best for me if I put jquery and angular.js references in the header and my js files before the end of the body.
I put together a script that works a charm in Chrome and that, for some reason, refuses to work properly in Internet Explorer 9. The page simply hangs/freezes forever ... and then loads. Likewise, when the user does anything on the page after it has loaded (in this instance loading highcharts by selecting items on dropdown boxes) it will hang/freeze ... and eventually work.
I have tried to debug the page but the freezing makes it very difficult and agonizing. I have had no success identifying the source of the issue. My code loads three libraries and uses one custom script that I put together myself.
Here are the three libraries:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="../Highstocks/js/highstock.js"></script>
<script src="../Highstocks/js/highcharts-more.js"></script>
What I do know from my debugging efforts:
(1) The page refuses to load properly in IE whether I include my custom code or not.
(2) I have tried to remove my libraries one by one. When I remove jquery-ui.min.js the page loads normally. Obviously can't do much with it at that point though ... :-) I have tried loading different versions of jQuery and jQuery UI with no success.
Does anybody have a clue as to what I can do to overcome this bottleneck?
I am having a strange problem in Google Chrome. I am including a js file via script src tag. I place alert('test') in the file and when I load the page in Chrome, It alerts twice. In every other browser it alerts once. Is there any known cause for this?
Here is the code that loads the JS:
<script type="text/javascript" src="/js/main.js"></script>
It appears this happens in Safari as well. Does not occur in IE and firefox.
I had this recently and eventually found out it was a chrome extension, specifically the cache killer extension
This might be helpful
Webkit browsers (Chrome, Safari) are loading pages redirected from .htaccess twice!
I've noticed this same problem in Chrome. I have some code that runs when the page loads and I have an alert inside that code. In every browser other than Chrome this code is run once, thus the alert displays once. In chrome the alert shows twice. I am not doing anything special, just running code when the onload event is triggered within <body onload="somefunction()">. I am not using links, iframes, or the Cache Killer extension. I tested it in Safari and the code is only being called once. This seems to be a Chrome specific problem.
I did some research and it appears this is a bug with Chrome. I found this link https://code.google.com/p/chromium/issues/detail?id=64810
Depending on your specific situation, this page may give you a work around for the problem.
The problem does not seem to be fixed as of yet.
I want to debug a javascript file that is embedded in the HEAD element.
I navigate to the site, see the code, and make a breakpoint:
(source: deviantsart.com)
But when I click on Reload, the script disappears and it doesn't stop at the breakpoint:
(source: deviantsart.com)
Debugging was working earlier so I know it works in general. What do I have to do so that Firebug always debugs my script?
I've noticed this behaviour before as well. It seems that it can happen if you refresh the page while the debugger is running (i.e. after you've hit your breakpoint and are stepping through code). This is far from conclusive, just something I've casually observed over time.
Also, I try to avoid having multiple tabs open with firebug active, as it seems to get confused.
Edit: just thought I'd add that I've seen this manifest itself in a few different ways:
the external script file does not appear at all in the scripts panel.
the external script file appears but firebug doesn't "see" it. You know this has happened because the line numbers beside the code where a breakpoint can be set won't be highlighted (used to be green but now appear to be just a darker shade than other lines). I've seen this happen with inline javascript on a HTML page (horrors!) as well.
the external script file is there, but you can only see a single screen full of code. Where "screen full" is the firebug panel viewport.
shut down firefox and then restart. sometimes firebug gets confused. also make sure you have the latest version.
You need activate the script tab
I'm not sure that having a <script> inside <head> (as opposed to, inside <body>) is actually legal HTML. If it's not, as I suspect, you can't fault Firebug for not supporting it well...!-)
The bugs in script processing that I know about are 1) jquery dynamic loading of scripts fails, 2) new Function() cannot be seen, 3) some kinds of document.write() cannot be seen.
Firebug processes script files in series with Firefox. This means that Firebug must be active when the page loads and it means that any exception in the path will cause the files to be mis-processed. If you opened firebug before loading and you still see problems, then the most likely fix is to install Firebug in a new Firefox profile. This causes you to get a completely fresh set of default options and you run Firebug without other extensions. As you re-add other extensions, look for problems in seeing scripts: then maybe you will discover what extension is interfering with the code path for processing scripts. I know this is a pain in the neck, but so is JS debugging without source ;-). We are working on testing with more Firebug and Firefox extensions installed to try to reduce these problems.
In our case it was the bundling of JS files.
It is not only FireFox, it is same for Chrome.
We moved the file out of the bundle and put it on the page where it needed to be referenced and it started working like charm.