I'm trying to make a table that is two columns. The one of the left will have many rows and a scroll bar. The one on the right will be a big box that I'll have buttons in that will change when you click on a different block on the left. Is this even possible?
Offcourse this is possible, almost everything is possible. I made some assumptions; the box on the right is some sort of detailed view of the record on the left? Ans because the question is tagged as javascript it should be a ajax call or something.
It is not so much if this is possible in Rails, on the back-end it would be a simple model with a number of records. On the left you'll have a list something like; Item.all.select( :id, :name ) which could be available from /items.
On the right the route /items/{id} should be defined to retrieve one item Item.find_by_id( {id} ). If you want it to be responsive you can respond with json so that you can parse it to html using javascript. Backwards compatibility would be that if you'll go to /items/{id} with your browser the detailed version should already be loaded.
I suggest you'll take a look at http://guides.rubyonrails.org/getting_started.html. Ruby only does the back-end, it serves pages. It does nothing with styling or responsive design.
For the styling and scrolling on the left side of the page, I suggest you'll use a list or just div's, a table is not very easy to style I'm not sure what you're styling skills are. But it has nothing to do with Ruby or Rails. Perhaps you can use bootstrap or some other html/css framework.
For the responsiveness you can use JQuery.get. For the basic idea, I suggest looking into http://www.w3schools.com/jquery/jquery_ajax_intro.asp, it is far from perfect but it will give you the idea.
Related
i am currently developing a website(related to fitness) client wants to make a feature, that will allow user to select a workout plan based on the choices you pick from a slider similar to the one on this example.
What i'm trying to figure out if this can be done with CSS or would I need to implement JavaScript / jQuery ?
Any help with this problem is appreciated. I just need a nudge in the right direction of where to start.
Edit: i have found jQuery-Smart-Wizard that partially does what i want would i be able to manipulate this to have choices and load a certain page depending on the choice made?
CSS is design-related, as in colors, sizes, and layout. If you want conditional navigation, and to parse form data, you'll need to use jQuery/JavaScript to manipulate client side (optional), and some sort of server-side language such as PHP to manipulate the data and information.
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've being working with a lot of WPF, and I used a lot of listviews to convey information. I wanted to create something like a detailed listview.
An example of what I'm looking for is the "listview" type interface on Facebook's newsfeed, or even Stack Overflow's question browsing list.
The data will come from an XML document. So far my solution was to use divs within divs, but unfortunately it ended up being very messy. I also tried making them with tables and then hiding the table borders (which worked to an extent) but I'm sure there must be a better way! I also heard using tables is not a very good way to do it.
I'm not even sure if the word "Listview" is the right term to describe what I'm trying to talk about. If there's a different term can you please also answer that so that I can search for that on Google too (because I've only been searching for Listview's in HTML/Javascript).
Thanks.
You can try listview plugins with ExtJs or Jquery.
Here's the listView example / doc from Jquery mobile
http://jquerymobile.com/test/docs/lists/docs-lists.html
Listview would be the term to identify the structure. The best possible way to implement it would be to use an un-ordered list ex: and style it with CSS. Its simple and not too messy.
I Remember reading an article by Marcus Egger a while back about when to and when not to use a gridview style control. I can't find it now...
I have a member on my team who has just found some jquery grids and is determined to use them for everything...
I mean everything from lists of data (which I have no problem with) to using it as a primary means for CRUD on single items (which I find lazy and overkill).
Does anyone have an opinion on this?
Any good articles?
Am I being too picky?
I have used jqGrid control for some projects, and find it to be very powerfull and customizable. And there is a great support for all possible questions here on stackoverflow by Oleg.
However, it is impossible to give reccomendation for any scenario, as there is no silver bullet, and not even jqGrid is optimal for all scenarios.
When you need to have ajax loading and paging, (multiple column) sorting, filtering, inplace editing, enumerated column values, jQuery UI theming - jqGrid is one of the best tools. It supports all that, and different types of data formats, including json and xml.
However, sometimes you only need simple web app for administrator to perform CRUD operations on some codebooks, without requirements for specific looks, ajax and all the bells and whistles, and jqGrid is overkill in these cases, especially if autogenerated mvc scaffolding or asp.net dynamic data application does the job well. Or maybe there is no requirement for grid, if there is only a list of something needed, and it can be done in 15 minutes, then you should NOT use any grid control. There are also cases when displayed data can be more user-friendly, i.e. contact information - you will find someone a lot faster if you display large name and/or picture and smaller address, phone etc aside in a unordered list than you will do the same in a grid-styled display of same information (and you cannot put picture as it will make your row height too big).
Regarding "lazy" part of your question, I would not agree as there is often more work to make jqGrid working than use some out-of-the-box component. With jqGrid you can implement inplace editing (inside jqGrid), but you can also make completely customized form (not different from one someone expects at edit page) which is loaded into edit dialog.
Why don't you use a repeater control, then you have full control of your markup.
Or do something like that:
<table>
foreach(var i in data) {
<tr>
<td>....etc </td> </tr>
}
</table>
I would like to display to user a table which contains ~500,000 rows.
The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change).
I guess that building the HTML text of this table is not a good idea in terms of memory performance.
So how can I build such table ?
I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.
Is it a better idea to use server side programming rather than Javascript ?
I'm not restricted to any server side programming language, so any advise would be appreciated !
Send the first 250-ish rows to the user, as he scrolls down, perhaps past row 200, fetch the next 250 rows, append to the table and so on.
This is a (ui) design pattern known as "Infinite scroll".
Displaying 500,000 rows all at once to a user is a bad idea. Consider other options:
allow user to download file as CSV
show paginated (still not very useful)
provide filtering mechanisms (by date etc.) to allow the user to only see the data they need
If the users really needs to see all that data at once, then viewing it in the browser is one of the worst ways to do that - they should be using a tool made specifically for viewing data, like Tableau.
Classic example of where to use ajax.
Use javascript in combination with a server side script.
This really is a case for server-side pagination, I would say, maybe in combination with Ajax. A HTML table with 500.000 rows is going to crash a lot of browsers.
You're not specifying which server side technology you work with. If you update your question, I'm sure people will be able to give you some pointers.
Try this:
Clusterize.js
Tiny plugin to display large data sets easily
https://clusterize.js.org/
Is it possible to build on the fly only the visible part of the table ?
If you build a "fake" scroll (e.g. jquery slider) you can retrieve parts of the table instead of the whole.