Javascript/HTML help

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Javascript/HTML help

Postby EvanED » Sat Mar 28, 2015 10:00 pm UTC

Suppose I have a local HTML file with some Javascript. Next to it is another file, say foo.fragment, that contains an HTML fragment. When someone clicks something in the main HTML file, I'd like the browser to open foo.fragment and insert it into the current page.

Is this possible, or do browser security features make it impossible?

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Sat Mar 28, 2015 10:06 pm UTC

In the interest of if anyone has solutions to my larger problem, here it is.

The main HTML files I'm talking about can be very large; even omitting a bunch of information from them, being more than 10 MB is common. If I turn on "all" information, I just got a 90MB file, and they can be bigger still on other, larger, inputs. A file of 10 MB takes Chrome a good 15 seconds to open from the local disk and render; I'm looking to speed that time up by breaking up it into smaller files. I could do it with a bunch of links between pages, but I'm wondering if dynamically loading & unloading comment on demand would make it more friendly to navigate. (I'm actually not sure it would, just trying to determine feasibility.)

User avatar
Sizik
Posts: 1255
Joined: Wed Aug 27, 2008 3:48 am UTC

Re: Javascript/HTML help

Postby Sizik » Sun Mar 29, 2015 12:20 am UTC

Use frames/iframes?
she/they
gmalivuk wrote:
King Author wrote:If space (rather, distance) is an illusion, it'd be possible for one meta-me to experience both body's sensory inputs.
Yes. And if wishes were horses, wishing wells would fill up very quickly with drowned horses.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: Javascript/HTML help

Postby WanderingLinguist » Sun Mar 29, 2015 3:01 am UTC

I think iframes are the only general solution for your first (specific) question. If this is just for testing purpose, try using Firefox instead; I think as long as the file is in the same folder it may allow access. In general, however, for security, I think most browsers don't allow it. Running a local web server for testing would be the best approach, I suspect. As for the general problem, I've had 10MB+ HTML files load quite quickly in Chrome. I think it depends on what is in the file. Rather than trying to reduce the file size, you may be able to adjust it in some way to make it easier for the browser's layout engine to deal with. Alternatively, you might consider placing the data in a Javascript array or something, and generating HTML dynamically as the user scrolls near the bottom of the page. (Or, if the data is something that it makes sense to filter, do some filtering based on user input and only display the results if the result set is sufficiently small). I might be wrong, but is sounds like you're stressing the browser's layout engine. 10MB is not that large. It might help to know what kind of data you're dealing with in these large pages...

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Sun Mar 29, 2015 4:37 am UTC

Frames are a good suggestion; you don't see them much (at least full framesets) so I didn't think about that. That could work well.

I can probably post an example file to see if there are some simplifications that can be made to make it render faster; I'll try to do that tomorrow. It wouldn't surprise me; I'm not a web developer and don't know what would make it think a lot. One thing I'm doing that's a bit strange is that it makes very heavy use of a pure CSS collapsible list thing, where I have an <li> with a class whose default style is hidden, but then have a <label> for an <input type=checkbox> with a CSS selector like input:checked + li or something (I forget the exact bit) to make it visible. I could imagine that could be hard for it do deal with.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: Javascript/HTML help

Postby WanderingLinguist » Sun Mar 29, 2015 11:56 pm UTC

I'm not primarily a web developer myself, but there are some tools available that may help. If you are using Chrome, try View->Developer->Developer Tools. In the timeline tab, click the record button, then reload the page then click the record button again to stop. This will show you a timeline of where time was spent loading the page. My guess is probably most of it is in rendering. If something caused Chrome to need to re-calculate the layout for rendering, it should tell you what that something is if you click on the event on the timeline.

Is there any reason it has to be local? If not, putting it on a server (even a local one) may give you more options. For example, you mention you have expandable sections. You could write the initial HTML without any content in the expandable sections, and use jquery (or something like it) to load the content via AJAX when the section is expanded the first time.

