Filter Web Content with Drop down - javascript

I'm using a "PHP website" and i'm not being able to give to user a "drop down filter" to filter the content... In resume, i would like to give to user the same experience as in this website: https://www.hidglobal.com/products/rfid-tags/identification-technologies
If you change the options at the right side, on the Dropdown menus, the content will be filtered. Is exactly what i need to do in my website, but i'm not 100% familiar with javascript, so, if someone perhaps can help me... I'm searching on the web for more than 4days and all the answers that i find is always for tables, and this is not exactly a table, so, if someone peharps can help me, would be wonderfull!
Thanks a lot!

To implement this kind of dynamic web content the easiest way is to use a data-binding front-end library such as AngularJS or backbone.js. Of course you can always write your own js code for this but that just won't cut it. I suggest getting familiar with one of these libraries and use for example an ng-model binding with the select dropdowns to the right bound to the content you show on the left hand side (AngularJS).

Yes, i understand that no ones will come with a "free code" to me, that's not my intention...
I already take a look into their code, but as their website is giant, to me it's a little bit hard to understand it all, as i'm not a "Pro".
I would just like that someone tells the right way to approach the problem, and what should i search, don't know, something that helps me finding the solution...
Thanks.

Related

How to select elements/values, and "recall" them as a group afterwards?. Javascript?

I am currently trying to code a "product-builder" in HTML/CSS, and was thinking of using Javascript since that is the language i understand the best. (still terrible at it).
Now i was thinking of making it a multiple step process, where you select different "parts" or values, by clicking on a div/img, and after all 5 steps, you will be able to see your selected elements, and make a "order" to the store.
Now my issue is that my javascript is not that strong, and i cant seem to find an example of this type of code. Therefore i was woundering if someone knew a way to select values in javascript, and recall them later. I think this might be easy for anybody that knows javascript, but i cant seem to figure out how to do it.
I found this template, which pretty much sums up what i was thinking.
https://codyhouse.co/demo/product-builder/index.html
Hope someone can understand my question, and are able to help.
Thanks in advance
Andreas.

How to implement Scroll Navbar?

I'm not sure if the name "scroll bar" is true at all. I would like to install a scrollbar, in which you can simply select a city with the mouse wheel (on a smartphone with a wipe) and then select the possible cities of the respective country in the second window.
I mean something like this has already been seen but unfortunately I could not find a good example.
Does anyone know the exact name and has perhaps a sample code?
Updated the answer as per comment
I think you better use Select2 for this.
You can find all the details and support you need in its Basic Usage page.
And about your Question - only post question if you have tried solving it by your self (if you have tried, post the method you have tried with a sample code) or try Googling it, this may help more than you know.
Update2
As per your comment, i understand that what you need is a spinner in this case you can use Input Spinner Plugin for this. You will need some styling changes but this will work your way.
Hope this was helpful for you.

A Way for Presenting Useful Links in the Website

I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!

jQuery slidebar for searchbox?

I'm currently working on a search box for my site that will hopefully use a slide-bar instead of tabs to conduct the search. Users will enter a search query and instead of choosing from the conventional tabs above the box, they will have the option to search based on the position of the slider (ie. a "stronger" or "weaker" range of search). Does that make sense?
Anyway, has anyone come across a plugin to help me build such a slide? jQuery? Ajax? CSS? Not sure how to go about it. Has anyone any experience or ideas with what I'm trying to achieve?
Let me know what you think, and if you need me to elaborate on anything :)
Thanks, David
jQuery UI has a Slider control that you could use for this.
You can see from the demo's on the page that there are numerous different ways that you can use this, look at the "Snap to Increments" demo. You could use this method and snap it to "weak", "strong", "very strong" etc?

(Rails, Javascript) Handling pop-ups and return values?

Quickish issue. I'm currently working with RoR with a great deal of Javascript for a project. I have a particular entity that has a "color" property. Of course I want to do this as "snazzily" (yup that's a word) as possible, however, I'm not sure how to go about it. I've seen a million and one different "Color Pickers" but none seem to fit the overall bill.
My current paradigm involves editing the entities from the "Index" page instead of having to click "Edit" for each and every one. I've got that working for several fields. What I need to implement now is a quality ColorPicker that doesn't take up too much screen real estate and/or hides itself after being presented.
So, all that said, can someone point me to some quality JS techniques for dealing with "pop-ups" and/or window return values? I'd like to really understand what needs to occur as well, so a tutorial would be nice.
Much appreciated.
Did you look at jquery and the jquery-ui tools?
This is one of the jquery-plugins http://www.eyecon.ro/colorpicker/

Categories

Resources