How to filter elements on click in js?
Tags: javascript,jquery,css
Problem :
This is the code I have so far:
$(".prod-page").each(function() {
$(this).click(function() {
$(".cat-item").filter(function(index) {
// something goes here I guess?
});
});
});
HTML:
<div class="row">
<div class="cat-item"></div>
<div class="cat-item"></div>
<div class="cat-item"></div>
(more here)
</div>
Dynamically adding the page buttons depending on number of items (12 per page):
numItems = $('.cat-item').length;
numPages = numItems / 12;
lastPage = numItems % 12;
for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page"></div>' );
}
if (lastPage >= 1) {
$('#page-counter').append('<div class="prod-page"></div>' );
}
$(".prod-page").each(function(i) {
$(this).text(++i);
});
.cat-item has a display: none set in css and there are multiple buttons with the class .prod-page.
When clicking on .prod-page button, I would like to .show first 12 elements, then the next 12 elements with the class .cat-item (undefined number of times).
Any idea how to approach this? The best would be modifying the code I've already written.
Solution :
try this -
when you generate the page buttons add some sort of page id
for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page" data-pageid="'+i+'"></div>' );
}
then the click handler will know which page to show:
$(".prod-page").click(function() {
var $button = $(this);
var page_id = $button.data('pageid');
var $items = $(".cat-item");
for (var i=0; i< $items.length; i++) {
if (i < page_id * 12 || i >= (page_id+1)*12 ) {
$($items[i]).hide();
}
else {
$($items[i]).show();
}
}
});
CSS Howto..
This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly). Basically combine what you posted,...
Try to put variable content value instead of its name: ShortcutButton.setStyle("-fx-background-color: " + hex + ";"); ...
I think you may want to look to flexbox for this, coupled with an inline-block fallback (display: flex, display: inline-block). Note that layouts may vary for browsers which do not...
Thanks everyone for their advices and responses, but finally I came with my own, a little bit workaround, solution. So I used this Textarea to resize based on content length...
Assuming you're talking just about width, and not about height: Live Demo CSS: #status { width: 100% } HTML: <table> <tr> <td width="200" style="background:#ccc"> <select id="status" name="status"> <option value="started">started</option> <option...
Ok, first off: don't do that index numbering to target elements. If another form gets added to a page, or some inputs added to the form it means trouble, having...
You can use the flexbox model. Just add a container for the divs. And add display: flex to the parent, and flex: 1 for children. Edited jsfiddle You can find...
Percentage Margin of an inner element depends on the size of outer container. see for example left margin of inner div is set 20% for both examples _______________ | ___...
Here's a demo first, you need to "ID the body" for every page, giving it a distinction what page you are at. //when at home page <body id="home"> //or services...
CSS: li > span + input { /* styles here */ } jQuery: $('li > span + input').val(); Here is a demo....
the website is using javascript for the animation How its done We can break this up: The button is given a background-image which in this case is a slight diagonal...
.secondary-navbar .social-links > li > a { margin: 13px 5px 0; padding: 2px 5px; background-color: #1a3664; color: #fff; font-size: 180%; /* margin-right: -10px; */ padding: 0px !important; } and on...
Taken from https://css-tricks.com/snippets/css/style-override-technique/ The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles. p { font-size: 24px !important; }...
With flexbox, I'd do something like this: * { box-sizing: border-box; } .pricing { background: #eee; display: flex; flex-direction: column; padding: 2em 0; } @media (min-width: 48em) { .pricing {...
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's...
To prevent the flex items from shrinking, set the flex shrink factor to 0: The flex shrink factor determines how much the flex item will shrink relative to the rest...
You can use a bunch of things to vertically center an element. The best one for one line elements (elements with just one line of text, for example) is line-height...
Sorry, but wrapping long lines in code highlight doesn't work with line numbers. {% highlight ruby linenos %} def dosomething delegate :some, :thing, :with, :unicorns, :and, :shrimps => :yolo, :someother...
An HTML table will do all the aligning for you. <table> <tr><td>First Name*</td> <td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td></tr> <tr><td>Surname*</td> <td><input type="text" name="sName"...
Firstly you missed a semi-colon after one of your CSS rules (height: 30px), so the rest of the rules for that selector weren't being called. So solve your problem (as...
You can use "Sprite" images for your buttons. Thus all button, normal bg and hover bg will remain in an image. And that image will load initially with the button...
In your html <table class="table1"> <tr> <td> ... </table> <table class="table2"> <tr> <td> ... </table> In your css: table.table1 {...} table.table1 tr {...} table.table1 td {...} table.table2 {...} table.table2 tr...
According to the Docs on Materialize Forms: In addition, you will need a separate call for any dynamically generated select elements your page generates So the best way is to...
There's probably another rule for images inside nav that prevents the border. But you can add !important to your rule: .img-cls { border: solid blue 1px !important; } This should...
Very simple, you can create a toggleColors function to change the colors each x time. JavaScript: // Globar vars var timer; var miliseconds = 500; /** * Function to toggle...
The "shadow" is positioned absolutely with relation to its nearest eligible parent. You can make the immediate parent eligible by adding position:relative to it. Example: http://jsfiddle.net/qkAJD/5/ .success-header { color: green;...
You will need to make the span display: inline-block; and make the div text-align: center; or make the span display: inlin-block; and margin: 0 auto;
Things that I changed: Changed the link to display as a block element. Removed the padding at the top of the li elements. Added that padding height to the height...
Use an @external @-rule to disable obfuscation for the given CSS class names: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes You can, for instance, put the following in any CssResource stylesheet: @external .gwt-*; But IMO, the...
CSS: #theElement { position: fixed; bottom: 100%; } jQuery: var $el = $('#theElement'); $el.css({ position: 'fixed', top: '-' + $el.outerHeight() }); ...