I've been looking for a good how to on this topic for the last 4 days and could not find any. Even worse; I'm not able to think of a good description of what I'm trying to achieve.
For example Dropbox has the functionality of what I would like to implement on my own website. If you login into dropbox you can upload files. When you upload files one by one the UI stacks the results (filename, location, etc.) into a div element. There are other websites who also do this; Namecheap, for example, when you search for a domain and click add to cart you see the domain show up on the right side, where you have the option to delete it.
What I would like to do:
Have a page with a search box that queries my database for objects and displays the results into a div element below. Everytime the user does a new search the results in that div element will change. But if the user clicks on the 'add to' button the object must move from the search_results div element to another div element on the same page where all the previous selected elements are also listed. The user is then able to delete the object from the list or alter the values of the object such as the amount.
Like I said; I've been pulling my hair out because I cannot find it... I'm feeling really stupid right now :( Does anybody know what the technicall name of such a functionality is?
EDIT
The comment below from Quasimodo's clone and yuriy636 pushed me in the right direction. After searching with there terminology I've found this page:
https://cartjs.org/
The second example is exactly what I was looking for. However I'm not able to upvote a comment but I do like to give credits to both for helping me out!
Your question is quite vague but I think what I've done below can at least nudge you in the right direction.
Let's say you have something like this - a div to hold your search results, each of which is it's own div with class result, and a separate div to hold the 'moved' ones:
<div id="searchResults">
<div class="result">This is one search result.</div>
<div class="result">This is another result.</div>
</div>
<div id="chosenResults"></div>
Now, we can use JQuery to put in the "move" functionality:
$(document).ready(function() { //On page load
$('.result').click(function() { //When element with class "result" is clicked
$(this).detach().appendTo('#chosenResults'); //Remove it form the results list, add it to the other
});
});
Here it is in action: http://codepen.io/anon/pen/GqBxEp
I'm not sure where you're at in regards to the actual data retrieval, etc, however I figured knocking out the front-end as I have above may be useful for you.
I've heard the term infinite list and infinite scroll, Wikipedia uses 'lazy or delayed evaluation': https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation
Related
I want to make something really similar as "search" on website http://www.jobs.cz/
What it should do:
Selectbox show on user focus on input
User can type in input and filter result from selectbox
If user pick one of result selectbox hide
If user focus input again selectbox open again and user can pick another option (pick as added to previous not rewrite previous one)
If he start typing to input it still filter no matter what is already picked
(example: He already pick "Administrativa" but if he type Auto it offer him "Auto - Moto", in another words, values picked before should not be use for filter )
Each picked value should be in some "tag" mode (each one is separated inline-block and have class)
Before I will continue i dont want you to make whole code for me it will prolly take too long, And I didnt come here for code but mostly for HOW TO design something like this. I start my self with multiple things just dont know if I think right and I need to help with some ideas how things like this can be made.
So what I did:
Opening / Closing selectbox div:
Input looks like:
<input id="position" placeholder="Position" ng-focus="focus=true" ng-blur="focus=false" ng-model="q">
And then something like
<div class="inputHelper" ng-show="focus">
Filter results:
Based on angular documentation filter in ng-repeat should be done really easy by:
<li ng-repeat="pos in listCtrl.positions | filter:q as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}</li>
With ng-model="q" on <input> , however problem start if I push something to that model, like previous pick from user. I am not sure how to handle filter if user already pick something.
Handle multiple picks
For this I create array where I always check if user already pick that, if not push it to array.
choosePosition: function(position) {
if (listCtrl.chosenPosition.indexOf(position) === -1) {
listCtrl.chosenPosition.push(position);
}
}
Show array of objects in input
I search for this a lot in documentation and google a this kind of issue, and I found this what is basicly display array in input. I didnt find anything more usefull. So for this point I dont know how to display array of objects, and how to style each array element as inline block and give it some class.
Summary:
This is kind of long post, but I try to say everything I need to do to avoid some miss understanding, I spend days here I still stuck somewhere. And I am not even sure I design this well. If here is someone who can help me with part of codes which can work or at least try to explain me how to do something like this i will really appreciate it
If your project will allow its use, Angular Material's Autocomplete is pretty much a direct implementation of what you desire.
I'm having trouble finding how to create this motion on http://makr.com/ - when you click on a product, the page slides down and more product information appears. The scrollbar also scrolls to where the product/information fits on the whole page. Can someone help me or point me in the right direction?
You can do both using jQuery.
For the opening the product on the way they do: http://api.jquery.com/animate/
For the scrolling you can check this page: http://api.jquery.com/scroll/
The general idea is trigger the scroll method once you click in a product (scrolling to the place you want) and then open the product details by using animate.
Let's say ul.products li.product selector selects every product in the list.
Let's say div.product-detail selector selects the correspondent product detail container
$(".ul.products li.product").click(function() {
$('div.product-detail').slideDown(function() {
$(window).scrollTop($(this).offset().top);
});
});
You may want to select a specific product detail div (the one related with the clicked product) but this code accomplish the purpose.
offset property gives you the top/left coordinates of the product detail div.
use scrollTo() method.
developer.mozilla reference.
(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.
I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.
I am a programmer in rails and I am trying to create a pop up when a link is hovered.
In my project I am looping through an array and displaying different users (eg user image, user name etc). I want a situation whereby when you put your cursor on the user name (which is a link) a pop-up window will show for only that user.
I searched some other sites and I got some javascript ideas which I placed below. But my problem with the code is that when I place the cursor on one user name (which is a link and has the link div) all the pop-up divs from every other user will show instead of just that user name link.
Please what can I do?
$('#link').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
html
<%= for update in #updates%>
<div id="link-pop" style="display:none"><%=update.user_type%></div>
<div id="content">
<%= update.user_name%>
</div>
<%end%>
All the pop-up divs from every other user will show instead of just that user name link.
Well, this is because you're calling all popups $('div#pop-up').show();.
If you need to only show a popup relative to that link you can either select it by index() or if it's children of #link then something like $(this).find('#popup') will work.
What's your HTML? Probably you have couple of divs with the same id.
with the html like:
some text
<div style="display:hidden">user info</div>
the problem with your code is the id. An id, from what i know should be unique in page so it raises problems...
edit
You say you want a popup like in facebook right, so here goes some pseudo-code (as I'm not expert in ruby):
You should have and array of objects or some kind of data type containing your info.
When generating your html you should have something like this:
while(users)
print "user->name
<div class="hidden-user-info">
<img src="user->photo" alt="some description">
<span>user->name</span>
etc...
</div>
Again this is pseudo-code... The css should look like this:
.hiden-user-info{display:none;position:relative;z-index:20;}
The solution above should be used if you are presenting all user links when generating your html code.
If you're dynamically creating it, it may have to evolve some kind of ajax call or dom manipulation with jquery.
Without proper code or link it's hard to help more... Sorry