Advice: where to situate html table content: in JS or HTML - javascript

SHORT: my python code generates a webpage with a table. i'm considering rewriting it to generate a js file instead, that holds the table contents in an array ... and then let the table be generated client-side. I am not sure of the pros and cons. Anyone care to offer their experience/insight? Are there other solutions?
LONG: the web page contains a single table and an embedded gmap. the table is a set of locations with several columns of location-stats and also two navigation columns. one nav column consists of onclicks that will recenter embedded gmap to the lat,lon of the location. the other nav column consists of hrefs that open a new window with a gmap centered on the lat,lon.
Until recently, my python code would do some number crunching on a list of files, and then generate the html file. also i wrote a js file that keeps the webpage liquid upon browser window resizing.
Recently, I modified my python code so that it:
placed the lat,lon info in a custom attribute of the tr elements
no longer produced the nav column tds
and then wrote a js function that
loops through the trs onLoad
reads the lat,lon from the custom attribute
inserts the nav tds
fwiw, this reduced the size of the html file by 70% while increasing the js by 10%.
ok, so now I am debating if I should go all the way and write my python code to generate 2 files
an essentially abstract html file
a js file containing a js array of the locations and their stats

If your API can output a JSON document with your data, you gain significant flexibility and future-proofing. This might even be something your users will want to access directly for their own external consumption. And of course your JS code can easily generate a table from this data.
However nobody here can tell you whether this is worth doing or not, as that depends entirely on the scope of your project and opportunity cost of time spent re-architecting.

Related

How to retrieve a specific page number in an html code (for pdf file generator) and then display it elsewhere (in a TOC for example)?

I am currently working on a pdf generator with html/css code. Everything is already functional, including page number generation in the footer. My current problem is that I want to create a table of contents with a dynamic page number (since depending on the content, the page numbers of the different chapters are different). Is it possible to do this with just html/css?
The generator is working properly. But I have no idea how to proceed to get the page number of the pdf file.

How to create a single page pdf from a html file

How to create a single page pdf from a html file
I'm currently using the convert-html-to-pdf library (version: 1.0.1) to convert html files into pdf. But, the conversion is separating my html in multiple pages and it ends up breaking the code (streched divs).
Since my html file is responsive to certain needs, the size of the div blocks change on each file, and because of this I'm not able to determine when to "break" each page unless I somehow measure the size of the page and the size of the blocks.
There are two possible corrections:
create a single page pdf (this one is preferred)
mesaure the size of the page and compare with the items to make sure they are not separeted each page
The first one is supposed to be easier, but I can't find anything in the documentation that helps me do that.
I'm inclined to accept libraries suggestions to create a single page pdf.

noticable lag reading text off a google doc by google app script and rendering on page

have built a personal website using Google App Script - shows my cv, work samples etc
There is a css accordion menu with links to cv etc and a main div (main stage area) to feature the linked content.
At the moment the only workable method of fetching text data (like my cv or bio) that I managed to get working is by having google text docs with required text and using getText() method in code.js to load the text into a variable which is than rendered inside the main div using innerHtml
This is the function fetching the text data
function getDocContent(docID) {
var docx = DocumentApp.openById(docID);
var body = docx.getText();
return body;
}
Anyway the main issue seems to be latency from clicking the link to the point it is rendered. I am not sure if it is solvable or if there are more efficient methods of storing text data into variables and fetching it (other than adding these vars to the JavaScript page which will make it very large and messy to maintain)
I was trying to create separate js page (data.js) which only defines the variables holding the text data but cant make it work (main js page does not seem to see the vars on the data.js page)

Can I insert HTML into a page via a file, and then interact with those DOM elements with JavaScript?

I'm building a Chrome Extension.
The extension injects some CSS and JavaScript when .html files on the users local drive are loaded in the browser (file:///).
My extension adds an extensive UI to the page that allows the user to modify and manipulate the original source code from their .html file.
The primary purpose of the extension is debugging and QAing HTML email newsletters. Here's just a few things that it does:
Checking links for the appropriate parameters.
Toggling images off and on to simulate popular email clients.
Displaying the source code side-by-side to show a desktop view and multiple mobile sized views.
A function that takes the original HTML and generates a plain text version.
A function that toggles <style> blocks off and on to simulate popular email clients ignoring them.
Email files are backed up via Dropbox and the Dropbox API is integrated to allow for quick sharing right from the email newsletter.
Until now I've been using javascript in my injected content script like this to create all of my menu items.
var debugOrb = document.createElement("div");
debugOrb.id = "borders-orb";
debugOrb.className = "borders-orb orb glyph";
debugOrb.addEventListener("click", toggleBorders, false);
orbsBottom.appendChild(debugOrb);
Here's an extended view of the code I've written to create all of these toggles/menu items: http://pastebin.com/LQTkNhpP
My problem is that now I'm going to be adding a LOT more clickable menu items like this. And it feels like if I do, it's going to get out of hand really quick. Especially since I'll be nesting a lot of divs to make the whole thing look organized and using JavaScript to create lots of text nodes too.
My first thought was what if I could just create my entire menu in regular HTML, then just inject that file into the page with the javascript in my content script. I'm barely intermediate level with JavaScript though. And as I understand it, if I did this, I'd lose my ability to use onclick handlers for all of these divs I'm creating.
Is there an efficient way to handle my goal that I'm not aware of?
Notes:
I'm not using any framework/plugins like React, Angular, or jQuery.
Once the html is added you can always get the element by id and then add an event listener to that element. You can have functions relate to the divs and then onload create the event listeners. element.addEventListener ('click', function);

How can I create a Table of Contents automatically in a Sharepoint 2007 wiki page?

As our users get more familiar with the wiki functionality, and like it, we see that pages are getting longer and more difficult to navigate.
We would like to be able to generate table of contents on a per-wiki-page basis to allow easier navigation, i.e. the users create content whose hierarchy is represented by h2/h3/h4 elements and then the TOC is automatically generated at the top of the wiki page with each entry in the TOC being a link to the corresponding h2/h3/h4 element in the page.
We do not have access to Sharepoint Designer so any funny stuff will have to involve css/javascript inserted using a Content Editor Web Part.
Best regards,
Colm O'Gairbhith
In case this may be useful to anyone else, I ended up using the jquery tableofcontents plugin.
The tutorial Automatically Generate Table of Contents with jQuery explains how to use this.

Categories