Can't change favicon with javascript in safari - javascript

I have a page that changes the favicon through javascript. This works great on chrome and firefox, but on Safari it does not work. I even added the <link rel="apple-touch-icon" href="favicon-1.png"> part and changed that through javascript as well, but that also does not do the trick.
The page looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
<link rel="icon" type="image/png" href="favicon-1.png">
<link rel="apple-touch-icon" href="favicon-1.png">
<style>
</style>
</head>
<body></body>
<script>
setTimeout(() => {
var favicon = document.querySelector('link[rel="icon"]');
var appleTouchIcon = document.querySelector('link[rel="apple-touch-icon"]');
favicon.setAttribute('type', 'image/png');
favicon.setAttribute('href', 'favicon-2.png');
appleTouchIcon.setAttribute('href', 'favicon-2.png');
}, 4000);
</script>
</body>
</html>
Can anyone spot what I am doing wrong here?

It seems like it is not even possible as briefly mentioned in this webkit issue.
Citing:
...Since we quite purposefully don't allow dynamic changes/animations to the favicon...

Related

Webcomponents Polyfill not working

I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="css/site.css">
<!-- Components -->
<link rel="import" href="components/global/site-navigation.html">
</head>
<body>
<script>
(function () {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'js/webcomponents.js';
document.body.appendChild(e);
}
})();
</script>
<site-navigation></site-navigation>
</body>
</html>
What am I missing?
PS: Everything works fine in Chrome (with/without the polyfill)
You are using an old version of webcomponentsjs polyfill, which implements Custom Elements v0's document.registerElement() instead of v1's customElements.define().
You should use the new version 1.0 on github.
Just load the webomponents-lite.js script in the <head> part of your page:
<script src="webcomponents-lite.js"></script>
Update: Now polyfill version 2 was released. HTML Imports polyfill is not shipped any more, but can be used it separately, or you can still download v1 branch.

Drop Down Menu Click

Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc

jquery mobile loading image not shown

My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>

How can i get my codes work exactly like i have it in jsfiddle

Good Day all, i have been working with http://jsfiddle.net, the sample app i built and tested on jsfiddle is working fine and working as i want it. Now i have tried copy my codes out and run it on my local machine but its seems not working but the same exact codes are working online(jsfiddle).Here is the working version http://jsfiddle.net. Below is the structure of my codes locally which is not working:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="key, words" />
<meta name="description" content="description" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="alternate" title="Website Feed" href="rss.php" type="application/rss+xml" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>AstroSD</title>
<script>
var MyCheckboxes=$("input[name='toggle']");
MyCheckboxes.change(function() {
$("#kickoff").toggle(MyCheckboxes.is(":checked"));
$("#goal").toggle(MyCheckboxes.is(":checked"));
$("#halfull").toggle(MyCheckboxes.is(":checked"));
$("#halftime/fulltime").toggle(MyCheckboxes.is(":checked"));
});
$(function(){
$("#slideThree").change(function() {
$('#move').toggleClass("show-hide", this.checked)
$('#back').toggleClass("show-hide", this.checked)
$('#goal').toggleClass("show-hide", this.checked)
$('#halfull').toggleClass("show-hide", this.checked)
}).change();
})
</script></head>
I need help in structuring the head part using the script i have in http://jsfiddle.net/ so it will work accordingly. i believe am missing something here. thanks in advance.
The only difference in the src code of jsfiddle and your code above is this:
Hope you have given the Jquery src correctly: (Also if I may suggest - please use latest JQ library i.e. 1.7.. version but you know your code better)
Add this to your page please, hope it fits the need. :)
script
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

jQuery + jQuery mobile load script twice when script tag is emebedded in body

i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.

Categories