2 Fixing page-width problem in HTML that was generated by Word
3 Survey of side-by-side frames, and my related experiments
3.2.1 DIV placement and page-layout
3.2.3 top / bottom / left / right
3.5 Combo: DIV, CSS, Javascript, JQuery
WWN Development Document
Web-Page Structure :
CSS, JQuery, DIV
Word’s Navigation pane shows the table-of-contents (View : Show : Navigation pane).
● Contents:
o Specifies where the web-page structure is implemented.
o Describes how to fix the page-width problem in Word’s HTML.
■ With Word HTML, the paragraph width is the browser-width. It is usually too wide for comfortable reading.
o Shows the techniques used for creating side-by-side frames in a web-page.
■ Includes use of CSS, JQuery, and DIV
This document was created by the WWN author for his own use in developing WWN. It is included in the WWN repo, as other developers may find it useful.
1 Web-page structure
● The web-page structure is implemented in these files, and described in the comments:
o word_web_nav.css
o word_web_nav.js
● The layout is specified in this design-document: web-page--structure--design.vsd
2 Fixing page-width problem in HTML that was generated by Word
● In generated HTML, paragraphs are the width of the browser window, which is not viable for wide windows, eg, full screen
● The solution is to add a CSS max-width tag to the Word HTML
o The tag can be added by editing the generated html
■ Seems like the best solution
■ 960 pixels will fit on a 1024 monitor, with the window frames
■ Need jquery library
● Add line: div { https://api.jquery.com/width/ }
● Or, add line: <link...> as shown below
< I took screenshots of this, but they got corrupted somehow, so I deleted them.>
o Or, the tag can be added by Word, by configuring Word it to use an external CSS style sheet
■ This way is more work than it's worth. It just adds a <link...> tag to the html.
■ Create file with CSS style-tag, e.g., mystyle.css
■ Save As: (select HTML format, e.g., "Web, filetered")
■ Developer tab : Document Template : Linked CSS
■ Add: (specify your sytle-sheet file)
■ Linked: adds html tag with link to file, see pic below
■ Imported: doesn't seem to work for my css style-sheet file
● Related info, might explain why it doesn't work
o html - apply css to ms word - Stack Overflow
■ https://stackoverflow.com/questions/51474548/apply-css-to-ms-word
o "Here's a quick reference list of CSS2 that you can't use:"
■ CSS absolute position don't work in MS Word - Super User
● https://superuser.com/questions/146453/css-absolute-position-dont-work-in-ms-word
o Save and close the Word HTML file
o Open HTML file in an editor. The <link...> tag should point to the CSS style-sheet file:
< I took a screenshot of this, but it got corrupted somehow, so I deleted it.>
2.1 Reference info
● Adding CSS tags and style-sheets to Word HTML
o Microsoft Word: apply style to HTML tags with a given class - Super User
■ https://superuser.com/questions/1501763/microsoft-word-apply-style-to-html-tags-with-a-given-class
o How to apply external CSS stylesheet to document in Microsoft Word? - Super User
o css - Styling Microsoft-Word-Generated HTML - Stack Overflow
■ https://stackoverflow.com/questions/4845082/styling-microsoft-word-generated-html
o "Here's a quick reference list of CSS2 that you can't use:"
■ CSS absolute position don't work in MS Word - Super User
● https://superuser.com/questions/146453/css-absolute-position-dont-work-in-ms-word
● max-width tag
o Tag info
■ html - How to limit max width and height to screen size in CSS? - Stack Overflow
● https://stackoverflow.com/questions/36253760/how-to-limit-max-width-and-height-to-screen-size-in-css
■ CSS Dimension - Understanding Max/Min Width and Height
● https://www.tutorialrepublic.com/css-tutorial/css-dimension.php
■ Rein In Fluid Width By Limiting HTML Width | CSS-Tricks
● https://css-tricks.com/limit-html-width/
■ CSS Layout - width and max-width
● https://www.w3schools.com/css/css_max-width.asp
● Other related tags
o Margin tag might be useful, but I didn't have time to look into it
■ CSS Margin
● https://www.w3schools.com/css/css_margin.asp
o Width tag didn't seem useful with max-width, for my use (but I'm not entirely sure of that)
■ How to limit width of html site? - Stack Overflow
● https://stackoverflow.com/questions/5133847/how-to-limit-width-of-html-site
● Adding CSS: general info (adding tags, or link to external file)
o How-to info
■ How to Create a CSS External Style Sheet | Webucator
● https://www.webucator.com/how-to/how-create-css-external-style-sheet.cfm
■ How to add CSS
● https://www.w3schools.com/css/css_howto.asp
■ html import css file Code Example
● https://www.codegrepper.com/code-examples/html/html+import+css+file
3 Survey of side-by-side frames, and my related experiments
3.1 Articles and forum posts
● javascript - Best way to do a split pane in HTML - Stack Overflow
o https://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html
● How to Create a Resizable Left Navigation | Solodev
o https://www.solodev.com/blog/web-design/bootstrap/how-to-create-a-resizable-left-navigation.stml
●
3.2 CSS Coding techniques
3.2.1 DIV placement and page-layout
● html - Stacking Divs from Bottom to Top - Stack Overflow
o https://stackoverflow.com/questions/6401869/stacking-divs-from-bottom-to-top
● How to make side by side divs in HTML
o https://www.educative.io/edpresso/how-to-make-side-by-side-divs-in-html
● The Sidebar: Every Layout
o https://every-layout.dev/layouts/sidebar/
3.2.2 DIV sizing and resizing
● I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.
o jquery - Resizing DIV Panel - Stack Overflow
■ https://stackoverflow.com/questions/12403095/resizing-div-panel
● Resizable | jQuery UI
o https://jqueryui.com/resizable/
● jquery - How can I resize a DIV by dragging just ONE side of it? - Stack Overflow
o https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it
o Although my requirement was not to have any absolute elements and use percentages instead of pixels,
o The browser I support at my work is FF38 so enabling this using CSS grid was not possible.
● javascript - Resizing two divs side by side by a handle in the middle with js/jquery - Stack Overflow
3.2.3 top / bottom / left / right
● top / bottom / left / right | CSS-Tricks
o https://css-tricks.com/almanac/properties/t/top-right-bottom-left/
● Top: positive and negative values
o https://codepen.io/missmatsuko/pen/LYPKzRG
3.2.4 Scrolling
● html - Css: overflow scroll doesn't work - Stack Overflow
o https://stackoverflow.com/questions/20887300/css-overflow-scroll-doesnt-work
● Overflow Scroll css is not working in the div - Stack Overflow
o https://stackoverflow.com/questions/17295219/overflow-scroll-css-is-not-working-in-the-div
● html - div doesn't scroll horizontally on overflow - Stack Overflow
o https://stackoverflow.com/questions/47083873/div-doesnt-scroll-horizontally-on-overflow
● css - How can I add a vertical scrollbar to my div automatically? - Stack Overflow
● overflow | CSS-Tricks
o https://css-tricks.com/almanac/properties/o/overflow/
● CSS Overflow
o https://www.w3schools.com/css/css_overflow.asp
o CSS overflow property
■ https://www.w3schools.com/cssref/pr_pos_overflow.asp
● Overflow for TOC, see:
o overflow - CSS: Cascading Style Sheets | MDN
■ https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
o https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
o https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
3.2.5 Splitter-bar
● html - How do I set custom resize handles with jQuery UI? - Stack Overflow
o https://stackoverflow.com/questions/5680378/how-do-i-set-custom-resize-handles-with-jquery-ui
● javascript - Resizable handles with jQueryUI - Stack Overflow
o https://stackoverflow.com/questions/15923891/resizable-handles-with-jqueryui
3.2.6 Flexbox
● CSS Flexible Box Layout - Wikipedia
o https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout
● Can I use... Support tables for HTML5, CSS3, etc
o https://caniuse.com/?search=flexbox
3.3 iFrames
● Summary
o iFrames might be used primarily for cross-domain contents, i.e, fill with data from href to another domain
o iFrames are only used for cross domain use, such as youtube videos or facebook walls on your website. Do not use iFrames for local files, there are much better ways to display site content
■ https://stackoverflow.com/questions/18260619/resizable-iframes-jquery
● My experiments
o TOC-experiment--iframe-01
■ 2 iframes, side-by-side
■
■ Summary
● Need to make left frame resizable
● jquery - How can I cleanly resize an iFrame with dragging functionality? - Stack Overflow
o "the classical method is to put the IFrame inside of a div and make that div re-sizable"
● iFrame Resizer | Iframe-resizer
o http://davidjbradshaw.github.io/iframe-resizer/
o "This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content."
● Using inline frames (iframe elements) to embed documents into HTML documents
o https://jkorpela.fi/html/iframe.html
● html - two iframes side by side and responsive? - Stack Overflow
o https://stackoverflow.com/questions/34553028/two-iframes-side-by-side-and-responsive
● Two iframes(Different Sizes) side by side responsive on Product Page - Shopify Community
● Responsive iframes — The Right Way (CSS Only)! | Ben Marshall
o https://www.benmarshall.me/responsive-iframes/
● Responsive iframes — The Right Way (CSS Only)! | Ben Marshall
o https://www.benmarshall.me/responsive-iframes/
● How To Create Responsive Iframes
o https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
● html - How to set iframe size dynamically - Stack Overflow
o https://stackoverflow.com/questions/7317781/how-to-set-iframe-size-dynamically
● html - How to force link from iframe to be opened in the parent window - Stack Overflow
● HTML Iframes
o https://www.w3schools.com/html/html_iframe.asp
● html - open link in iframe - Stack Overflow
o https://stackoverflow.com/questions/740816/open-link-in-iframe
● html - open link in iframe - Stack Overflow
o https://stackoverflow.com/questions/740816/open-link-in-iframe
3.4 DIV resize
● Summary: not a usable solution
o handle on splitter is too hard to see, at bottom of splitter frame
o Simple, and probably ubiqitous
● DIV resize
o resize - CSS: Cascading Style Sheets | MDN
■ https://developer.mozilla.org/en-US/docs/Web/CSS/resize
● jquery - Drag Re-sizable 2 column layout - Stack Overflow
o https://stackoverflow.com/questions/11451638/drag-re-sizable-2-column-layout
● html - Alternative to using frames to provide a Navigation area that can be resized by dragging - Stack Overflow
● W3Schools
o CSS resize property
■ https://www.w3schools.com/cssref/css3_pr_resize.asp
o Tryit Editor v3.6
■ https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize_width
3.5 Combo: DIV, CSS, Javascript, JQuery
3.5.1 The POC code that I adapted
● Edit fiddle - JSFiddle - Code Playground
o http://jsfiddle.net/wizzud/wYndk/
o NOTE: This is the code that I ended-up using
3.5.2 Good, maybe useful
● layout with bootstrap resizable
o https://codepen.io/oildexUX/pen/NYLqdj
o NOTE: two splitter-bars
● javascript - Making a dragbar to resize divs inside CSS grids - Stack Overflow
o https://stackoverflow.com/questions/46931103/making-a-dragbar-to-resize-divs-inside-css-grids
o First solution posted
■ NOTE: uses Flex
● CSS Grid with dragbar resizing
o https://codepen.io/lukerazor/pen/GVBMZK
o NOTE: uses CSS Grid; has header and footer
● Split.js
o NOTE: might not be adequately maintained or widely used?
● Resizable Bootstrap Columns
o https://codepen.io/timothyallyndrake/pen/EPweyx
o Note: has more frames than I needed
3.5.3 Good, but not useful
● Angular Resizable
o https://codepen.io/Reklino/pen/raRaXq
o NOTE: vertical and horizontal resizing; more complex than what I needed,
● HTML DOM - Create resizable split views
o https://htmldom.dev/create-resizable-split-views/
o html-dom/index.html at master · phuoc-ng/html-dom · GitHub
■ https://github.com/phuoc-ng/html-dom/blob/master/demo/create-resizable-split-views/index.html
o NOTE: vertical and horizontal resizing; more complex than what I need
■ Code is explained well
■ Handles flicker problem
● Responsive Splitter jquery ui
o NOTE: I tried to use this one, and ran into problems. I think maybe the splitter-bar would scroll off the screen.
o https://codepen.io/xmaster/pen/swJBe
o Resources
■ JQuery UI
EXTERNAL CSS
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
EXTERNAL JAVASCRIPT
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
o NOTE: works and looks great, simple; needs visible handle for splitter?
■ My fork creates vertical scroll bars
● jquery - How can I resize a DIV by dragging just ONE side of it? - Stack Overflow
o Summary
■ Not usable as is: dragbar scrolls vertically--would need to fix it
o https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it
o Edit fiddle - JSFiddle - Code Playground
■ http://jsfiddle.net/gaby/Bek9L/
o NOTE:
■ Header, footer, simple; color and font amateurish; needs handle for splitter
■ This solution looked good initially
● Although my requirement was not to have any absolute elements and use percentages instead of pixels,
■ Resources:
● NOT: JQuery UI
● jquery - Resizing DIV Panel - Stack Overflow
o https://stackoverflow.com/questions/12403095/resizing-div-panel
o Edit fiddle - JSFiddle - Code Playground
■ http://jsfiddle.net/QkZL8/15/
■ NOTE: this solution does not use JQuery UI
● There may be useful parts; code commented and explained
o NOTE:
■ Also has code for solution that uses JQuery UI
■ No dragbar, so not useful
● React Resizable Panels
o https://codepen.io/lopis/pen/XYgRKz
o NOTE: good handle, simple header row (in JS)
■ Creates DIVs in JS, so HTML is in JS. Abnormal???
● jquery-resizable - Resizable Splitter Panels
o https://codepen.io/rstrahl/pen/eJZQej
EXTERNAL JAVASCRIPT
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js
o NOTE: uses png for handle (CSS .spliter)
■ Header and footer rows
■ Uses Flexbox, but says not essential
● Flexbox compatibility: https://caniuse.com/?search=flexbox
■ Uses author's own js library: do not use his js
● Also, his drag bar is the length of the page's text, so icon to drag it can be off screen
● CSS Filter Glass
o https://codepen.io/kindofone/pen/JhBjc
o Resources:
EXTERNAL CSS
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
EXTERNAL JAVASCRIPT
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
o NOTE: great handle, simple, see CSS .handle
■ It's primarily an image processing app, so probably not useful
3.5.4 Bad
● Flex
o Resizable flexbox
■ https://codepen.io/ianmcnally/pen/CkHbz
■ NOTE: jerky, not useful
● javascript - How to resize two divs side by side like windows explorer - Stack Overflow
o NOTE: doesn't work
3.6 jQuery
3.6.1 jQuery itself
● jQuery - Wikipedia
o https://en.wikipedia.org/wiki/JQuery#Popularity
3.6.2 JQuery UI
● What is the different between the JQuery UI or JQuery?
o jQuery UI is an extension/plugin for jQuery adding functionality to do certain GUI tasks like resizing, drag and drop, and gui elements like sliders etc. These things are not part of jQuery itself and jQuery UI needs to be added if you want to use any of its features.
● jQuery UI - Wikipedia
o https://en.wikipedia.org/wiki/JQuery_UI
● Just a heads up, that's jQuery UI, not jQuery. (jQuery UI is pretty heavy to add if it's only for this feature).
o javascript - How can I let the client actively resize a column in Bootstrap? - Stack Overflow
● jQuery UI
● Resizable | jQuery UI
o https://jqueryui.com/resizable/
o NOTE: splitter handle is small-part at bottom, like with DIV, hard to see
● jquery - How do I make a div width draggable? - Stack Overflow
o https://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable
o NOTE: has some JQuery UI demos
3.6.3 Other
● javascript - Resize a div on border drag and drop without adding extra markup - Stack Overflow
o Edit fiddle - JSFiddle - Code Playground
■ http://jsfiddle.net/T4St6/82/
● jquery - How do I make a div width draggable? - Stack Overflow
o https://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable
o Draggable (and Resizable) <div> using jQuery - JSFiddle - Code Playground
■ http://jsfiddle.net/YZX6B/12/
o Draggable (and Resizable) <div> using jQuery - JSFiddle - Code Playground
■ http://jsfiddle.net/YZX6B/11/
o NOTE: demos have rudimentary features, probably not useful
● UI Layout Plug-in - Home
o http://layout.jquery-dev.net/
o UI Layout Plug-in - Demos
■ http://layout.jquery-dev.net/demos.html
o Demo: Layout with a Frame
■ http://layout.jquery-dev.net/demos/frames.html
o NOTE: free library, not updated since 2014
■ Demo looks good
3.6.4 Not useful
● jQWidgets UI for Angular, Vue, React, Web Components, Javascript
o jQuery Splitter
o jQuery Splitter - CodeProject
■ https://www.codeproject.com/Articles/311334/jQuery-Splitter
o NOTE: commercial library with good splitter (but hard to grab with mouse); too expensive
● Demo of core features in jQuery Splitter widget | Kendo UI for jQuery
o https://demos.telerik.com/kendo-ui/splitter/index
o NOTE: commercial library
● jQuery Splitter Plugin
o http://methvin.com/splitter/
o NOTE: old, demos don't work
3.7 Bootstrap
● Bootstrap (front-end framework) - Wikipedia
o https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
● layout with bootstrap resizable
o https://codepen.io/barbalex/pen/ogZWNV
o NOTE: header row with buttons to make frames visible/not-visible
■ A great way to hide TOC
● Resizable Bootstrap Columns
o https://codepen.io/timothyallyndrake/pen/EPweyx
o Resources
EXTERNAL CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
EXTERNAL JAVASCRIPT
https://code.jquery.com/jquery-1.12.0.min.js
https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
o NOTE: good, might be useful; 4 columns, would need modification
