I'm moving an web application to a subdirectory from it's root and having issues with paths.
Old: http://www.domain.com/
New: http://www.domain.com/app/
All of the include css, scripts and html links where in this format:
<link rel="stylesheet" type="text/css" href="/styles/menu.css" media="screen"/>
I've changed to:
<link rel="stylesheet" type="text/css" href="./styles/menu.css" media="screen"/>
or
<link rel="stylesheet" type="text/css" href="~/styles/menu.css" media="screen"/>
It works fine on links and others until I go one directory deep where links and paths are broken.
e.g.
www.domain.com/app/dir1/
www.domain.com/app/dir2/
There the link url or others (scripts, includes, etc) get duplicate paths.
e.g.
www.domain.com/app/dir1/dir1/
www.domain.com/app/dir2/dir2/
How could I approach this as absolute?
Using ~/style... etc is the easiest solution in ASP.NET but you must put runat="server" in the tag for it to actually work
Related
I have a game project based on Svelte. When the homepage opens, I want other pages to load the files as well. For example, when you go to the lobby creation page from the home page, the images are loaded from scratch.
Anyone have experience with this?
You can add preload link elements to the <head> to preload files, they look like this:
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="script.js" as="script" />
Valid as values can be found e.g. here.
(Should be possible to those via <svelte:head> as well, but I never tried that.)
I am quite new to node and I am trying to wrap my head around how the express.static middleware is working. In my views folder I have some href's like this:
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
My application is able to grab these files form URLS's such as localhost/about, localhost/contact etc. However it will not grab files if the end point is something like localhost/form/new. Is express.static getting these static assets from localhost/somefile and when there is a nested URL it defaults to /form/somefile (which won't work)? I am aware that if you put a '/' before vendor it will work from any level, why is this? Thank you.
app.use(express.static(“public”));
That is a way of saying "hey express, look if any incoming requests (like GET /bundle.css matches a file on that directory, if so, send it!".
Any file on that directory, you should be able to access under /. If you're serving from your localhost and have bundle.css on public folder, you can visit http://localhost/bundle.css.
Any asset you're trying to get from public folder, should start with / meaning look for an absolute path (in this case, the path public folder is serving which is /).
Update
There is another way of doing that using relative path which is not recommendable.
If you're in /about/index.html and you're trying to get /css/bundle.css (under public's folder)
Absolute Path:
<link rel="stylesheet" href="/css/bundle.css">
Relative Path: (not recommendable)
<link rel="stylesheet" href="../css/bundle.css">
The only thing to keep in mind is to make a slash mark before the static file address.
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/style.css" type="text/css">
If you do not put this slash before the address, you will have a problem loading styles, images, etc. in the nested addresses.
For example, if you use the following addressing instead of the above operation, you will definitely have problems in the nested URL.
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" type="text/css">
This is especially useful on page 404.
I use Asciidoctor for our User Guide. A requirement is that there is no access to the internet for the users.
I use prettify:
:source-highlighter: prettify
This creates in the HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script>prettyPrint()</script>
What I need is something, like
<link rel="stylesheet" href="assets/css/prettify.min.css">
<script src="assets/js/prettify.min.js"></script>
<script>prettyPrint()</script>
Is there a way to achieve this?
After looking at the source you can specify
:prettifydir: assets
to receive an HTML output of
<link rel="stylesheet" href="assets/prettify.min.css">
<script src="assets/run_prettify.min.js"></script>
To make it work for your users, you'll need to put the referenced files at the location yourself; Asciidoctor won't do that for you AFAIK.
Use asciidoctor-rouge or asciidoctor-highlight.js.
I'm using a basic file manager to maintain my webpages files. How to I begin using MDC-Web Vanilla?
In the MDC-Web Github project folder are: README.md, index.js, material-components-web.scss, and package.json.
I would expect to find <link> and <script> elements to add to MDC-Web to my project, similar to how MDL and Bootstrap work. Where do I find those?
This works. You need to attach/initialize JS on some components/elements.
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
I need some HTML code to be processed only by Dreamweaver's Designer.
To be more exact, I need smth. like this:
<html>
...
<link rel="stylesheet" type="text/css" media="screen" href="styles_print.css" title="printer_friendly_css" />
<!-- FOR_DREAMWEAVER_DESIGNER_ONLY
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" title="normal_css" />
-->
...
</html>
So that when this page is being viewed in Dreamweaver's Designer, the effective HTML looks like this (second tag is "uncommented"):
<html>
...
<link rel="stylesheet" type="text/css" media="screen" href="styles_print.css" title="printer_friendly_css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" title="normal_css" />
...
</html>
and when the same page is being viewed somewhere else (e.g. in regular browser), it is processed as it should be (second tag is ignored because it is commented).
Is this possible? Does Dreamweaver have this kind of feature?
Dreamweaver has a feature called Design Time Style sheets to handle this type of functionality. It allows you to apply styles only within Dreamweaver not on the live page. You can even hide styles at design time that would be present live.
Format -> CSS Styles -> Design-time
Adobe help for Design time style sheets:
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html
You can even use design time style sheets to help you track down potential problems with your CSS. Here's an article I wrote a while a go about that topic:
http://www.webassist.com/free-downloads/tutorials-and-training/roadmaps/roadmap_07.php
If you're using PHP and you want to apply site-wide and you have an include that is in every page take a look at:
http://james.revillini.com/2008/01/24/solved-dreamweaver-site-wide-design-time-style-sheets-using-templates/
Dreamweaver extension that can apply them site wide (Commercial, but only $5, haven't tried in in several versions of Dreamweaver, but I think it should still work):
http://www.communitymx.com/abstract.cfm?cid=61265