Bind HTML Attribute to XML Data Source - javascript

I am not that familiar with the whole SGML family... I need to develop a small website which is part of an installation process of an application. The website shows permanently the features which were selected during the installation process. The website is fine - thanks to Bootstrap. But now I want to hide or show elements on this website according to the selection in the installation process.
During the installation I can modify an XML file. My idea is to bind the HTML attributes to the XML data.
Example XML I can modify during my installation process:
<features>
<feature>
<name>Feature 1</name>
<visible>hidden</visible>
<feature>
<features>
HTML idea:
<div class="feature1" VISIBLE_VALUE_FROM_XML>
<img src="./img/feature1"/>
</div>
Is it somehow possible to bind both? What are the relevant keywords here? What alternatives do I have? Do you have any good reading sources?
Thanks!
[EDIT]:
Perhaps the question was too trivial for you. I guess I was too limited in Data Binding thinking. So, the following steps do the trick:
leave your desk
grab a coffee
smoke a cigarette, if you like
use JS and traverse the XML tree

Here You GO!
With these steps you can do it.
Step 1 : Convert your XML to JSON using any one of the libraries (like jquery XML2JSON)
Step 2 : Select your "DIV" with id with jquery($("#yourid")) and modify the visibility according to the value of the visibility property in your json
(e.g)
if(json[feature].visibility=="hidden")
{
$("#yourid").hide();
}

Related

Drupal - Where is located config.js of CKEditor?

I am trying to find the configuration file of CKEditor (v8.5.3) so I can remove automatical stripping of classes from div element using config.extraAllowedContent = 'div(*)';
I have found some threads where are people referencing the config.js in the root file of CKEditor but I cant find it in there. Any idea where I can found this configuration file?
Thank you for response.
I'm not a Drupal guy but from what I have checked, in D8 you can set the configuration using hook_editor_js_settings_alter. Please see:
https://api.drupal.org/api/drupal/core%21modules%21editor%21editor.api.php/function/hook_editor_js_settings_alter/8.5.x
https://drupal.stackexchange.com/questions/186102/drupal-8-ckeditor-behaves-ltr-in-an-rtl-site/186303#186303
When it comes to filtering HTML however you should, in your Drupal Admin Panel, go to Configuration -> Content Authoring (Text formats and editors). There you can either configure "Allowed HTML tags" or simply uncheck "Limit allowed HTML tags and correct faulty HTML" checkbox what will allow everything.
If you wish to configure your HTML here is IMO a nice link showing the filter syntax: https://www.drupal.org/node/2571349
I've ran a file search from the command line, and can confirm that nowhere does the file config.js exist (using v8.6.x).
I found another case of an admin losing classes on DIVs in CKEditor (though in version 8.2.x), and the only way she found to remedy that, was to create a new text format at /admin/config/content/formats. Then, including in allowed HTML tags:
<div class>
Her full solution can be found here. It includes some pointers as to which options to select when creating the new text format.

How do you style XML documents being displayed on a web page using either Javascript or CSS?

I have developed a small portal that will extract an XML document from a DB table and display it to the user.
I have pretty printed the XML document using vkbeatify.js, however I would also now like to style the XML document to represent the XML tags as a different colour from the XML Values.
How can this be achieved?
The XML documents can be of varying structures.
Apologies if this is a duplicate question, I had a look and couldnt find an appropriate solution on here.
Thanks in advance.
Edit:
At the moment the XML documents are displayed in a textarea, however I am open to changing this to something more suitable if it will allow for the XML document to be formatted and coloured appropriately.
As long as your XML schemas are known, you can use XSLT to transform the XML into HTML.
MSDN XSLT
This won't be a good solution if you need to display the XML structure itself to the user, but you will be able to color code everything in whatever way you want using html/css.
Edit:
Because you are rending the "beautified" xml in a textarea, it is just text. You cannot target the individual nodes as you could elements on a page. Even if you were able to add a class to a node, it would result in the class name being rendered in textarea. Similar to this: <thing style="background-color:blue;"> instead of it rendering as blue.
prismjs works well for syntax highlighting XML markup.
How can this be achieved?
There are several ways this can be achieved. Here's a couple of approaches you could consider:
Example 1
Method: Fetching the XML file using the File Highlight plugin:
Getting the necessary Prism Javascript and CSS:
Visit the downloads page.
Select minified version.
Select Markup from the Languages section.
Choose a Theme.
Select File Highlight from the Plugins section - (Include the Line Numbers plugin too if required).
Download JavaScript and CSS file.
HTML
Link the generated files (from step six above) to the .html page you intend to use to present the .xml as follows:
<link rel="stylesheet" type="text/css" href="my/path/to/prism.css" />
<script src="my/path/to/prism.js"></script>
Then link to the external .xml to the .html using the <pre> tag and data-src attribute as follows:
<pre data-src="my/path/to/foobar.xml"></pre>
Edit your .css as required to display the syntax highlighted .xml to the user.
Example 2
If example one above is an issue due to the XMLHttpRequest file fetching nature of the File Highlight plugin. An alternative approach, although more complex is to:
Method: Inline escaped XML to the .html page
Steps 1-6 in example one are required here too, however, there's no need to include the File Highlight plugin.
Again, the generated files (from step six above) will need to be linked to the .html you intend to use to present the .xml.
The following shows the html syntax necessary for displaying the escaped XML including line numbers:
<pre class="line-numbers"><code class="language-xml">
<?xml version="1.0" encoding="UTF-8"?>
<root>
...
...
</root>
</code></pre>
I've successfully used example two in the past and utilized nodejs to auto read the xml, escape it, and write a .html for displaying to the user. But yeah, there's a myriad of ways this can be automated.
Hope this helps!

