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.
Related
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
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.
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I want to create this kind of graph on the basis of user entered data.
the main issue is regarding the display of boxes on the point.
Let me explain you a bit,background does contain a gradient image which resembles to the color of urine the patient want to mention.
Please suggest me something to create this graph.Whole data is need to be fetched dynamically.
If none of the many graphing tools out there can help you, you can think about this with plain old HTML :-)
Either a table or absolutely positioned DIVs. If you use a table, you can identify the cell and add a class to give that cell's border a red colour. You can do the same with DIVs. When you print the table cells or DIV to the page, you can identify them with 8-2-27 (unit-month-date) and your JSON data can match the corresponding cell/div and add a class.
Of course this is a bit more work than using an out of the box plugin. But it is possible. I have done a similar thing in the past. I found it easier to do everything on the server side and print the HTML (this was before jQuery had a plugin for everything).
gRaphael, JSChart, PlotKit, HighCharts are some common libraries used today to create chart in the client side. You need to provide JSON data and HTML Element only. Remaining task are not needed to be done by you. You can use JFreeChart to create a chart (image) on the server side and send it to the client side.
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.