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'>
Related
I've been developing an embeddable widget using CreateReactApp. It works great when initialised from the index.html
Now I want to test what happens when the user changes page in the html. Ill need to save the app's state in storage etc.
When I add a second html page to the public folder (two.html) and navigate to it - I get the error:
URI Error: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
..and the app js does not run.
How can update my app so I can use a second html page?
The issue maybe caused due to babel not able to transpile the % .
Please try updating this in index.html :
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
to this:
<link rel="icon" href="/public/favicon.ico" />
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">
I have a index.html page where I download some common js/css. On one page page, when navigated through ui-router , I want to download page specyfic scripts, for instance libraries that are required for this page. This markup is included in XHR HTML returned when I navigate to a view:
<link href="/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script type="text/javascript" src="/js/fade.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
CSS gets downloaded but I see no JavaScript request on the network tab. How can I fix it / what is the proper way to handling this situation?
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.
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.