MixItUp - Post ID 266380

User 490066 Photo


Registered User
38 posts

JD - This is so frustrating - as far as I can tell I have everything labeled correctly. I adjusted the "footer" text just to add the additional images I am showing (24 vs 6). The only real difference is that I have 1 container with my 24 images in & your file has 1 column with a container for each image (6). I'm guessing that it shouldn't matter if mine are in the same configuration. Your images have a text element with them, hence the container. Shouldn't it work the same? It seems to have the animation in there that your example has so I know its reading something correctly. My buttons just do not toggle anything as yours do. Something so simple has become complicated. Perhaps I've been staring at it for too long & cannot see the problem. If there is anything I am missing please let me know. I'd love to fix this & move on.

Each of my image links are tagged the same as your image containers. Is there something else that I need to do?

This is all I changed within the footer text that you have.
$(".order-1").attr("data-myorder", "1");
$(".order-2").attr("data-myorder", "2");
$(".order-3").attr("data-myorder", "3");
$(".order-4").attr("data-myorder", "4");
$(".order-5").attr("data-myorder", "5");
$(".order-6").attr("data-myorder", "6");
$(".order-7").attr("data-myorder", "7");
$(".order-8").attr("data-myorder", "8");
$(".order-9").attr("data-myorder", "9");
$(".order-10").attr("data-myorder", "10");
$(".order-11").attr("data-myorder", "11");
$(".order-12").attr("data-myorder", "12");
$(".order-13").attr("data-myorder", "13");
$(".order-14").attr("data-myorder", "14");
$(".order-15").attr("data-myorder", "15");
$(".order-16").attr("data-myorder", "16");
$(".order-17").attr("data-myorder", "17");
$(".order-18").attr("data-myorder", "18");
$(".order-19").attr("data-myorder", "19");
$(".order-20").attr("data-myorder", "20");
$(".order-21").attr("data-myorder", "21");
$(".order-22").attr("data-myorder", "22");
$(".order-23").attr("data-myorder", "23");
$(".order-24").attr("data-myorder", "24");
$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", ".category-2");
$(".filter-3").attr("data-filter", ".category-3");
$(".filter-4").attr("data-filter", ".category-4");
$(".filter-5").attr("data-filter", ".category-5");
$(".filter-6").attr("data-filter", ".category-6");
User 490066 Photo


Registered User
38 posts

Just in case - if you have the time, would you please tell me what I am doing wrong in here :D
Attachments:
User 2147646 Photo


Registered User
233 posts

Hi Eric, the button links need a # for the href otherwise it is reloading the page :)
You can add this to the script to prevent the page from jumping when a button is clicked.

$(".filter").click(function(e){
e.preventDefault();
});

So it should look like this

<script>
$(document).ready(function() {
$(".order-1").attr("data-myorder", "1");
$(".order-2").attr("data-myorder", "2");
$(".order-3").attr("data-myorder", "3");
$(".order-4").attr("data-myorder", "4");
$(".order-5").attr("data-myorder", "5");
$(".order-6").attr("data-myorder", "6");
$(".order-7").attr("data-myorder", "7");
$(".order-8").attr("data-myorder", "8");
$(".order-9").attr("data-myorder", "9");
$(".order-10").attr("data-myorder", "10");
$(".order-11").attr("data-myorder", "11");
$(".order-12").attr("data-myorder", "12");
$(".order-13").attr("data-myorder", "13");
$(".order-14").attr("data-myorder", "14");
$(".order-15").attr("data-myorder", "15");
$(".order-16").attr("data-myorder", "16");
$(".order-17").attr("data-myorder", "17");
$(".order-18").attr("data-myorder", "18");
$(".order-19").attr("data-myorder", "19");
$(".order-20").attr("data-myorder", "20");
$(".order-21").attr("data-myorder", "21");
$(".order-22").attr("data-myorder", "22");
$(".order-23").attr("data-myorder", "23");
$(".order-24").attr("data-myorder", "24");
$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", ".category-2");
$(".filter-3").attr("data-filter", ".category-3");
$(".filter-4").attr("data-filter", ".category-4");
$(".filter-5").attr("data-filter", ".category-5");
$(".filter-6").attr("data-filter", ".category-6");
$(".filter").click(function(e){
e.preventDefault();
});
});
</script>

User 490066 Photo


Registered User
38 posts

James D wrote:
Hi Eric, the button links need a # for the href otherwise it is reloading the page :)


JD, man that is funny. I knew it had to be simple at this point. When you said that about the # it popped in my head that the # was there in the href when starting out a fresh button. It wasn't there because I had formatted the buttons to go to a separate html - that was before you were kind enough to look at my troubles. Once better direction was given & getting back to the MixItUp feature was moving again I never thought for a second about that # :lol:

Anyway, many many many thanks my CC friend. If there is ever anything you are stuck on using AutoCAD feel free to hit me up. I can use that software blind - 20 years for me. Not too bad with Revit either but nowhere near the knowledge with AutoCAD. Everything things works great, as I'm sure you knew, now completing what I set out to do can happen. You're a good man.
:cool:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.