Hello, I am trying to make a filter on the 3 buttons and I am currently testing the “apartment” and “house” button.
I tried with “data-filter” and a function.
When I click on apartment for example it displays 1 second and then nothing.
And when I click on “home” it does nothing.
I tried to write the function as best I could but in my opinion I had difficulty doing a few things.
Usually you would keep the details of each property in a database and then create your web page as required.
Just for fun, instead of usind a database, I have used a public tab-separated file on Dropbox, created by a spreadsheet in LibreOffice Calc This means I can easy add and delete properties without editing the HTML Within a few seconds of clicking ‘Save’ in LibreOffice, the Dropbox desktop software on my PC automatically uploads the new data.
My spreadsheet contains these colums:
Country
Location
Description
Price
Type (i.e. pays / maison / appartemnet)
Photo link
The filtering is now quite simple. The JavaScript line: if (index > 0 && index < r.length)
can be extended to filter out properties that are not of the type selected.
After this you can do the ‘pagination’: a new ‘page’ created after a preset number of properties have been displayed.
Your use of three ‘cards’ side-by-side does not work well on small smartphones. I have therefore used CSS Flexbox with wrapping. The basic width of the cards is 400px but is allowed to reduce when on a smartphone.
I’m going to try to keep my script but my filter works on “all” but I see clearly everything but for the 2 other filters “apartment” and “house” there is a problem.
You’ll need a JS expert to help but I think the problem is that you are filtering the items and using display:none to hide them but the parent .card elements are all display:block and part of the pagination.
For example you say you filter the items and nothing happens but that’s not quite true. The elements on the first pagination panel disappear because you have set them to display:none but your filtered items were on page 2 of the pagination and you’d need to go to page 2 to see them.
Although you make the inner element display:none the outer element is .card which is what the pagination is keeping track of and is still there although it has no content.
What you would need to do is that when you filter an item is that you need to make sure that the parent card element is also removed from the pagination (unless you have mixed pairs). This would not be an easy task as you would first have to filter the items and then you would have to recall the pagination js so that it builds a new pagination with the reduced set of items.
Hopefully a JS guru will be watching this thread and offer some better help than me as my JS is basic at best.
Thank you for your analysis.
I’m stuck because I’m a novice and I’m trying to write a few small functions myself and here I think I need someone who knows js perfectly, which is not my case.
I hope someone can help me with my filter.
Unfortunately I am busy at the moment, but my first thought looking at the task and your work, is that you would make life easier for yourself if you removed all the decoration, styling, fades etc.
Just concentrate on the functional aspects like trying to get your filters to work first — make it look pretty afterwards.
I’m not an expert in these matters, but I would have thought that this sort of thing could be done with GET requests e.g. youraddress.com?filter=maison
I might be leading you down the garden path, but maybe HTMX is worth a look.
Just to add here is a tutorial that might be interesting
There’s not a problem in the filter per-se… if i click Maison, the system dutifully hides everything that isnt a maison. The ‘problem’ is that the pagination is hiding them because the 3 elements you’ve tagged as maison are on page 2.
I assume you’re expecting some magic by which the pagination suddenly grasps the idea that you’ve hidden stuff and recreates itself to show only the unhidden things. That’s… not what this code is designed to do.
The first line of JavaScript sets the maximum number of cards (i.e. properties) per section.
If you don’t like the DropBox approach, either the tab-separated file can be uploaded to your server or the data can be included in the JavaScript (e.g. as an array of objects).
I have not focussed on the CSS except to ensure it is suitable for small smartphones.
I found some issues in your code that might be the reason filter functionality isnt working
Selector Issue - you’re using $('deco'), which is not a valid jQuery selector. It should be $('.deco') to target elements with the class deco.
2. **decoVisibility Toggle** ensure that the.deco` elements are correctly targeted and their visibility is toggled based on the filter.
try this
<script type="text/javascript">
$(document).ready(function () {
$('.flex').click(function () {
const value = $(this).attr('data-filter');
if (value == 'maison') {
$('.deco').hide(); // Hide all
$('.deco.maison').show('1000'); // Show only maison
} else if (value == 'appartement') {
$('.deco').hide(); // Hide all
$('.deco.appartement').show('1000'); // Show only appartement
} else {
$('.deco').show('1000'); // Show all if no specific filter
}
});
});
</script>
some adjustments for your index.html
<div class="container flex">
<h3>Filtres</h3>
<div class="flex icons">
<i class="fa-solid fa-globe fa-lg"></i>
<div>Pays</div>
</div>
<div class="flex icons" data-filter="maison">
<i class="fa-solid fa-house fa-lg"></i>
<div>Maison</div>
</div>
<div class="flex icons" data-filter="appartement">
<i class="fa-solid fa-building fa-lg"></i>
<div>Appartement</div>
</div>
</div>
<div class="card-container deco-list">
<div class="card">
<div class="deco appartement">
<img src="images/deco1.jpg">
<p>Tenerife Costa Adeje</p>
<span>Bel Appartement Avec Vue Sur La Mer</span>
<button class="orange_link">Prix 197 265€</button>
</div>
<div class="deco appartement">
<img src="images/deco4.png">
<p>Belgique Liege</p>
<span>Appartement de la Résidence 3 CH, parking, cave.</span>
<button class="orange_link">Prix 357 965€ </button>
</div>
<div class="deco maison">
<!-- Example maison content -->
<img src="images/deco5.jpg">
<p>Some Maison Description</p>
<span>Details about maison.</span>
<button class="orange_link">Prix 250 000€</button>
</div>
</div>
</div>
I hope it helps you out.
Looking at your html for the images you have two rows but each card element holds 2 images (one above the other) which was the way I gave you the code because I assumed you were sliding two rows left and right. I now see that in some of these pairs you have different items (appartement and maison etc). The problem now is that if you filter those items a card may only have one item and therefore you will have gaps in the display even when filtered correctly.
Therefore the html needs to change back so that each image is a single card container and we allow 6 images for two rows rather than the three doubles as before.
I’ve updated your html with this in mind and removed your filter code and your pagination code and added a new script that will filter and adjust the pagination after it has been filtered.
I think that’s pretty close to what you were after but of course there is some tidying up to do and also small screen mode for that gallery will need some loving care.
