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.
Related
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
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
I have a MAIN page with content from other page.
create_table_paging($query,$table,$pages,$row_query,$pageNum);
Forms are generated dynamically using the database to update. I need to keep the scroll to go to the same place where it was when I select the option from drop down list. I know I have to use scrollTo(x,y) I have been trying but nothings works... Can anyone post a snippet showing how to capture the coordinates.
<option value=\"1\" ".$proceed." onClick=\"window.location='index.php?pages=job&job_id=".$row->job_refno."';\">Proceed</option>
Get offsetTop value of element and scroll:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetTop
I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.
I'm trying to build a screen that will be a hierarchical list of bookmarks, grouped into categories. The categories can be expanded/contracted to show or hide the bookmarks for that category. Right now I'm just working on the UI and using jquery for the first time (and loving it).
The methodology I'm using is sorta like accordion but more than one section can be opened at the same time, and there can be multiple levels deep (accordion only supports one level). For each category, there's a div with an image of a folder in it that will show or hide the next element in the DOM, which would be the collection of bookmarks (usually a <ul>). eg:
<div class="categoryLine" id="d4">
<img class="folder"....>
Fourth Menu Item
</div>
<ul id="u4">
<li id="l41">
I select the element to close using $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); where the div around the image the user clicks on has a class of categoryLine, and the thing to show/hide is the element following that div.
The problem is in the most complex (deepest hierarchy) part, some things are being hidden that shouldn't be, and reappearing for unknown reasons.
You can see a "working" example here. I've given the relevant tags IDs and put in a debugging alert to display the ID of the element clicked on and the elements to be opened and closed (view source to see this).
Click on the folder for "Fourth Menu Item" to unhide that category. You should see sub 1, sub 2, and sub 3 appear.
Click on the folder for "Fourth Menu Item sub 1". You should see sub 1 expand, but sub 2 completely disappears, including the category line. This is the mystery I'm trying to solve. Clicking on sub 1 correctly says "Toggling 'u411' from category 'd41'" but when the <ul> u411 disappears, so does all of sub 2 disappears. Likewise, if I click on the folder to expand sub2, sub3 disappears.
I am open to implementing this in a completely different way (again, this is my first jquery experiment). I would also be willing to look at solutions where only one category could be open at a time, as long as it still supported a hierarchy instead of one deep like accordion.
Thanks in advance.
jQuery describes parentsUntil() as:
Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
The important part to note there is that you're not selecting .categoryLine. It seems as though you want to be including it though. Should work if you use closest() instead.
$(this).closest('.categoryLine').next().toggle(transitionSpeed);
As a side note for future reference. ('categoryLine') is not a selector. Typically, you need to include the ., # or element type, ie div. There are more advanced methods though. You may want to read up on jQuery selectors.