Here is my code snippet how I am including the favicon in my personal website which was built with Angular JS.
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
With this code, the favicon is appearing on Chrome and IE browsers. But the favicon is not appearing for Angular JS templates on Firefox browser.
I looked at the similar websites made with Angular JS, the same issue is repeated.
Please refer the following website,
https://www.madewithangular.com/#/
Thanks.
Related
I am currently working on my portfolio website with React. I am making the project responsive, so I added the following meta tag to my index.html file within the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The responsive design works on my phone and in Google Chrome dev tools under responsive; however when the page is in desktop view the responsive design does not work. I am working with Google Chrome Version 70.0.3538.110 (Official Build) (64-bit). I am attempting to integrate a react-strap menu tab when the device is a max-width of 800px. Again the react-strap menu is visible on my phone.
navbar component including npm package react-responsive
responsive CSS styling with media queries
Nav bar working with responsive dev tools
Nav bar not working in normal google chrome
It is default setup in create-react-app application that I am using. But the favicon is not displayed. Not even the react favicon that comes with create-react-app. I can see the favicon link in the chrome's inspect tab. Also the icon gets loaded in localhost too for the link "http://localhost:3000/favicon.ico"
Following link is present in the index.html as well
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
What am I doing wrong for it to not be displayed ?
That issues happened for me too , what i did was i just went to this site .. from there i created my .ico image and gave my absolute path of that .ico image .
Ex :
<link rel="shortcut icon" href="/images/myfavicon.ico">
In my AngularJS app with the ui-router dependency, for some reason - on Google Chrome - my background-images in my stylesheet is not loading (doesn't even show up in Network tab in dev tools).
Maybe it is because I've bound the link href to my scope, and change it on the fly?
index.html:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
And in my controller I set $scope.stylePath to 'login.css'.
If I open dev tools and uncheck the background-image, and check it again, it loads the image and shows it fine.
No problems on IE11.
Any ideas?
Change from:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
To:
<link rel='stylesheet' ng-if='stylePath' ng-href='stylePath'>
I have developed Drupal site . But when I access my site using HTTPS:// browser gives me a message "This page has insecure content" . I have putted my site data on secure site .
I load JS file in that page for some purpose.
So,Is it JS file issue?
I don't think it should be JS or CSS issue, unless you include them using absolute URLs:
For example if you add the following lines in your theme's template file:
<link rel="stylesheet" type="text/css" href="http://yoursite/mystyle.css">
<script src="http://yoursite/myScript.js"></script>
This serves the JavaScript through http instead of https. Instead you should use:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript.js"></script>
notice that the URLs in the second piece of code contains relative URL, and would serve the files with the same protocol with which the site is accessed via a browser.
If this is not the case, you have to scan through all the links on the page, and find the links which are start with the format http://... instead of https://.... This problem arises when a browser finds that not all content of the page is being served using encryption.
Hope that makes sense. Please feel free to ask further queries.
Indeed, you might have some assets (css or javascript) loaded from "non secure" source (using http protocol instead of https).
I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.