If it has to be local, putting the individual section content into a JavaScript array may help. You could then leave each section empty, and when expanded for the first time, rather than using an AJAX query, just insert the HTML content from the array. This would keep it "hidden" from the browser's rendering engine until the section is expanded. You could even put the JavaScript in a separate file referenced externally in a <script> element in the page, which may allow the page itself to load faster (not sure about this last one; but it may make a difference in perceived performance on the page).

Tub
Posts: 472
Joined: Wed Jul 27, 2011 3:13 pm UTC

Re: Javascript/HTML help

Postby Tub » Mon Mar 30, 2015 8:03 am UTC

Ok, links incoming.

You could just load the additional files via AJAX/XMLHttpRequest, except for the Same-origin-policy:
https://developer.mozilla.org/en-US/doc ... gin_policy
Unfortunately, the same-origin policy for file:// urls is not standardized. For firefox, it's described here:
https://developer.mozilla.org/en-US/doc ... file:_URIs

So with firefox, loading additional files with XMLHttpRequest should work. If it doesn't on chrome, you could install a local webserver to work around it.

Frames/iframes could work, but they are subject to the same-origin-policy, too. If you intend to do more than display a page in a frame, you'll find that you can't. For example, you cannot access the html document in another frame to read form elements. Workarounds exists (see window.postMessage), but they're complicated.

tl;dr: AJAX and frames will both work only if your fragments are on the same origin as your main document.

EvanED wrote:One thing I'm doing that's a bit strange is that it makes very heavy use of a pure CSS collapsible list thing, where I have an <li> with a class whose default style is hidden, but then have a <label> for an <input type=checkbox> with a CSS selector like input:checked + li or something (I forget the exact bit) to make it visible. I could imagine that could be hard for it do deal with.

Shouldn't matter too much, unless you have a boatload of <li> elements in your css.
See for example:
https://developer.mozilla.org/en-US/doc ... icient_CSS
but don't ignore the update on
http://calendar.perfplanet.com/2011/css ... he-better/

What is still true is that css rules are checked from right to left (AFAIK in all browser engines). So if you have a rule that ends with "+ li", it'll have to be checked for every <li> in your document.
You could try optimizing it by giving it a class: <li class="collapsible">, and the css rule says "+ li.collapsible". But again, that'll only help if your document contains a lot of con-collapsible <li>s.
In any case, use a profiler first to figure out if css matching is really the bottleneck.

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Mon Mar 30, 2015 8:22 pm UTC

WanderingLinguist wrote:I'm not primarily a web developer myself, but there are some tools available that may help. If you are using Chrome, try View->Developer->Developer Tools. In the timeline tab, click the record button, then reload the page then click the record button again to stop. This will show you a timeline of where time was spent loading the page. My guess is probably most of it is in rendering. If something caused Chrome to need to re-calculate the layout for rendering, it should tell you what that something is if you click on the event on the timeline.
Most is in loading, actually:
profile.png

But I don't really know what to do with this information. If I look in more detail it mostly seems to be doing "Parse HTML" events.

I did use tidy to check that it's valid HTML, and while the "live" data isn't technically valid it's close, and a version with changes to make it valid is also slow. (It does have a doctype.)

Is there any reason it has to be local?
It doesn't have to be local; I mean, I could set up a local server. But being able to load from a file:// URI means that I don't have to worry about that.

Anyway, thanks for the input folks. I'm still letting it stew in the back of my head about what I want to do.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: Javascript/HTML help

Postby WanderingLinguist » Mon Mar 30, 2015 9:03 pm UTC

If the time is being spent in "Parse HTML" then moving the HTML code for each section into JavaScript strings and only inserting it on-demand the first time a section is expanded should do the trick nicely. Can you post a snippet of the HTML, for example for one expandable section?

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Mon Mar 30, 2015 9:30 pm UTC

This is hopefully suitably anonymized that no one will get on me too badly. :-)

Spoiler:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>xxxxxxxxx</title>

