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
Related
I recently published a website with a simple SVG animation of a Panda on a rocket. As soon as the user scrolls down, the image changes to another SVG with an animation of the panda going up and away from the screen.
The website: https://www.jonnyekholm.fi
I'm using this simple script to make it happen:
<div style="left:10%;" id="rocket" >
<img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" />
</div>
<script>
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg");
});
</script>
This works fine on Chrome.
This also works on Firefox, at first. But if you reload the page and scroll down again then the panda just disappears. Same thing happens in Safari.
Im also using this script on the same page, to make the panda move across the screen at a later point:
<div id="trigger"></div>
<img src="https://www.aaltowave.com/img/still2.svg"/>
<script>
jQuery(function() {
var $window = jQuery(window);
var endpoint = jQuery("#trigger").offset().top - $window.height();
$window.on('scroll', function() {
if ( (endpoint) < $window.scrollTop() ) {
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg");} });});</script>
This works fine on Chrome.
On Safari this doesn't execute on reload, just like with the previous animation.
On Firefox however, the animation doesn't occur at all except for one or two occasions. This tells me that the script does in fact work on firefox, but it executes on a weirdly basis.
How can I make the panda animations show up on Firefox?
I would appreciate it very much if anybody could help me with solving this problem. Thank you in advance!
Based upon happymacarts suggestions, this is most likely a cache issue. On reload the animation is loaded, but at the last frame where it is already off the screen. One must force an image reload for this to succeed.
To be able to reload the image and bypass the caching I added a unique query parameter to the URL and put the scripts together:
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg?t=" + new Date().getTime());
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg?t=" + new Date().getTime());
});
Chrome: Works like charm
Safari: Works like charm
Firefox: This solves the issue for the first animation, but the second one only shows up if the user has scrolled down to the location and then reloads the page. Not in any other occasion. Still working on a solution for the second animation...
my Javascript (jQuery) is working fine in newer browsers (Chrome, Firefox, safari 10+) but not in slightly older Browers (Safari 9, IE 11..).
It however does work fine, when I include it directly on the page and dont try to load it from an external file. I have been at it for hours and I cant figure out what the problem is..
My Javascript:
$( document ).ready(function($) {
$(".monatsInput").on("click", function () {
console.log("clicked");
$(".monatsWahl").css("border-color", "lightgrey")
$(this).parent().css("border-color", "#4CA3D8");
var newPrice = $(this).val();
$(this).parent().parent().parent().parent().find(".angebotsPreis").html(newPrice);
})
// Mobile Nav
// --------------------------------------------------
// --------------------------------------------------
$("#burgerNav").on("click", function () {
$(".navList").toggle("display");
});
// Back to previous page
function goBack() {
window.history.back();
}
$(document).foundation();
})
Im not sure which part of the HTML to include, so the entire page can be viewed here:
www.immobilienheld24.de
I hope someone has an idea.
Thanks
Hopefully this is the last time I will need to ask for your guys help: Website 3six-d.co.uk
Everything if fine on the normal website, issueshowever appear when I try to use it on mobiles.
http://mobiletest.me/iphone_5_emulator/#u=http://3six-d.co.uk/index.html
I'm giving that link to show you, but the same occurrence happens on my phone aswell.
This is the relevant code in the .js file (I could be wrong but I think it is)
$(function() {
var trigger = $('#responsive-nav');
menu = $('#main-nav ul');
$(trigger).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
$(this).toggleClass('nav-visible');
});
$(window).resize(function(){
var windowW = $(window).width();
if(windowW > mobileRes && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
A weird ocurance was, that initially the jQuery was being called at the end of the html and it worked fine, but it was necessary to move it to the top for Fancybox and other scripts I am running. That is what is causing the problem, as soon as the following code is at the stop of the HTML document, the navigation menu stops working on mobiles and tablets:
<script type="text/javascript" src="js/jquery.min.js"></script>
Any ideas guys, would really appreciate some help!
did you try using a timeout to see if it's a race condition?
I recently updated my phone to iOS 8 and now I am experiencing really unusual behavior.
Here is a demo of the problem:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("A");
jQuery(window).load(function(){
alert("B");
});
</script>
In Safari iOS 7, this brings up the dialog boxes "A" and "B". But when viewed in Safari iOS 8, only dialog box "A" shows up.
Any ideas on why window load would not be working in iOS 8?
I don't have a real solution for this, but if you have any or in your page, Safari on iOs8 do not trigger the load event.
So you have at least 2 solutions:
count your externals files like images, css, scripts and attach a
load event on them and wait for the last .load of those files
write your tag video/audio after the load events
//EDIT:
So I write this that helped me to still use video:
var $video = $('.player');
$video.each(function(){
this.outerHTML = this.outerHTML.replace('div', 'video')
});
$video = $('.player');
See Browser compatibility here to see if outerHTML fits with your compatibility https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML#Browser_compatibility
Use window.onload = function(){ }; on the behalf of jQuery(window).load(function(){ }); I am able to fix this issue on my project.
I am trying to attach an onclick event to an iframe that is in editable mode using the JavaScript and HTML code below. The code works fine in IE8, Safari, and Chrome, but does not work in Firefox or Opera. I have spent several hours doing some research, rewriting the code, and testing every idea that I can think of, all without success. So far, I have only been able to work out that line 8 might be the root of my problem. Can anybody tell me what I may be doing wrong and offer me any tips or code samples to help solve my problem? Any help would be appreciated.
Here is my code;
<html>
<head>
<script type="text/javascript">
function iFrameOn(){
document.getElementById("wysiwyg").contentWindow.document.designMode = 'On';
}
function iFrameEvent(){
document.getElementById("wysiwyg").contentWindow.document.body.onclick = function(){
alert('Hello world!');
}
}
</script>
</head>
<body onload="iFrameOn()">
<iframe name="wysiwyg" id="wysiwyg" onload="iFrameEvent()"></iframe>
</body>
</html>
You must use contentWindow and contentDocument to support all browsers:
var frame = document.getElementById('wysiwyg');
if(frame.contentWindow) {
//
} else if(frame.contentDocument) {
//
}
I believe that contentWindow was a property that IE initally implemented that other browsers may have started supporting at some point but I believe the standard is contentDocument.
Someone here has posted a cross-browser solution:
Chrome: Getting iFrame and inserting into body