I have some wide tables in HTML that require scrolling left/right in the browser to view. I'd like to vertically keep the top row in place while allowing it to scroll left/right.
I have been scouring the web for something simple but I haven't found anything that allows for both of these conditions.
EDIT:
I restate my question in a possibly more clear way-
I am looking to alter existing html files with existing html tables so that the first row is fixed vertically but scrolls horizontally with the body. I don't have control over how these html files are initially made so I must resort to adding any styling that I can through python in order to get my desired output. In my mind there would only be one scroll bar. Can this be done?
Anyone have an idea?
To give more information:
I have tried many options including trying to add a css class for the first row and using overflow-y as well as using multiple divs. I would prefer to solve this in css formatting as modifying the css file is probably easier done with python than adding a bunch of divs to the already formulated html table (all of the editing is being done through python).
So far every approach at best looks a bit off and undesirably leaves a scroll bar directly under the first row.
I would like to keep the first row looking the same but just fixed vertically and allow it scroll with the rest of the rows horizontally.
I was able to solve my problem and post my solution here in case anyone else out there is working with webpages output from excel (or just any predetermined html table in general) and wants to make the first row (or any given row) freeze vertically but scroll horizontally. The solution relies on javascript/jquery/CSS and implementing the two div approach (I don't need a footer) discussed in the solution presented by Saechel. I tried just about every approach and this was the only satisfactory one:
CSS file include the following:
#header { position: fixed;}
javascript file include the following:
$(document).ready(function(){
function scroll_Table_Header()
{
var pos = $(this).scrollLeft();
$("#header").animate({left: "-" + pos},1);
//console.log("position: " + pos);
//alert("Hi");
}
var firstDiv = $("<div></div>");
firstDiv.attr("id","header");
var secondDiv = $("<div></div>");
secondDiv.attr("id","content");
var colformatting = $("table colgroup").clone();
var titlebar = $("table tr:first-child").clone();
$("table").attr("id", "origTable");
var newTable = $("<table id='newTable'></table>").attr("style", $("table").attr("style"));
newTable.attr("id", "newTable");
newTable.append(colformatting);
newTable.append(titlebar);
$("#origTable").before(firstDiv);
firstDiv.append(newTable);
secondDiv.append($("#origTable"));
$(firstDiv).after(secondDiv);
$(window).scroll(function(e)
{
scroll_Table_Header();
});
});
Enjoy
Related
I want to create a responsive, mobile optimized reading experience similar to an epub/ebook reader, like the Kindle app, or iBooks, using dynamic html as the source.
Imagine a long article or blog post that requires a lot of vertical scrolling to read, especially on a small mobile device. What I would like to do is break the long page into multiple full-screen sections, allowing the user to use left/right navigation arrows and/or the swipe gesture to "page" through the article.
There are many JS libraries available that can create a "slide show" or "carrousel" of pre-defined slides (using divs or other container elements). But I want the text and html content to dynamically re-flow to fit any device viewport and still be readable... just like an epub/ebook user interface, like the Kindle app or iBooks. So, for the same article, there would be many more "pages" on a phone than there would be on a tablet or desktop viewport, and those "pages" would need to be dynamically created/adjusted if/when the viewport size changes (like switching from portrait to landscape on a mobile device).
Here is an example of a javascript .epub reader: epub.js
... notice the responsive behavior. When you resize your viewport, all the text re-flows to fit the available space, increasing or decreasing the total number of "pages". The problem is that epub.js requires an .epub file as its source.
What I want is the same user interface and functionality for an html page.
I have searched and searched for some kind of library that can do this out of the box, but haven't been able to find anything.
I realize that I could use a conversion script to convert my html page into an .epub file, and then use epub.js to render that file within the browser, but that seems very round-about and clunky. It would be so much better to mimic or simulate the .epub reader user experience with html as the direct source, rendering/mimicking a client side responsive ebook user experience.
Does anyone know if something like this already exists, or how I could go about building it myself?
The crucial functionality is the dynamic/responsive text-reflow. When the viewport dimensions are reduced, the text/content needs to reflow to the next "page" to avoid any need for vertical scrolling. I don't know how to do this efficiently. If I were to code it myself, I might use something like the jQuery Columnize plugin, setting all columns to width: 100vw; height: 100vh, so that each column is like a "page", and then figuring out how to create a swipe UI between those "pages".
Any help is much appreciated!
This becomes very difficult if the html page is complex, eg with precisely positioned elements or images. However if (as in the epub.js example) the content consists only of headings and paragraphs, it is achievable.
The basic idea is to progressively add content until just before the page overflows. By keeping track of where we start and stop adding content, clicking to the next page is a case of changing the page start to the previous page end (or vice versa if you're going back).
Process for reshaping content into pages
Let's assume you have all your content in one long string. Begin by splitting all the content into an array of words and tags. It's not as easy as splitting by whitespace as whitespace between < and > should be ignored (you want to keep classnames etc within each tag). Also tags should be separated as well, even if there is no whitespace between the tag and a word.
Next you need a function that checks if an element's contents overflow the element. This question has a copy-paste solution.
You need two variables, pageStart and pageEnd, to keep track of what indexes in the array are the beginning and end of the current page.
Beginning at the index in pageStart you add elements from the array as content to the page, checking after each add whether or not the contents overflow. When they do overflow you take the index you're up to, minus 1, as the index for pageEnd.
Keeping tags across page breaks
Now if all's ticketyboo then this should fill the page pretty well. When you want to go to the next page set your new pageStart as pageEnd + 1 and repeat the process. However there are some issues that you may want to fix.
Firstly, what happens if the page overflows in the middle of a paragraph? Strictly speaking the closing tag, </p>, is not required in HTML, so we don't need to worry about it. But what about the start of the next page? It will be missing an opening tag and that is a major problem. So we have make sure we check if the page's content begins with a tag, and if it doesn't then we get the closest opening tag prior to the current pageStart (just step back along the array from pageStart) and add it in before the rest of the content.
Secondly, as shown in the example, if a paragraph continues onto the next page, the last line of the current page is still justified. You need to check if pageEnd is in the middle of a paragraph and if so add syle="text-align-last:justify;" to the opening tag of that paragraph.
Example implementation
A pen showing all this in action is at https://codepen.io/anon/pen/ZMJMZZ
The HTML page contains all content in one long element. The content is taken directly from the container #page and reformed into pages, depending on the size of #page. I have't implemented justifying the last line if a page break occurs within a paragraph. Resize the #page element in the css and see how the content resizes itself - note that since the page size is fixed you'll have to use click forward and back to trigger a recalculation. Once you bind the page size to the window size, recalculating pages on the fly simply involves adding a resize event listener to the window that calls fillPage.
No doubt there are numerous bugs, indeed it will sometimes display things incorrectly (eg skipping or repeating words at the beginning or end of a page), but this should give you an idea of where to start.
Take a look at this repository on GitHub. Otherwise, you can create a one-page website with many sections, each one as high as the viewport, by using only CSS (demo):
.section { height: 100vh; }
or by using JavaScript, adding an anchor to each section to navigate between them, and applying a responsive unit (my demo) for the text of each section, to adapt it on resize... Something like this:
var curr_el_index = 0;
var els_length = $(".container").length;
$(".next_section").on("click", function(e) {
curr_el_index++;
if (curr_el_index >= els_length) {
curr_el_index = 0;
}
$("html, body").animate({
scrollTop: $(".container").eq(curr_el_index).offset().top
}, 300);
return false;
});
$(".previous_section").on("click", function(e) {
curr_el_index--;
if (curr_el_index < 0) {
curr_el_index = els_length - 1;
}
$("html, body").animate({
scrollTop: $(".container").eq(curr_el_index).offset().top
}, 300);
return false;
});
* {
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
background-color: #1a1a1a;
}
section {
height: 100vh;
background-color: #eee;
border: 2px solid red;
font-size: 6vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">Section 1 Previous Next</section>
<section class="container">Section 2 Previous Next</section>
<section class="container">Section 3 Previous Next</section>
<section class="container">Section 4 Previous Next</section>
<section class="container">Section 5 Previous Next</section>
EDIT #1
An idea of algorithm, that come from a my codepen, that uses the same jQuery plugin:
Create your reader layout, copying the whole text in it
Use this jQuery plugin to check the text inside the viewport (demo)
Count the number of characters/WORDS with "Onscreen" label in the
viewport (a references)
Split the whole text in a list containing as many characters/WORDS as
there are in the "Onscreen" label
Create a section for each element of the obtained list, filling each
section with the relative text; the number of elements of the list
gives you the number of pages (sections) of the whole text. You may
navigate between sections like above
On resize event, redo [2-5] algorithm steps
Cheers
The idea is to have a div that will contain the whole text (let's call this div #epub_container). Then, you will have a div with the same size of the page viewport (let's call it #displayer) and it will contain #epub_container.
#displayer will have css overflow:hidden. So when the site loads, it will only show the first page, because the rest of the #epub_container will be hidden.
Then you need a page navigator to increment/decrement the page number. When the page number changes, we will move the top offset of the #epub_container based on that.
This is the jQuery function:
function move_to_page() {
var height = window.innerHeight;
var width = window.innerWidth;
var $displayer = $('#displayer');
var offset = $displayer.offset();
$displayer.height(height - offset.top - 5);
var $epub = $('#epub_container');
var offset_top = offset.top - $displayer.height() * m_page;
$epub.offset({top: offset_top, left: offset.left});
}
JSFiddle
EDIT: call move_to_page() after the text reflow in order to recompute the pages.
I created a plugin that handles this perfectly. It has features like dark mode, font changing, line height adjustment, select chapter in a side nav menu, save and restore scrolling/reading position. You can find it for free on git hub at https://github.com/E-TechDev/Html-Book-Reader
Screenshots
Light Mode Dark Mode Side Nav Menu Change Font Adjust Paragraph
You can try CSS scroll snap points on text with columns
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points
Somehow make the columns as wide as the viewport, and allow horizontal snapped scrolling.
Update
I mean to try to do the text flowing entirely using css. Pen:
https://codepen.io/ericc3141/pen/RYZEpr
body {
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
}
#columns-test {
height: 80vh;
columns: 90vw auto;
}
All you need is to insert a page break at the right places when you load the page. You can take the cue from here:
Dynamic Page-Break - Jquery
Here you can set the page height to your viewport height. You can handle the rest with javascript and css.
I have a Bootstrap 3.3.7 page with a navbar component along the top of the page. It all works perfectly when populated with static data, but when I'm trying to populate the menu with new drop down lists based on some ajax loads from the server the menu line wraps even though there is loads of horizontal space.
I assume it is setting some fixed width based on the initial menu, and then failing to cope with the dynamic widening. If I manually narrow the page the point the nav collapses, and then widen it again then the reflow catches up and it all ends up back on one line.
Is there any way to force the Bootstrap nav to reflow programatically?
The specific element I need to make wider is ".navbar-right", and if I hand code CSS to make it wider after the dynamic addition then this works, but I'd rather not hard-code arbitrary constants into the code given that the menus are not constant and the font may change.
Answering my own question (although would appreciate any better alternatives if anyone knows any) - this seems to work OK.
// Perform the dynamic update
var htmlOutput = $.render.mytemplate(params);
$("#mynavtemplate").replaceWith(htmlOutput);
// Measure the total width of the children of .navbar-right
var newWidth = 0;
$(".navbar-right").children().each(function(){ newWidth += $(this).width(); });
// Force .navbar-right to be at least as wide as the sum of children
$(".navbar-right").css("min-width", newWidth);
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
It is difficult to extract code and post it here, so I'm posting a sample site which demonstrates my problem. I've been thinking about this, and there are several ways to solve this problem (HTML modification, CSS + HTML modification, CSS + JS modification), but since I'm a n00b at web coding, I want to know what is the best plan of attack here.
Anyways, the problem:
Have a look here: http://321cart.com/sellya/
Open the Categories Navigation menu, and you get this:
All those links under the categories are ul containing lots of li. I want to break the list and spread the list of multiple columns, so that there are only a maximum of 3 li in one column. Here is an example of what I want to do:
This is the overall thing that I want:
This will cause the menu width to increase (virtually double, in theory), but that is okay for me. I can deal with this on my own.
There are several methods to do this, but I would prefer if there's some way to do this using only CSS modification. If not, then maybe through CSS and JavaScript modification ? I want to reserve changes to actual HTML code as a last resort, because that is the original PHP HTML generation OpenCart code which I don't want to modify.
Please note that I did try to resolve this problem on my own, but it proved to be a little complex .. So don't think I didn't try .. Secondly, posting this in a JSFiddle would have been difficult to, and it would not have truly represented the actual problem fully, which is why I'm posting a link to a sample site.
Please have a look guys. Site: http://321cart.com/sellya/
So I need some answers for this problem that has me baffled.
EDIT:
Forgot to point this out. In the example I provided, all uls had more than 3 lis each, but in my actual case, only a few uls have more than 3 lis each, and I only want to extend those ones to 2 columns, not the ones will 1, 2 or 3 lis each.
CSS3 introduced columns, which should do what you want. In theory, simply apply a height and column-width to your ul. In practice, you might need to use vendor prefixes on the column-width, giving you -webkit-column-width, -moz-column-width, etc. Try it out.
You can set the outer divs width (the ones with "span2" class in the provided link) to something like 350px and set LIs width to 100px and float:left directive. This is the simplest approach you can use.
take a look at this:
var $columns = $("#columns");
var $longlist = $("#longlist");
var columnscount = 3;
//calculate sigle column size
var columnsize = Math.ceil($("p", $longlist).size() / columnscount);
//iterate number of columns, take [columnsize] elements, move them to div#columns and wrap with div.column
for (var i = 0; i < columnscount; i++) {
$("p:lt(" + columnsize + ")", $longlist).appendTo($columns).wrapAll("<div class='column'/>")
}
you would need to add some condition to avoid spliting list shorter that 3 elements.
and this is how it works:
http://jsfiddle.net/hGWjd/
Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?
went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example
You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.
That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/
I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for
If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.
You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/
As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.
I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...
You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!