<style type="text/css">
        body { font-family: Consolas,monospace }
        .hide_me { display: none }

        /* For fancy collapsing/expanding stuff */
        input + ul         { display: none }
        input:checked + ul { display: block }
        label              { cursor: pointer }

        /* Application-specific stuff */
        .indicators img   { padding-right: 3px; }

        .someclass3               { color: darkred; padding-right: 2ex }
        .someclass1 .someclass3 { color: darkblue; padding-right: 2ex }

        .someclass10             { list-style-type: none }

        .someclass11          { padding-left: 1cm }
        .someclass12    { list-style-type: none; color: green }

        .someclass9            { list-style-type: none }
        .someclass1     { list-style-type: none }
        .someclass8       { padding-left: 1cm }
        .someclass1_text{ padding-left: 1cm; font-style: italic }
        .someclass2     { border-bottom: dashed; border-width:1px }

        .someclass4         { color: gray; padding-left: 1cm }
        .someclass4::before { content: '[' }
        .someclass4::after  { content: ']' }

        .someclass5       { list-style-type: none; border-top: solid; padding-top: 0.3cm }
        .someclass6        { color: red }
        .someclass7        { list-style-type: none; padding-top:0.2cm }

        .label            { list-style-type: none; padding-top:0.3cm }
        .label_name::after{ content: ':' }
</style>
</head>
<body>
<ol class="proc">
<li class="someclass5"><label for="collapsible_1"><img alt="blank"
src="blank.png"> <span class=
"someclass3">--------</span><span class=
"someclass6">xxxxxxxxxxxx</span></label><input class="hide_me" id=
"collapsible_1" type="checkbox">
<ul>
<li>xxxxxxxxxx</li>
</ul>
</li>
<li class="someclass10"><img alt="blank" src="blank.png">
<span class="someclass3">--------</span><span class=
"someclass8">xxxxxxxxxxxxxx</span></li>
<li class="someclass10"><img alt="blank" src="blank.png">
<span class="someclass3">--------</span><span class=
"someclass8">xxxxxxxxxxxxxx</span></li>
<li class="someclass10"><img alt="blank" src="blank.png">
<span class="someclass3">--------</span><span class=
"someclass8">xxxxxxxxxxxxxx</span></li>
<li class="someclass10"><img alt="blank" src="blank.png">
<span class="someclass3">--------</span><span class=
"someclass8">xxxxxxxxxxxxxx</span></li>
<li class="label"><img alt="blah blah" src="blank.png">
<span class="someclass3">xxxxxxxx</span> <span class=
"label_name">xxxxxxxx</span></li>
<li class="someclass9" id="id_-472_5"><label for=
"collapsible_2"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_2" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_3">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_3" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_6"><label for=
"collapsible_4"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_4" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_5">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_5" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_7"><label for=
"collapsible_6"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_6" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_7">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_7" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_8"><label for=
"collapsible_8"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_8" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_9">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_9" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_9"><label for=
"collapsible_10"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_10" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_11">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_11" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_10"><label for=
"collapsible_12"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_12" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_13">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_13" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_11"><label for=
"collapsible_14"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_14" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_15">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_15" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_12"><label for=
"collapsible_16"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_16" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li><label for=
"collapsible_17">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_17" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_15"><label for=
"collapsible_18"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_18" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_19">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_19" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_16"><label for=
"collapsible_20"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_20" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_21">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_21" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_17"><label for=
"collapsible_22"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_22" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_23">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_23" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_18"><label for=
"collapsible_24"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_24" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li><label for=
"collapsible_25">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_25" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_21"><label for=
"collapsible_26"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_26" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_27">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_27" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_22"><label for=
"collapsible_28"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_28" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_29">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_29" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_23"><label for=
"collapsible_30"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_30" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_31">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_31" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_24"><label for=
"collapsible_32"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_32" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li><label for=
"collapsible_33">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_33" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass9" id="id_-472_25"><label for=
"collapsible_34"><img alt="blah blah" src="blank.png"> <span class=
"someclass3">xxxxxxxx</span> <span class=
"someclass8">xxxxxxxxxxxxxxxxxx</span></label><input class=
"hide_me" id="collapsible_34" type="checkbox">
<ul>
<li>xxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx:
<ul>
<li>xxxxxx [xxxxx]</li>
</ul>
</li>
<li>xxxxxxxxxx:
<ul>
<li><a href="#top">xxxxx</a> [T]</li>
</ul>
</li>
<li><label for=
"collapsible_35">xxxxxxxxxxxxxxxxxxxx</label><input class="hide_me"
id="collapsible_35" type="checkbox">
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
</ul>
</li>
</ul>
</li>
<li class="someclass7"><img alt="blank" src="blank.png">
<span class="someclass3">--------</span><span class=
"end_someclass6">xxxxxxxxxxxxxxxx</span></li>
</ol>
</body>
</html>


