I am trying to prefetch an image in my Angular app that sits within a Chrome plugin.
In the controller, I have:
$scope.nextlocation = 'http://i.imgur.com/Vzidbt4.gif';
In my view, I have:
<link rel="prefetch" href="{{nextlocation}}">
When I load the page, I get an error saying:
GET chrome-extension://jlkgcdcdoooiaeamkhagpdolhgjgfgem/%7B%7Bnextlocation%7D%7D net::ERR_FILE_NOT_FOUND
When I hardcord the image in the doc, like below, it works fine.
<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">
How do I get this to work so that it dynamically updates?
<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">
Change the above to:
<link rel="prefetch" ng-href="{{nextlocation}}">
Related
In a (Wordpress) website's <head>, I have the following code to load an additional stylesheet after all dynamic html and inline CSS created by a (third-party) slider plugin has been created via JS:
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'">
The reason for the necessity to load that additional stylesheet later than the main stylesheet is that it contains some calc values for height settings which depend on other calculated (inline css) values created by the plugin which again depend on the the size of images loaded by the plugin. A rather complex thing, there was actually some trial and error involved before I got it working, since I don't know what the plugin actually does in which order.
My problem: This works in all current browsers, but in some older browsers (for example Firefox < 55, reported by a user with a very old computer) the related stylesheet is not loaded at all. Apparently (also according to caniuse) older browsers don't know <link rel="preload">.
So my question is if there is anything I can replace that line of code with, which also would work in older browsers?
It's not clear what the purpose is of this pattern:
<link
rel="preload"
as="style"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css"
onload="this.rel='stylesheet'">
It is preloading a stylesheet, then after it preloads it's changing rel to stylesheet so that it loads for real. Usually rel="preload" is for kicking off a download of a resource that isn't loading up front ahead of schedule, prepping it in the cache, whether that's to avoid excessive download waterfalls or to let something that will be loaded dynamically later on will complete sooner.
Since in your case you're wanting it to always load the stylesheet on page load, there's no need to do anything with preloading. Just replace with this, and it should be compatible with browsers that don't support preloading:
<link
rel="stylesheet"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css">
If the idea was to use this preload + onload as a way to delay loading stylesheet until after page load, a better approach may be to inject the link via some JavaScript:
<script>
var sliderStylesheet = "<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css";
document.addEventListener('load', function () {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', sliderStylesheet);
document.head.appendChild(link);
});
</script>
I found a solution myself: I added an ID to the <link> tag to be able to address it in a simple way and used a simple script wrapped inside a setTimeout function to change the value of the rel attribute.
Note: Since there is no visible content, there is no visible result in the following snippet window, but the code with the changed attribute can be seen when inspecting the snippet with the browser tools. It also works when the link is inside the <head> section, BTW, which is my real-world situation.
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#link_to_sliderstyles1').attr("rel", "stylesheet");
}, 200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'" id="link_to_sliderstyles1">
this is my file tree(i am using xampp)
|
------------------------------------------------------------------------------------
| |
REGEXTESTER 404
| |
INDEX.HTML ===================
| |
style.css index.html
i am trying to create a custom 404 error page,
MY .htaccess looks like this
ErrorDocument 404 /404/
my 404/index.html looks like this
<html>
<head>
<title>404</title>
<link rel="icon" type="image/png" href="../logo.png"/>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div>
<h1>How did you get here?</h1>
<span class="second"><h4>I think you need a ride back home</h4></span>
<button>Home</button>
</div>
</body>
</html>
however my 404 works but it only shows text, the stylesheet(even the javascript files and the logo.png) does not load at all
so i tried changing '' to
but it only works if i go to a place like http://localhost/REGEXTESTER
but if i go to a place like http://localhost/REGEXTESTER/sdfghjnbvcvbnmmnbvcvbbvcvb the stylesheet still does not load, i need help
Relative paths are relative to the URL of the page, not the location of the file the page is generated from in the file system.
Since a 404 error can be displayed for any URL, you can't use a relative path.
Use an absolute path instead. i.e. one that starts with a /.
I've just watched a youtube video about jQuery-UI and here is the link:
https://www.youtube.com/watch?v=WrHpzNMlhfo
and so I saw that we can try it also with this link:
http: //jsbin.com/chromebug/4
but the result turn me crazy, I really dont have any idea about it
2987.133
The problem is with jquery-ui.theme.css. It's failed to load, check in the console.
Either you check & correct the googleapi link
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
or else use
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css
JS Bin Link
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
I want to use bootstrap navbar in my website and so i have made the webpage header.html (link given below) and it works fine
http://upscfever.com/upsc-fever/header.html
However when i use the same code on my home page (link below). it doesnt close after we open it.
http://upscfever.com/upsc-fever/index.html
On my homepage - index.html i have written below code.
<script>
$(function () {
$("#header").load("http://upscfever.com/upsc-fever/header.html");
});
</script>
<body>
<div id="header"></div>
<!-- other things-->
</body>
I get the error:
jQuery.Deferred exception: $(...).dropdown is not a function
#http://upscfever.com/upsc-fever/index.html:1:15
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
you may want to put the load script just before the end of the body tag, so that the <div id="header"> gets added to the DOM before using it.
Also make sure you are not loading bootstrap js more than once in your index.html file.
Maybe try with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and see if it will work.
I have a problem getting the storage reference even though I configured the firebase-app according to documentation. The firebase-app element is located in the index.html
<firebase-app name="name-of-the-app"
api-key="api_key"
auth-domain="name-of-the-app.firebaseapp.com"
database-url="https://name-of-the-app.firebaseio.com"
storage-bucket="name-of-the-app.appspot.com">
</firebase-app>
I am accessing the app reference in the subviews the following way:
<firebase-document id="office_document"
app-name="doctor-appointment-system"
path="/offices">
</firebase-document>
<script>
this.$.office_document.app.storage()
</script>
The code above is throwing the an error.
this.$.office_document.storage is not a function
The database counterpart works ok.
this.$.office_document.app.database()
The problem was that I didn't have firebase storage script imported in my index.html, where the app was initialized with firebase-app element.
Here is what my imports look like now:
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/firebase-storage-script.html">
<link rel="import" href="/bower_components/polymerfire/firebase-document.html">