Create an HTML table with fixed left and right column - javascript

In a pickle at the moment. I built a booking system for a client of mine with no chance of going responsive any time soon. That any time soon came last week. I thought I built my code in a way that it's responsive ready. What I want to achieve in mobile/table is to have the very left and very right columns to stay fixed and all the columns in between to scroll/swipe.
I have a dev link up you can view:
example
You can see from the example the very left column is info about the booking and the very right is the proceed button. Those are the columns that have to stay fixed. Is there a way to achieve this with CSS only? I have a lot of javascript code running as it is and I want to explore all options before resorting to it.
Any help would be greatly appreciated.
EDIT
I have so far added a set width to the first and last column using
td:first-child
td:last-child{
width:120px;
}
Which is a great start. but the columns in between the first and last get squishy in responsive which is not good usability/readability. I'd like to achieve some sort of horizontal overflow to allow the user to scroll/swipe on mobile/tablet

add to the first and last column a class with fixed width
or min-width (if it can be greater but not less then the specified value)

Related

In Qualtrics is there a coding solution to position multiple-choice response options on the edge of the screen?

In my Qualtrics survey, I have a two-answer horizontal multiple-choice question and I am trying to reduce the distance between the response options and the edge of the screen (see the below image). For reference, I am using a blank Qualtrics theme.
II have tried using the following JS code which successfully decreased the inner padding between the response options, however, I have been unable to decrease the margin/padding outside the response options. I have also tried identifying which margin/padding element is causing the outside space by inspecting the page but with little-to-no HTML knowledge have been unsuccessful at doing so.
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" label.SingleAnswer").css({"padding":"20px","display":"inline-block"});
});
Any help with this issue would be greatly appreciated.
Regards,
Henry
Horizontal choices are in a table. So:
Make the table 100% wide
Left align the first
Right align the last cell

React Virtualized: sticky content in a Collection

Is it possible to let the content of a cell in a react-virtualized Collection stick to a side when scrolling? I normally do this by using position sticky but this does not work for the content in a Collection.
I'm building a Grid TV Guide like the one in the image below. When scrolling the content of the most left visible cell of a row should stick to the left side of the screen.
I am able to get this working without using react-virtualized, but after scrolling through the guide for a while too much data is rendered and the page becomes very slow.
Can any of you help me? I would be very grateful.
Thx in advance!
One possible approach is to make an extra element that looks like the column that is to be sticky, and positioning it over it, e.g. https://codesandbox.io/s/l5z0wvpj77

How to synchronize the scrolling between two columns

I'd need an advice about how to create the code related to the sidebar contained into my homepage.
My homepage is composed of: header, left sidebar, main column (that is at the right of the sidebar) and footer.
What I need is a bit specific, indeed I tried to search for it, searched again and again through Google, through Stackoverflow and many other web sites but unfortunately I didn't get nothing that is right for me. I found several useful advices, several pratical examples and many starting points and I tried and tried again to mix each others the parts of these codes, but without getting what I really need about. All of this because I think my request is a bit specific and I'll try to explain it by hoping to be as clear as possible.
In my case I don't have just to fix a column, because I found meny examples about that as already told above. In my case I need to "synchronize" the left sidebar scrolling with the main column scrolling.
Something similar is present in Facebook, if you go into your profile page you can find something similar to what I need. By the way, I try to explain it here below by hoping to be as clear as possible:
at the time that I scroll the page DOWN I need that BOTH the left sidebar and the main column scroll down together, until the left sidebar will show the LAST visible element contained into it. At this point the scrolling should continue to scroll down ONLY the main column
vice versa, at the time that I scroll the page UP I need that BOTH the left sidebar and the main column scroll up together, until the left sidebar will show the FIRST visible element contained into it. At this point the scrolling should continue to scroll up ONLY the main column
Further note: the main column (NOT the left sidebar, but just the main column) is dynamic, in other words it shows the feeds dynamically, increasing its height instantly.
Hoping to having explained well the matter, I thank you all of you for your help!
Here is a jQuery plugin that seems to do what you want:
http://leafo.net/sticky-kit/

Large contents within container size

I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.

How do I stop End-less floating Div in JavaScript?

I am building a new theme for my blog and I need to do it before 1st Jan. Its almost complete but I am encountering a problem:
See this post for example
The last 2 Widgets i.e., FEATURED POSTS and RECENT POSTS in sidebar are set to float (positioned absolute, floating widgets become fixed when user scrolls to it) so that they are always visible when a user scrolls down. But how do i stop floating after reaching the footer? Any help would be really appreciated.
From what I can see you use some javascript that changes the box to position:fixed once your scrollposition is equal to the top of the box. What you need is some sort of check to see if the bottom of the box is less than a given length from the bottom of page. Say for instance is length from bottom is less or equal to 100px you can turn it back to position:absolute and set bottom to 100px. Then of course add a check to see set it back to fixed if the user scrolls up again. Just work a little with the script you got there and you'll have a solution, don't have the ability to test a script from the comp I'm at atm so can't help you with that.

Categories

Resources