I apologize in advance for the generic examples of this since the issue is with a proprietary corporate system.
I support a web app that allows for edits to a secondary CSS file in order to style the page (within the limits of the application). I'm trying to apply a non-standard font that is used company wide but I do not have access to edit the HTML or header of the site, only the CSS. I tried declaring the font-family in the main CSS while referencing the actual font file URLs (since they are used on our corporate site) but they never actually loaded.
I then took the same font-family snippet and created a separate CSS file for just the font declaration and changed the URL to point to the actual files in the relative path (ex: url('fonts/DINWeb.woff') ). I moved this fonts.css file along with the reference font files (eot, ttf,and woff versions) to a public Dropbox folder for testing. I was able to get everything working by simply importing the fonts.css file using the line of code below (URL modified) at the top of my application's CSS.
#import url('https://dl.dropboxusercontent.com/.../fonts.css');
The problem is that the Dropbox solution was just for temporary testing purposes. Once I confirmed everything worked as expected, I moved the exact folder structure to an external hosting location that is approved for use. When I update my import code in the CSS to the new URL, the font does not load. I can access the CSS file and the font files from my browser without any issue so I don't understand why the web app fails to load it. I also have images hosted in this same hosting location that pull into the web app without an issue, it's only the font that has issues. The files work when hosted on Dropbox but not the other source. I've also double checked the references for the URL and they are still correct since the folder structure never changed.
Any suggestions would be GREATLY appreciated. Ideally I would like to just reference the corporate URLs directly in the web app's CSS like I initially tried. If that will not be possible, I need it to work with the externally hosted files since Dropbox cannot be used as the permanent solution.
Basically you cannot load from one domain resources hosted in other domain, unless the second host says that you can. See CORS
You can solve it by moving everything to the same domain (or forcing the user to be always in certain domain) or by adding the Access-Control-Allow-Origin header to the responses.
You can achieve this last thing if you can edit an .htaccess file in the server. Add:
Header set Access-Control-Allow-Origin "*"
Or replace the * with the domain from which you'll be making the requests.
Yes, a subdomain is a different domain (abc.com, www.abc.com and dl.abc.com are not the same).
Related
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I'm using HexoJS to create a blog. I was able to generate the static files using hexo generate. Even though there are css files and JS files generated, they are not properly linked to the index.html.
So, I have to open each html page and correct each page links given in href and src attributes one by one. I believe that this is not very practical. Can anyone help ?
The localhost is used for preview the website. When we publish our blog, it should be on a server, then the path will be interpreted correctly, we don't need to change any thing. What we saw on http://localhost:4000 will be same when you published your website.
So, we don't have to worry about the broken paths in the public folder.
I have a small problem that concerns an outsourced website development company who will not (for perfectly normal and valid reason) allow us access to the server to alter stylesheets. I've been tasked to redesign a website layout. Problem is, I cannot access the website nor a dev environment to alter the stylesheets to bring forth these ideas. Only route to this would be to create a local custom.css to send via email to the person who uploads them. However, I cannot in good faith just throw them a CSS file to be applied on a live site without fully cross-browser checking it and I cannot do this locally on IE, Safari or Opera.
One solution was to save the website locally as HTML (file, save as...) but the problem is the background CMS is complete crap, meaning it has like 200 completely unnescessary CSS files and it is organized as:
main.css has 7 #import rules with relative paths.
Inside this is another stylesheet with 16 #import rules with relative paths.
Inside this... You get the picture.
This would mean I would have to shift through these 200 import rules and files to download them manually via the address bar. So my question is:
How can I save this website as HTML to my computer to apply a custom user stylesheet file to it so I can cross-browser test it properly? Is there some website that can go through a site and compress all the CSS to one file or smth?
You can download a whole website with dependencies using programs like HTTrack
http://www.httrack.com/
It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site's relative link-structure. Simply open a page of the "mirrored" website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.
WinHTTrack is the Windows 2000/XP/Vista/Seven release of HTTrack, and WebHTTrack the Linux/Unix/BSD release.
It doesn't consolidate all the CSS files into one, but it is better to retain the files as-is if you want to minimize changes
I'd like to load all the MedaiWiki static resources from a Content Delivery Network (CDN) for obvious reasons (using MW 1.17.0).
I think I need to set $wgStylePath=http://cdn.example.com/ Then put everything currently in my /skins/ directory into http://cdn.example.com/
(this appears to be suggested in this Stack Overflow question/answer: How can you change images src attributes in mediawiki to access a CDN? but it's not very clear
My concern is the .php files that are currently in the /skins/ directory...
My only thought is that I need to put all the sub-directories from /skins/ into the CDN, but not the .php files that are directly in /skins/
Maybe I'm going about this the wrong way... is there a better way to achieve what I'm trying to do? (I'd like all the theme related .js, .css and image files to load from the external CDN)
Thanks,
-Dan
There are two completely different paths here: the filesystem path through which the webserver accesses skin-related PHP files ($wgStyleDirectory) and the URL which will be placed in the HTML code and used by the browser to access css/js files ($wgStylePath). If you want to use a CDN, you set the latter to the CDN url and leave the former in peace.