In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).
Related
I'm working on go js. I have two div and I need to connect the contents of them with links. Therefore I just saw a Scrolling-Table concept in Gojs by which we can connect each row of left table with the rows of right table.
Now I need to pass an html div into rows for both left and right tables.
This html div contains a switch button together with a asp dropdown.
It is possible to pass such html content in each row of Scrolling Table?
Because GoJS wants to be able to render to canvas and to SVG and to other targets, one cannot embed any HTML in a diagram. You'll need to implement it yourself using GoJS GraphObjects. Read http://gojs.net/intro about the basic Shapes and Panels. For examples of how the various kinds of predefined buttons are implemented, see http://gojs.net/latest/extensions/Buttons.js.
I am using foundation 6 in a new project and stumbled upon an issue.
I have a grid with and I want to hide a column (which I want to show again later), the problem is that if I hide the column, it does not reorder all the other columns, I tried by just hiding it with jQuery and by hiding it with Foundation's hide class (which, I guess, is basically the same thing).
The only way I was able to achieve the wanted functionality is by actually removing the column completely, but I need to show it again later so this is not an option.
Please take a look at the fiddle to maybe get a better idea of what I need.
(You will have to Run the script again after click one of the buttons)
JsFiddle link
The primary issue is you are not using the classes properly, for example the size of column should be applied to the column not the row elements.
<div class="column">
Should be:
<div class="small-4 column">
https://jsfiddle.net/875ascsk/4/
I am using DataTables for jQuery (https://datatables.net/) to create a table. I am using JavaScript to populate the table. When it is initially created, the columnn with has some adjustment (some columns are wider than others), but it is not perfect, for example there is a two line row as in the first picture below. After resizing and maximizing again, the table is readjusted to the optimal state, with plenty of room for the row with a long name. How to I get this adjustment directly after I load the table?
Try columns.adjust() here you can see how.
Okay so I am making a website to display the last eight entres from a database and display them in a grid format, but the grids aren't displaying correctly they are displaying like so:
1 :
But I am wanting them to display similar to this:
I ment to draw an extra column on the drawing sorry. And no mater what stay in the same column and row as it should be but also be underneath the one above it. The code is on my jsfiddle here: http://jsfiddle.net/PGdMd/
Also The css needs to be responsive because the content text for each div will change depending on the data entered in the mySQL database.
<h1>Sorry it made me put this here</h1>
Reading from related questions, it would seem you want jQuery's masonary. Either that, or Isotope.
Have a look at Masonry. This is a jQuery plugin that will do what you want and a lot more.
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
Have you considered some of the css frameworks that can be used to easily implement layouts? Blueprint, 960 Grid, Twitter Bootstrap, foundation, etc. There are a lot of 3 column implementations available that would not only make this easy, but would simplify your project in general.
I have a grid with 3 columns: title, content and date created. My largest column with most content is the content column. However this column can hold much more text than one row of the grid. Ext JS automatically trims the text from a certain point on.
Can I stop it from automatically trimming the values in the rows and just show the whole content? I would post my code, but it's an entire MVC pattern, which spreads over several files and it would take a lot of time to gather it all.
You need to use Preview or RowExpander plugin
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.RowExpander
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.PreviewPlugin
Here is the sample page you might want to look at:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/paging.html
Basically idea is to have custom template which will render whole your data instead of having rows of the same height.