I have created prices tab now on the top I have created tabs and at bottom there are list items of different packages standard standard plus etc so when user selects first package 3 out of 6 items are visible and other are hidden so when user clicks second 4 or may be 5 items in the list are visible and rest are hidden same goes for the third package the problem is that I have able to working n it to make it easy rather then making 3 different div's to show all 3 packages I kept it to same and made list items and on every list item I have placed attribute I want when user click on any tab it will get the attribute name and find that attribute within the list and add's the active class to that I item make sense ? I have working on it for the past many days but unable to find the solution for it can anyone help me out with this concern.
[https://jsfiddle.net/90mynos3/][1]
If I'm understanding your question correctly, I see 2 issues with your code.
First you're never removing the active class, so once it's active, it will never be reset. Adding this at the beginning will remove the visible class.
$('li.visible').removeClass('visible');
Second, in order to add the class, you must target the correct elements, to do this, you can use an attribute selector:
$('li[data-clean-group~="' + get_class + '"]').addClass('visible');
Using the ~= operator will match li elements with a data-clean-group that contains the full word in get_class, preventing standard from matching standard_plus
See the this fork of your fiddle for a working example and this lesson on attribute selectors for more details on using attribute selectors.
Related
Current scenario:
I have a page that is divided into columns.
There are different blocks on my page that have the ".equalHeight" class assigned to them: 2 of them in first column, 1 in the middle and 2 in the third column.
When I select all blocks using the $(".equalHeight") selector, I get an array of elements.
How can I find the mutual parent for the ones in the first column, the second and the last column?
I need the height from the first column, the second column and the third column, to assign the the children.
Is there an efficient way to do this using jquery?
Also keep in mind that once the first and second element of the array are found, you won't need to do the check for the second one in the array, because it's already updated by the first one, thus making the loop faster...
Any ideas?
Thanks
M.
Basically you're going to iterate over the row checking .outerHeight and determine the biggest one. Link to jquery documentation
jquery-match-height does a great job of this with jquery (github page). It does a lot more than it sounds you need (both features-wise and in terms of browser compatability), but check out jquery.matchHeight.js's lines 221-284
So I have this issue with accessibility where we need a table's data to be focusable by row. To accomplish this, our first instinct was to set a tabindex on the <tr>. At first, this seemed to work just fine. Unfortunately, the data is loaded into the table via ajax and this causes issues since the data has no awareness of tabindexes already set on the page. So for instance, let's say that the page index look like this:
1 2 3 [ ??? live data ??? ] 4 5 6
Once the data for the table is loaded, the indexes end up looking like this:
1 2 3 [ 1 2 3 4 ] 4 5 6
So now, when the user tries to tab around, the first index is at the top of the page, the second index is inside the live region, then the third is at the top of the page, and the fourth is inside of the live region and so on. Essentially, it indexes all the 1s in order, then the 2s, etc.
How do ensure that the table data is tabbable in the correct order once it's loaded?
So far, my first idea was to write a script that basically grabs everything with a tabindex and then resets the order to include the new indexed elements. This sort of works, but only if the tab indexes are in alignment with the DOM order (default/natural).
Any ideas/solutions for this?
UPDATE:
I just tried setting all of the row indexes to 0, hoping that it would just make it focusable and insert it into the "natural flow" of the tabindexes. This feels kind of weird though. Is the right approach?
As a best practice, rely on the natural tab order and don't use tabindex in this manner. It will be a nightmare to attempt to set and manage the tab order manually - definitely an anti-pattern.
Screen readers already supply table navigation tools that allow users to navigate by row and by cell, so there is no need to make TR's focusable in this way.
Table nav commands for:
NVDA: http://community.nvda-project.org/documentation/userGuide.html#SystemCaret
JAWS: http://www.freedomscientific.com/Training/Surfs-up/Table_Reading_Commands.htm
VoiceOver: https://www.apple.com/voiceover/info/guide/_1133.html#mchlp2723
(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'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.
I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.
I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.