Sorry for the crappy formatting. I couldn't decide whether it would be better or worse to give it to you like that (as output by tidy) or as one big blob (as output by Python's elementtree).

Oh, and here is an example image ->
blank.png
blank.png (135 Bytes) Viewed 4175 times
<-. They're all that size.

If you want to get something that looks kind of like the bigger flies, take the <ol> that's directly under <body> and repeat it a bunch of times, and for many of the repetitions, repeat some of the <li>s under it a bunch of times.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: Javascript/HTML help

Postby WanderingLinguist » Tue Mar 31, 2015 1:57 am UTC

Well, to start with, it might make a difference if you put sizes (width and height) on the images. If you don't, then once the images load and the size is known, I think it has to re-wrap the page with the new size.

Edit: Ah, I guess there aren't as many images as I thought. Still, not a bad idea to set a fixed size for them in your css.

Edit 2: How comfortable are you with JavaScript? Are you familiar with jQuery? I'm really still thinking your best approach here is to have your Python script write the output as arrays/objects in JavaScript rather than as HTML and have the JavaScript generate the HTML on demand.

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Tue Mar 31, 2015 3:27 am UTC

WanderingLinguist wrote:Well, to start with, it might make a difference if you put sizes (width and height) on the images. If you don't, then once the images load and the size is known, I think it has to re-wrap the page with the new size.
That's a good point. I knew that, but it slipped my mind here.

Edit 2: How comfortable are you with JavaScript? Are you familiar with jQuery?
Not much, and almost nothing. :-) I've played with JS some, but never jQuery. I know the latter has it's magic $ function, and that's about it. (I am just starting a personal project, maybe in JS, though, so they could reinforce each other. Though I am seriously contemplating using something like Typescript or Dart instead. Though I guess I could use that here too. :-))

I'm really still thinking your best approach here is to have your Python script write the output as arrays/objects in JavaScript rather than as HTML and have the JavaScript generate the HTML on demand.
That does sound reasonable. Do you think it would be reasonable to do something like the following:

  • The document has things like <span id="collapsible_2">Click this to expand</span>
  • The JS has a map insertions from "collapsible_2" to "<ul><li>...</li><li>...</li><li>...</li></ul>", i.e. the HTML that would go into it as a string
  • When collapsible_2 is clicked, the event handler calls this.insertAdjacentHTML('beforeend', insertions[this.id]) then deregisters itself and registers another that...
  • ...when the element is clicked, gets the final child and toggles the display property, or a .hide_me {display:none} class, or something like that

The above seems simple enough to both generate and do the JS for that jQuery doesn't seem so useful. Would you agree? (I guess I have to be careful about attaching the first event handler to any collapsible lists that are nested inside another...)

Tub
Posts: 472
Joined: Wed Jul 27, 2011 3:13 pm UTC

Re: Javascript/HTML help

Postby Tub » Tue Mar 31, 2015 11:20 am UTC

EvanED wrote:I've played with JS some, but never jQuery.

jQuery is a good tool if you need to support older browsers. If you're only developing for yourself or people with current browsers, html5's javascript API is just as powerful (and has better performance!).
Granted, jQuery has a very powerful animation API, but for most simple things, css transitions are sufficient and just as easy to use.

EvanED wrote:That does sound reasonable. Do you think it would be reasonable to do something like the following:
  • The document has things like <span id="collapsible_2">Click this to expand</span>
  • The JS has a map insertions from "collapsible_2" to "<ul><li>...</li><li>...</li><li>...</li></ul>", i.e. the HTML that would go into it as a string

Something like that should work.

Personally, I'd go a step further and store the raw data as json-objects, something like this:

