I have an XML file that I am creating an XSL stylesheet for.
What I would like is to have two frames and do two passes on the data, the first would create a Table of Contents in the left frame, and the second would have the body of data in the right.
I can do the two passes, the problem is putting them in separate frames. The frame HTML element takes in a source; I can't put my source directly in there.
I can think of a few ways to get around this, none of which I'm thrilled with, so I wanted to see if anyone had found a way to do this.
As said before, you need 3 files for this.
In XSLT 2.0 you can generate multiple output files from one xsl stylesheet using the xsl:result-document instruction.
In XSLT 1.0 you don't have that function, but depending on the processor it might be possible. For example for Xalan see http://xml.apache.org/xalan-j/extensions_xsltc.html#redirect_ext
If you want to use frames you need three separate files.
The frame file. This is just a strict HTML file
A file for your table of contents
A file for your content
The first one is as specified just an HTML file. The second two are XSL files that will eventually turn into HTML. A good tutorial on frames is here at W3Schools.
EDIT: The more I think about this, the more I dislike the solution. It requires the XSL parser to be run twice for each time the initial page is served
Have you thought about using CSS or tables to do your layout? There are some really good open source CSS templates flying about here on the interwebs.
This was relatively stable data that would be generated by a script, so what I ended up doing was creating separate stylesheets for the TOC and the main window, then using those to generate html files for each of them after I generate the html.
Then my main page was just a static html page that referenced these generated html files.
There's probably a better way to do it, but this is an internal reference, so this is enough to get me going.
Related
I have a website and need to transport a form to another website. I however only need certain tags not the whole form block with all it's tables and divs.
When selecting a html-tag in inspector, I can copy inner HTML, outer HTML or CSS styles but how can I just copy that very exact tag I selected without it's child nodes, just the selected line in HTML code?
I ask this because the HTML is minified and I can't just select and copy a tag in source. Same when I chose "copy outer HTML" I get the whole HTML subtree minified, means everything in one line.
How can I quickly search and copy certain tags from the three without grabbing everything in the branch?
Edit: People, thanks for all your suggestions but please note that I wrote about a MINIFIED HTML page I have here.
Just open Debugger near Inspector
Then find page file... then copy with any select range as you want
UPDATE
if it minify click here
If I understood what you want try this
Since your question seems unsolved yet, let me come up with a creative approach I use for similar tasks from time to time:
(1) Creative solution: Page manipulation
If you don't have a javascript framework of your choice (e.g. jQuery) on that page, add it using a browser-extension that adds it when page has loaded.
Then you write a bit of javascript code that removes unwanted child elements of the desired parents in a loop or so. That sounds like lots of work but since you asked this question I assume you need dozens if not hundreds of elements so it might be worth taking the time to write such loop(s).
When the code you injected processed the page and removed everything you don't want, you can then copy the code like mentioned by others here.
(2) Alternative solution: Beautify the code beforhand
If the given solution(s) don't work for you, one could try to beautify the code by copying the source to a webpage that auto-indends html/js code. You could then optionally save it into a html-file and approach that one again like mentioned here before.
Sidenote
If either this idea is too much work or you need this frequently you are probably approaching this on the wrong side. When working on frontend (only) you are always limited to what you have. If you could approach from the backend you could then build from the data/information whatever you need. If you could provide a bit more information about why you need this and how much code you are talking about one could maybe come up with a more sustainable solution!
If I navigate the website I'm developing I can keep track of any CSS directive that is being used in that page.
For example I could associate the directive written at line 1 of main.css to the page Index.htm
I've got a CSS file which is 4000 lines and I would like to split it.
The best way would be to separate it for pages.
Every CSS instruction which is specific to only one page could be moved.
How could I accomplish this task?
You could use a tool like uncss for every page in the app and diff the outcome to see what has been removed/not used on that page.
Edit:
You could automate the process a bit more using Grunt with grunt-uncss or Gulp with gulp-uncss. However, I am unsure about the diffing part.
You would need to copy them to a new css file, I would suggest naming each CSS file with specific naming for what the code inside actually does, such as you could have a layout css file, if all pages have the same basic layout. If particular pages have a large amount of css that is only used by them you could consolidate that all into one file. You would need to do full testing once done to ensure all pages have the cs files they need (and none they actually don't need). with 4000 lines it will be a large task but will be far more manageable in future upgrades/revisions
I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!
I am impelemting a game in easeljs. I need to add different scenes in different html files. But I dont know how to do it. I mean, when I clicked an object in a file. It must pass different file and load its functuanilities. I searched the problem but the answers always in the same file with adding and removing different containers.
I am not sure what you are trying to do. When you say multiple HTML files, are you referring to content exported by Flash/Toolkit? If so, you will have to do some work to combine the content into one "application". Other than loading HTML files into iframes, there isn't really a straightforward way of loading another HTML file into your application (akin to loading another SWF into a Flash application).
Can you describe more your different scenes, how they are constructed, and what you are trying to accomplish?
In my current project, I need to add information from an xml file to my html template using XSL. Does anyone know how to do it. I tried creating an xsl file and run, it just creating a temporary file and when I closed, it got deleted. I have a separate html template, I just need to add the xml file contents to it.
Thanks
Your question is rather unclear to me.
From your question I infer that you mean XSLT.
Where exactly should the transformation happen? Client-side (e.g. web browser) or server-side? Both approaches have different advantages.
What kind of HTML template is it?