We Keep Coding

Script Only Working On Chrome (Not FF, Safari)

I have a small script that hides the tawk.to live chat widget from a certian page. this script is only on a specific page and only hides properly on chrome, on firefox it sometimes hides there times it doesn't hide at all, and on safari it never hides) what can i can do get it hiding across all browsers? sorry for the noob question. any help is greatly appreciated!
<script type="text/javascript">
var Tawk_API = Tawk_API || {};
Tawk_API.hideWidget();
Tawk_API.onLoad = function () {
Tawk_API.hideWidget();
}
</script>
Cheers,
Brad

Javascript not working on mobile but works on desktop

This works on a desktop browser, but not on my iOS mobile phone. I tried adding 'touchstart' and looked at this post's solution to check how other's got it to work, but it still isn't working. Any suggestions as to other options? I also tried adding e.preventDefault() - and added e to function(), but that didn't work as well.
I have tried:
$('body').on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Edit:
It appears there may be something else going on, I changed the code to be as general as possible and it is not firing the event on iOS, but working in my chrome emulator:
$(document).on('click touchstart', 'body', function() {
alert('hi');
});
Additional update:
I have added the following code to my script.js file:
$('body').css('display', 'none');
As expected, the screen goes blank on my desktop browser for both local and on heroku, but when I test on mobile, the screen is not blank. It looks like js isn't working properly.
Images attached:

Answer: the reason it wasn't working on iOS Safari is because in my js page I was using ES6, specifically 'let' which is [not supported currently][1]. Changed to ES5 and the issue disappeared.
$('body').on('click', '.dashboard_leftNav_category a', function() {
var link = $(this).attr('showSection'); //changed from let link
var show = $('[section="'+link+'"]');
$('[section]').hide();
$('body').find(show).fadeIn();
$('html,body').scrollTop(0);
});

You have two options:
Reset your mobile browser's history because your browser's cache reads the old source.
Change the name of your source file in the desktop and refresh your page again.

This should help you. Instead of binding it to the body element, bind the event to the document.
$(document).on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Also try changing adding the following style to myContainer class
cursor : pointer;

Put e.preventDefault(); inside your javascript function.

Removing render-blocking JavaScript for Jquery UI Library

I am attempting to try speed up my web page by "Removing render-blocking JavaScript" using this defer method:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/combination.js"; // replace defer.js with your script instead
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
I've combined all my javascript files into 1 called combinations.js but whenever I try combine this jquery library UI:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
with combinations.js, my jquery scripts don't work.
So Google Page speed is still saying that I need "Removing render-blocking JavaScript" for this library but how?
UPDATE:
When I add the Jquery UI Library to the top of my combination.js file and test it on CHROME and IE9 it works! The problem I now have above, is when I test it on Firefox (I've got version 35). So this seems to be a firefox issue

It looks like It was my history in firefox not re-loading my Jquery Library even when I did a full refresh (CRTL + F5). Strange, anyway if anyone happens to get this problem, delete all your history and load up your website up again. Amazing how such a simple solution can take up so much time.

Scroll down on page load

I need to scroll down about 50px when the page is loaded. This is what I'm using:
$(window).load(function(){
$("html,body").scrollTop(55);
});
I've also tried:
scrollTo(0,55)
This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).
I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:
htttp://website.com#element

I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to
$(document).ready(function(){
$("html,body").scrollTop(55);
});
Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/
Info
$(document).ready
executes when HTML-Document is loaded and DOM is ready
$(window).load
executes when complete page is fully loaded, including all frames, objects and images

<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#123').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
Add id="123" to any <div> it will automatically scroll it down when page loads.
Here's an another script if the previous one wont work !
<script>
window.setInterval(function() {
var elem = document.getElementById('fixed');
elem.scrollTop = elem.scrollHeight; }, 3000);
</script>
Add id="fixed" to any <div> it will automatically scroll it down when page loads.

You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).
document.getElementById('header').scrollIntoView()

After messing with scrollIntoView(), and observing it scroll correctly at page paint time, then snap to the top for no reason, I went with this:
http://website.com/#target
and
<a name="target">
Then the browser understands exactly what I need and does it. But I can only do this because we control the URI, so it naturally also won't work in all situations.

Alternatively, just fire this at the end of your body:
...
<script type="text/javascript">
$("html,body").scrollTop(55);
</script>
</body>
</html>

If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.

How to bind "mobileinit" event in jQuery Mobile?

This is how I'm trying to hook into the mobileinit event:
$(document).bind("mobileinit", function() {
console.log("Mobile init");
});
But this doesn't work on Chrome (Latest version), Ripple v0.9.1 and on a BlackBerry bold 9790 running OS7.0.
Note: I also tried using .on() instead of .bind() but no luck. Both jQuery mobile versions (1.0.1 and 1.1.0) failed.

I've used this and it does work.
Is it possible something else is breaking the script or the mobileinit isn't being fired?
Does Chrome fire mobileinit?
I just found some code I used in jQuery Mobile 1.0 and we just upgraded to 1.1.0 and it works.
You're making sure to also include regular ol' jQuery, right?
jQueryMobile's docs do it, so I'm sure it works. Something else must be wrong. Sorry I'm not much help. Do you have any more info? Or try with a different device.
[edit] On that same self page, it says "Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:"
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- Note your script before jqm -->
<script src="jquery-mobile.js"></script>
Looks like the script order can matter.

Here is another simple example that works with me (for android and ios)
<script type="text/javascript" src="files/resources/lib/jquery/jquery-1.8.2.js"> </script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// your logic here
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
{
// your logic here
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
}
});
</script>
<script type="text/javascript" src="files/resources/lib/jquerymobile/1.3.2/jquery.mobile-1.3.2.js"></script>
include the main jquery file
bind mobileinit before jquery mobile
include jquery mobile js file