I have an XSL transformation which outputs HTML. In the head element I have a CSS file reference.
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
I would like to create a standalone HTML result without external references and thus I would like to include external CSS references. To prevent code duplication, I do not want to hard code the styles into the XSLT template, so I am looking for some XSLT command to copy the file contents of the CSS file. I know xsl:include or xsl:import won't work, since they expect XSLT files. Neither does
<xsl:copy-of select="document('css/styles.css')"/>
as it expects something XML compliant.
I also have some JavaScript function declarations which I would like to copy as well.
Is this possible with pure XSLT, or will I have to do some pre-processing of the XSLT file (or post-processing of the HTML file)?
XSLT 2.0 provides the unparsed-text() function to read documents via URL that are not XML.
In XSLT 1.0, if you don't need to be too script about the CSS, you can use the following to make the CSS file XML-compatible. And, fortunately, the browsers tolerate the HTML comments.
CSS
<!--/*--><root><![CDATA[<!--*/-->
body
{
margin: 0;
}
div > p
{
background-color: yellow;
}
<!--/*-->]]></root><!--*/-->
XSLT
<style type="text/css">
<xsl:value-of select="document('test.css')" disable-output-escaping="yes" />
</style>
Use a processing instruction to wrap the CSS content:
<?xml version="1.0" encoding="utf-8"?>
<root>
<?wrapper html
<html>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</html>
?>
</root>
Then tweak the existing xsl:copy-of select statement to render it:
<xsl:copy-of select="document('css/styles.css')//processing-instruction()"/>
Maybe you could trick it into thinking the stylesheet is XML.
styles.css
/*
<?xml version="1.0" encoding="utf-8"?>
<style>
<![CDATA[
*/
... styles ...
/*
]]>
</style>
*/
It's a hack but if there is no other way it might suffice (assuming it works at all).
Related
I am trying to grab data from an XML status file that is on VLC and I want to put it into an HTML so that when the status XML updates or is requested, the new information appears in the HTML.
Here is the XML information from the status.xml when its ran.
OMFG - I can't post images due to reputation yet. Here are the links to the images instead.
I want those fields in here:
I don't have any knowledge of any direct programming. I have run some batch files and I have some python scripts I use and I edit but nothing else. I understand tags, functions and lists to a degree.
I have tried using "scr" to path out my xml file with "type:text/xml. - failed
I have tried using a viewer.js file and editing that to point to the xml file I wanted. - failed. - I didn't understand how to put the xml data into a javascript file that can then be referenced inside the html.
This is the html file; I got it from the rig-developer kit from twitch as there first extension.
<!DOCTYPE html>
<html>
<head>
<title>Viewer Page</title>
</head>
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<div id="app" class="full-height"></div>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="viewer.js" type="text/javascript"></script>
<script type="http://192.168.0.22:8080/requests/status.xml">{
</script>
<h2>Video Game Music playlist</h2>
<p>Here is what is playing currently</p>
<div>
<input type="button" value="Refresh what's playing" />
</div>
<div id="list">
</div>
</body>
</html>
Here is the xml file:
]]?>
<?vlc
--package.loaded.httprequests = nil --uncomment to debug changes
require "httprequests"
httprequests.processcommands()
local statusTable=httprequests.getstatus(false)
print('<root>\n')
local item = vlc.input.item()
--data in the information section is presented in a non-standard way to keep compatibility.
?>
<information>
<category name="meta">
<?vlc
if item then
local metas = item:metas()
for k,v in pairs(metas) do
local metadataContent = vlc.strings.convert_xml_special_chars( httprequests.xmlString(v) )
print("<info name='"..httprequests.xmlString(k).."'>"..metadataContent.."</info>")
end
end
?>
</category>
</information>
</root>
I excepted that I can find a way to put the data from the xml into the html or any html file. Infact if someone can just show me how to put the xml data I have into an html file where it can be updated that would be amazing.
I have been trying to look up the easiest way to do this on youtube but I keep coming accross videos that show how to get images from xml to html; which I don't need.
Infact, to be honest; I think I need the xml file to be in Javascript first or something? I think the html has to be an inline html and thus the xml data has to be referenced from a .JS file?
I don't know what I am talking about. lol
Mixing XML and HTML is tricky. There's a W3C task group report here which analyzes what works and what doesn't:
https://www.w3.org/2010/html-xml/snapshot/report.html
and an overview talk by Norm Walsh:
https://norman.walsh.name/2011/03/26/HTML-XML-Prague
This work was done some years ago but I don't think the situation has fundamentally changed.
I've been following this article (https://dev.to/programliftoff/create-a-basic-webpage-with-css-and-javascript--104i) to get started on building an interactive webpage, but I can't get the JS and CSS to work.
I'm working in Sublime, and I followed this tutorial (https://www.youtube.com/watch?v=oqD5C77Tk3I&feature=youtu.be) to run it through http rather than the file system.
I've double checked the folder paths fifty times (they're just saved on my desktop as 'scripts' and 'styles' in the same folder as my index.html doc), and tried different variations of dots at the start of the paths and slashes both ways, but the JS and CSS just won't load. I've also moved the 'link rel' and 'scripts async src' lines between the head and body tags, but it doesn't seem to make a difference.
My html doc looks like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link rel=“stylesheet” type="text/css" href=“../styles/styles.css” />
<script async src="./scripts/index.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<h4 id=‘date’></h4>
<img src="images/IMG_4945.jpg" alt="My test image">
</html>
My JS doc looks like this,
document.getElementById('date').innerHTML = new Date().toDateString();
My CSS doc looks like this,
body {
text-align: center;
background-color: #ffe6e6;
}
Hard to tell without looking at your file structure, but let's assume you have it like this:
|-Project
|-----css
|---------style.css
|-----js
|---------main.js
|-----index.html
in your index.html you should be calling your css like this:
<link rel="stylesheet" href="/css/style.css" />
in UNIX based OS's (and localhost Windows) / equates to document root. It's best to do this as you're guranteed to always call that file no matter where you copy + paste code to.
Note: In Windows servers / doesn't work - not sure why. Windows just sucks I guess.
Remove the async keyword from your script element. That isn't an asynchronous script and it modifies the DOM before it's ready.
Use jQuery $(document).ready(function() {}); or JS window.onload = function() {}; and remove that async attribute so your script is run in synch with the DOM.
In other words, you cannot edit the document before it has been created. But you are trying to do that with an async and no check for if the document is ready.
../ means parent folder. So:
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<script src="scripts/index.js"></script>
Double quotation marks in your code are valid? “ -> " Pls check it.
I'd like to pull in a static HTML file that I'll use as an Underscore template in my front-end JavaScript. I've tried the following with no luck:
<link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>
<g:external dir="tpl" file="foo.html" type="html" />
The file sits at web-app/tpl/foo.html.
The ultimate goal is to use the new HTML import syntax to access the file's contents via JavaScript.
Why is that file at web-app/tpl?
Here's what you can do to import that template:
Move it to grails-app/views/tpl/.
Change the file name to _foo.gsp.
Use <g:render template="/tpl/foo" /> in your view to pull in that HTML.
Read more about the render tag here.
Also you can use an meta tag.
<meta name="layout" content="main"/>
And in the main.gsp tha must be at the view/layout/main.gsp you can use grails tags:
<g:layoutHead/>
and
<g:layoutBody/>
By the name you can understand that layoutHead insert head of your page to this layout. layout body insert body of page to this layout.
The following worked for me, though I'm not sure if it's the best solution: In UrMappings.groovy: static excludes = ['tpl/foo.html']. This made the link tag work in page.gsp <link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>.
A content rendered from h:outText with escape="false" is not bound to the css or javascript applicable for that page. Actually I am trying to use syntax highlighters to highlight my syntax within a post. The post is stpored in database and displaying it in a JSF page with h:outputText tag by setting escape attribute as false. It renders the page as expected with all html tags being processed but css or javascript applicable to the code blocks within that post is not applied. Below is my jsf page which retrieves html from database and shows it through h:outputText tag. The retrieved content has syntax it needs to be highlighted.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/templates/ui.xhtml">
<ui:define name="head">
<title>tekBytes-#{tutorialController.tut.title}</title>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link href="/rainbow/themes/pastie.css" rel="stylesheet" type="text/css" />
<script src="/rainbow/rainbow.min.js"></script>
<script src="/rainbow/language/generic.js"></script>
<script src="/rainbow/language/java.js"></script>
<script src="/rainbow/language/css.js"></script>
<script type = "text/javascript">
/*
* do some jQuery magic on load
*/
$(document).ready(function() {
function showHiddenParagraphs() {
$("pre.hidden").fadeIn(500);
}
setTimeout(showHiddenParagraphs, 1000);
});
</script>
</ui:define>
<ui:define name="content">
<div style="margin:20px">
<h1>#{tutorialController.tut.title}</h1>
<br/>
<h:outputText value="#{tutorialController.tut.contentStr}" escape="false"/>
</div>
</ui:define>
</ui:composition>
In JSF 2.0, all your web resources files like css, images or
JavaScript, should put in “resources” folder, under the root of your
web application (same folder level with “WEB-INF“).
Put your js / css in resources/js and resources/css folder and access them with <h:outputStylesheet and <h:outputScript
Like this
<h:outputScript name="js/rainbow.min.js" />
and
<h:outputStylesheet name="css/language/css.js" />
and so on...
Also read this : Resources (Library) In JSF 2.0
Potential problem could be in number of places here , verify the following in order.
1) Check your CSS files are getting loaded by the browser
by monitoring the request in developer tools on Firefox or chrome.
https://developers.google.com/chrome-developer-tools/docs/overview?hl=fr
2) check the source of your html to see if that looks
fine and tags are not encoded etc.
3) verify your CSS to see it works and it doesn't have missing semicolon,
brackets,quotes etc by adding it to a test html page on your machine.
I got it resolved. The actual issue was that the html stored in database was generated through the p:editor which has put so many div tags around every line, so when it is rendered through h:outputText tag the css or javascript is not able to parse the code blocks that are applicable for syntax highlighting because of surrounded divs and other tags. So I have removed all of these unnecessary tags before storing it in the database. Thanks, everyone for the replies.
I have a C# application that generates an html document from transforming an xml file with an xsl file. In my xsl template I reference an external javascript file like this:
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script>
after the transformation the previous line is being translated to:
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />
For Firefox and Chrome this is no problem however IE throws an 'object not found' error and does not work. Any suggestions for getting IE to like this syntax? Or is there something I need to do in my xsl (or the C# XslCompiledTransform class) to preserve the syntax?
Solution: By placing <![CDATA[ <!-- Some Comment --> ]]> between the script tags the parser doesn't attempt to shorten the ending tag.
Try putting an empty CDATA section inside. This should force the parser to not mess with your script tags.
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ><![CDATA[ ]]></script>
Actually, bobince is right. If you use...
<xsl:output method="html"/>
... you can get the right output for XslCompiledTransform, but you have to use its OutputSettings with the XmlWriter you use as output object:
XslCompiledTransform xslt = new XslCompiledTransform(true);
xslt.Load("stylesheetFile.xsl");
XmlWriter outputWriter = XmlWriter.Create("outputfile.html", xslt.OutputSettings);
xslt.Transform(input, null, outputWriter);
This way, the method="html" works, so script, textarea et al keep their closing tags.
Generate an XML comment inside <script>:
<script type="text/javascript" src="..." ><xsl:comment/></script>
The output will be:
<script type="text/javascript" src="..."><!-- --></script>
which is semantically equivalent to an empty <script>.
Not preserve it, but if you're producing backwards-compatible HTML you need to tell the XSLT processor that HTML-compatible-XHTML is what you want and not generic self-closing-allowed XML:
<xsl:output method="xhtml"/>
Unfortunately, the ‘xhtml’ output method is an XSLT 2.0 extension that .NET's XslTransform doesn't support, so you have to use good old legacy HTML instead:
<xsl:output method="html"/>
(and appropriate HTML 4.01 DOCTYPE instead of XHTML.)
Putting some dummy content in <script> may solve your immediate problem, but there may be other places where the default ‘xml’ output method will produce inappropriate markup for legacy browsers like IE.
Re: comment. Hmm... you're right! The ‘html’ output method does not produce valid HTML; the ‘xhtml’ output method does not produce XHTML conformant to XHTML Appendix C. What's more, ‘html’ includes provisions such as not escaping ‘<’, and de-escaping the ancient and broken-even-for-its-time Netscape 4 construct ‘&{...}’, that will take your working markup and make it invalid.
So changing the output method is completely useless, and the only way to produce working HTML with XSLT is:
a. hack every occurrence of an inappropriate self-closing tag manually (there are likely to be many more than just this script), or
b. post-process with something like HTMLTidy.
How sad, and sloppy that this hasn't been addressed even in XSLT 2.0.
had the same prob. right now, this is my solution:
<xsl:text disable-output-escaping="yes">
<![CDATA[<script type="text/javascript" src="" ></script>]]>
</xsl:text>
Just Missing the closing </script>.
<xsl:output method="html" omit-xml-declaration="yes" doctype-system="about:legacy-compat" encoding="utf-8"/>
should solve your probleme