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.)
Related
My source code repo: link
contact and create ejs files in views folder are exact copies.
Routing is in index.js
app.get('/contact',(req,res)=>{
res.render('contact')
})
app.get('/posts/new',(req,res)=>{
res.render('create')
})
contact page is loading all styles but create page is not loading the styles and css.
If I change the router from /posts/new to /new then loading.
Please suggest how to fix this.
There is a small mistake in the views/layouts/head.ejs file.
You need to change this line of code from
<link href="css/styles.css" rel="stylesheet" />
to
<link href="/css/styles.css" rel="stylesheet" />
This will load the css for the create page as well.
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
We have a web application written with JSF and are trying to add a mobile version to it. Ideally, we'd have a separate folder with templates, CRUD and resources (e.g. jQuery Mobile) and our landing page would be able to choose the appropriate template based on the user-agent attribute of the header.
One way would be to use a scriptlet and redirect to mobile/index.xhtml - end of story, but people don't like scriptlets :D
Another way would be to wrap the content of the landing page (includind the templated parts) in a panelGroup with rendered="#{mobileDetector.isMobile()}", having a backing bean perform what the scriptlet would have done otherwise. But I think it kind of cripples the templates, plus it doesn't apply to the head section.
So - is there a better way?
Either use a separate subdomain, e.g. mobile.example.com for mobile users and (www.)example.com for desktop users, and/or sniff the user agent. There are public APIs available on:
http://user-agent-string.info
http://www.useragentstring.com
Alternatively, you can use CSS to hide/change parts of the the HTML markup based on the media type.
<link rel="stylesheet" href="css/desktop.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/iphone.css" media="all and (max-device-width: 480px)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">