I don't know anything about coding and have been tasked to work on a Squarespace site and I've been teaching myself using tutorials. I need to make a unique table. Similar to the table found here: https://www.idtech.com/register/#/reg-flow/avail-charts-filters?lid=78
I'd like to have a feature where when you click a table cell then a drop down box will appear with information written within. I also want the cell to collapse if you click on a different cell.
Is there any way you can make a sample for me? I tried manipulating "input=checkbox" but that failed and isn't compatible with the square space site. I tried accordion but that doesn't work for just particular cells.
There is no way you can achieve that with only html,, you must use css or js.
Related
I currently am working on a way to format the colums of my company's Sharepint in a useful way. In my opinion the display of the Picture size is also very important.
I tried to do that via adding or removing the column, but there isn't an option to display picture size. So I tried finding a JSON Code on the Microsoft GitHub page but didn't find a useful Code there either. Unfortunately I am not a Coder, so I am not able to come up with a Code by myself. When I try and search for it online, I only find ways to resize the picture in order for it to be displayed better.
So my question is, if there is any way to display the picture size in a column on the Sharepoint.
Thank you so much!
Shiobhan
There is a File Size column in the SharePoint library.
Updated:
I really like the way tables have been designed in the popup boxes that are used in Google Drive. I need a similar clean and refreshing design for my tables which have significant amount of content. Below is what I want:
I can do the HTML, I need the CSS code and guidelines for getting the row separators as shown in the fig above. Observe that the line under Counts is a darker shade of gray than those used to separate the rows. How can I achieve this effect and how do I add row separators? Please help!
Here's a fiddle where I've attempted to recreate that look by sight. Mostly it's just separating the styles for th from those for td. Thanks for the question, this was good practice.
http://jsfiddle.net/mecBe/2/
We are trying to show a large table (more than 50 columns and 100 rows) using jQM in a web application for iPAD and desktop users.
JQM works fine for us, but in our first possibility (a pure html table in a division), the vertical scroll works fine even having a floating footer, but the table was truncated horizontally, the horizontal scroll is disabled.
Then we tried to use differents experimental scrollviews (JQM Scrollview) but it doesn't work at all if we create the table via DOM.
Any suggestion? Which is the better way to show large tables in JQM? Any tested grid to use with jQM?
EDIT:
We added an example here. http://oterrada.webatu.com/test.html
It's not really documented but could you try:
$('#dataContainer').scrollview();
Try my work-in-progress tableview plugin I did using filaments responsive table patterns
Click on the gear icon far right.
This opens a custom-jqm-select where the user can decide, which columns he wants to be visible. All columns without class "persist" can be toggled this way. There should be enough info in the source code to get you started. A lot is taken from JQM listview (filtering, inset, ...), so you should be able to find your way around if you are familiar with JQM.
The solution is adding $('#dataContainer').scrollview(); after populate the table but be carefully if the division has de data-scroll="true" because if it has it, the scroll doesn't apply correctly.
I am learning InfoPath 2010 and have a form that I am creating, but have two issues that I don't know what to do about. In the form I have created there are several columns (repeating tables). I pulled the data in from a database and have already set the conditions for what I want to be returned in the SQL, under the Data tab. So I have the correct data returning, however the issue is that the data is not in a consistent even row across the form (lines on a piece of paper) the lines begin to become offset by the second row and continue to the last. I have tried creating a table to put the data into and was hoping that this issue would go away, but that is not the case. How do I fix this cosmetic issue? OR where do I find the HTML code? When I select "Code Editor" under the Data tab, I am given VB code and there is not much code to work with.
Thank you for your help in advance.
CompGeekess
As I was continuing to find the resolution to my delima, I noticed that when a you have a column selected, Properties and Layout tabs appear at the top. In the Properties tab you can set the width and height of the column using in, and px. I noticed that not all of the columns had the same height in px, so I made each the same height, saved and previewed the form and now the rows are no longer offset. Interesting how something SO simple can make a huge different. The difference was only 2px off.
InfoPath actually creates an XML document, not HTML (if you right-click on a field in your Data Source you'll see a "Copy XPath" option). The best way to control your layout is using a Layout Table (Tools -> Design Tasks -> Layout)
I would recommend avoiding setting pixel values as well, and leaving control heights to "auto" whenever possible. If you're using a layout table and having alignment issues, right click in the table and go to Properties. You'll have Horizontal and Vertical cell alignment options (for the cell contents) in the Table and Cell tabs. You can also select multiple cells (just select the contents of them) and then assign that alignment to all in the same way.
Is there anyway to get the text on an HTML table to be selectable like the tables in MS Word? In a normal html table, when the user selects text using the mouse, the text is selected in ROWS. In MS Word, it is selected in COLUMNS. I am using IE8 in standard mode. I don't mind if the solution uses script or css.
Any help would be appreciated.
If you're willing to use script and css, then you could:
Define a CSS rule, associated with a class, which looks like (e.g. is colored like) the text is selected
Track mouse events (using the DOM event API)
Using script attached to mouse events, dynamically set the class attribute of table cells (to make it seem selected, using the CSS rule)
I haven't tested this! It's just an idea (not necessarily a good idea; but an answer to your question as stated).