Multipage pdf - display specific page in html or js

I've seen there are few options to display a pdf file within an HTML page
cf.(among others) Recommended way to embed PDF in HTML?
Ok, what about if my pdf is multipage and I want to display a specific page ?
And only a specific page as if it was an image, meaning that the user can't scroll within the pdf.
Q) can I, and how to display a given page of a given pdf ?
imagine a kind of slide-show system, the aim would be to display within a <div> a given page of a given pdf according to the user's demand.
EDIT
ok I've been re-thinking this and actually my question should have been
How can I do exactly like in the previous/next exemple (http://mozilla.github.io/pdf.js/examples/learning/prevnext.html) if my project is hosted on a shared server on which I can't have an ssh access, install any packages or add librarie etc.
many thank's
This is entirely my personal opinion and it's your choice whether to use this way or not, but I would recommend having an iframe with the src set to the required PDF document. Then, add some HTML input buttons with their onclick attribute set to change the source of the iframe to include the parameter for the page number (#page=3). As an example of what I mean, take a look at the code sample below:
<iframe id="example" src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf"></iframe>
<input value="Page 5" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=5';" />
<input value="Page 1" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf';" />
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
This is probably the best way to do it with JavaScript/HTML5
(Access specific page)
http://mozilla.github.io/pdf.js/web/viewer.html#page=13
Regarding this example,I think that you should use the "View Source" feature in whichever browser you're using to get the HTML and JS for it, then add a JavaScript timer to trigger the onPrevPage(); and onNextPage(); JS functions.If you need help creating a JS timer using the setInterval function to change the pageNum variable, see the following link:http://www.w3schools.com/js/js_timing.asp

Having same <div> on all my sites

I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.

How to pull data from xml (in iframe) ONTO parent w/ dynamic folders

After reading through nearly 100 posts on this site trying to find someone that asked something similar to what I needed I gave up and decided to just ask myself. Forgive the rest of this post as it will probably sound stupid to experts.. but here goes
I am trying to set up a sort of "live demo" for css styles that I create. The idea is to have a static page with about a 100px height header with a drop down list of all the styles. The user will select a style name from the list and it will load that style in an iframe that occupies the rest of the viewport (/styles/xx/index.html).
In addition to a drop-down list, I wanted to list some data about each style like author, download link, support, etc.
Originally I thought about just including an .xml file inside each of the style folders but I can't figure out how to pull that data from within the iframe, out to the parent.
I've drawn a mockup up what I'm trying to achieve to make my limited explaining skills bearable http://www.kanestyles.com/example.jpg
The text in red is what I wanted to be updated each time a different style is selected from the drop down list.
I should also note that I'm not dead-set on anything unlike most of the people I've been reading here. I mean I don't absolutely have to have it a certain way and I am completely open to suggestions on how to show users live demos of css templates quickly.
Thanks in advance for any help!
How about not using an XML file, but a JavaScript file that will push the info actively into its parent?
parent.document.getElementById("author").innerHTML = "John Steinbeck";
parent.document.getElementById("rating").innerHTML = "5 out of 10";
or 2. How about not using an XML file, but a JavaScript file containing a function:
getinfo = function() { return {'Author':'John Steinbeck','Rating' : '5 out of 10' ... } }
you could then access the array from the parent element, and get the data directly.
There are prettier ways to layout both ideas, of course. But to show the basic idea.

Categories