Code: Select all

var data = [{
  "group": "collapsible_2",
  "name": "Element 01",
  "img": "image01.png",
  "imgalt": "bla bla",
  "attributes": ["li-content1", "li-content2", "li-content3"]
}, {
  // attributes of the second element
},
  // ...
]

(I'm sure you'll find a better representation. I'm having trouble discerning your anonymized example)

Then you write a javascript function to turn the data into html

Code: Select all

function generateHTMLForGroup(group) {
  var html = '';
  for (var i=0;i<data.length;i++) {
    if (data[i].group != group)
      continue;
    html += '<h1>' + data[i].name + '</h1>';
    html += '<img src="' + data[i].img + '" alt="' + data[i].imgalt + '" width="20" height="20" />';
    html += '<ul>';
    for (var j=0;j<data[i].attributes.length;j++)
      html += '<li>' + data[i].attributes[j] + '</li>';
    html += '</ul>';
  }
  return html;
}

..or something. You get the idea.

Keeping the data as pure JSON might save space (because you can skip all the redundant html markup). It will also make it easier to change the layout or add new features in the future.

EvanED wrote:[*]When collapsible_2 is clicked, the event handler calls this.insertAdjacentHTML('beforeend', insertions[this.id]) then deregisters itself and registers another that...
[*]...when the element is clicked, gets the final child and toggles the display property, or a .hide_me {display:none} class, or something like that
[/quote]
A single handler should suffice, if it does the following:
* if the element is empty, insert html and display
* otherwise, toggle the display property

Replacing event handlers is always a bit finnicky (or downright ugly if you're working with bound functions), so a single handler is usually the simpler choice.

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Javascript/HTML help

Postby EvanED » Tue Mar 31, 2015 2:45 pm UTC

Tub wrote:
EvanED wrote:I've played with JS some, but never jQuery.

jQuery is a good tool if you need to support older browsers. If you're only developing for yourself or people with current browsers, html5's javascript API is just as powerful (and has better performance!).
I don't want to go so far as tie it to Chrome specifically or FF specifically or something like that, but I have no problem requiring a modern browser. It's for a very limited audience.

Personally, I'd go a step further and store the raw data as json-objects, something like this:
I thought about that, but I already have the code for generating the HTML. And doing much of anything is already a little hard to justify; the load times are more of an annoyance than they are something that actually wastes a lot of time for me, so I don't think I can spend very long on it.

(It would also mean more JS for me, and I only begrudgingly use JS because it's either that or a language that compiles to it.)

A single handler should suffice, if it does the following:
* if the element is empty, insert html and display
* otherwise, toggle the display property

Replacing event handlers is always a bit finnicky (or downright ugly if you're working with bound functions), so a single handler is usually the simpler choice.
It's not "is the element empty", because it won't be; it's more "does it already have this other thing as the last child." But I can do that to, so I will keep that in mind.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: Javascript/HTML help

Postby WanderingLinguist » Tue Mar 31, 2015 10:49 pm UTC

Personally, I find jQuery a bit more concise than the new HTML5 JS APIs (which newer jQuery uses under the hood anyway, if supported) but it's really a matter of taste at this point if you only care about supported newer browsers.

I was going to suggest something kind of in-between your approach and Tub's: Put all of the data in JavaScript, but don't throw away the work you did in python on HTML generation:

Code: Select all

var data = [
    ["section title", "html for section"],
    ["section title", "html for section"],
    ["section title", "html for section"],
    ["section title", "html for section"],
    ["section title", "html for section"],
    ["section title", "html for section"]
]


Then you can run a simply loop in JavaScript to just spit out all of the sections in an empty state using exactly the same code you have now. (So, in other words, your page is totally empty save for page header/footer stuff, and you automatically generate all the section headers from JavaScript on launch).

Each section header has an event handler attached to it to fill in the contents of the section when it's clicked. Part of the event handling code removes that event handler itself from that section, because you don't need to fill it in again.

It should be really minimal JS or jQuery code to make it work, and you can use most of your existing Python code without many changes, I'd imagine.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 7 guests