Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Moving the "isotope-item" class to second div not first

Example: www.madewithpassion.co/work

Works great on first load - try refreshing the browser to see my issue. The class "isotope-item" gets added in automatically too the first div within the #portfolio, which is the "fading-out" class, which I need to keep to get the hover effect I want.

How can I get that class "isotope-item" to target the second div "col span_4"?

Any help is appreciated.

Thanks

User Gravatar

kymthedesigner

Posted Aug 7 2013 15:19 UTC

$10


  • jquery
    isotope
  • 1883 Views

9 Replies


Hello kymthedesigner,

For isotope to work properly the items needs to be direct children of the container. So first change the div element to anchor element: => . Give the new element the class fade-out.

Then if you have any questions about styling/functionality (not isotope only), you can ask here. (I can help you with the hover fade effect)

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Aug 7 2013 20:19 UTC

H Nikola,

Thanks for your reply.

At current I have the "fade-out" class on the tag, the fade out effect works fine.

However, on page reload all the items stack up, causing my issue.

http://www.madewithpassion.co/work/#

User Gravatar

user199

Posted Aug 16 2013 5:31 UTC

Hi kymthedesigner,

Change from this (example):

<a class="fade-out" href="http://www.madewithpassion.co/portfolio/angus-purden-web-design/">
    <div class="col span_4 element web-design " data-project-cat="web-design ">
        <div class="work-item">
            <img class="custom-thumbnail" src="http://www.madewithpassion.co/wp-content/uploads/2013/03/anguspurden.png" alt="Angus Purden &#8211; Web Design" />
            <div class="work-info">
                <div class="vert-center">

                        </div><!--/vert-center-->
                    </div>
                </div><!--work-item-->


                <div class="work-meta">
                    <h4 class="title">Angus Purden &#8211; Web Design</h4>
            </div>

            </div><!--/col-->

        </a>

to this (basically, make the div.col.span_4.element be before the a.fade-out on each element):

    <div class="col span_4 element web-design " data-project-cat="web-design "> 
<a class="fade-out" href="http://www.madewithpassion.co/portfolio/chateaul-lavocat-web-design/">
                                    <div class="work-item">
                                                    <img class="custom-thumbnail" src="http://www.madewithpassion.co/wp-content/uploads/2013/03/chateaulavocat.png" alt="Bordeaux Wine &#8211; Web Design" />
                            <div class="work-info">
                                <div class="vert-center">
                                </div><!--/vert-center-->
                            </div>
                        </div><!--work-item-->


                        <div class="work-meta">
                            <h4 class="title">Bordeaux Wine &#8211; Web Design</h4>
                    </div>
                    </a>

    </div>
    <!--/col-->

Do that on all of them, and it will work isotopely

let me know if it works for you

User Gravatar

guyisra

Posted Aug 16 2013 13:18 UTC

Hi Guyisra,

Thanks for that.

However, it kills the fade-in effect.

User Gravatar

user199

Posted Aug 17 2013 1:43 UTC

where is the code that is relevant for that effect?

User Gravatar

guyisra

Posted Aug 17 2013 3:51 UTC

updated URL: http://www.madewithpassion.co/portfolio/

I have the code implemented in the header and jFade.js attached.

Thanks

User Gravatar

user199

Posted Aug 21 2013 5:44 UTC

Ok,

So I think I got it to how you want it to be

first, switch the and the as I said before. This will fix the isotope issue The problem with the fade lies in the initializer in the header

jQuery().ready(function() {
    jQuery('.element').jfade({ 
        start_opacity: "1",  
        high_opacity: "1",
        low_opacity: ".4",
        timing: "500",

    }); });

as to not mess with your code too much, the fade element should be the most upper. A quick fix would be to initialize jfade on .element since after we switched the <a> and the <div> - .element would be the most upper node. You could, alternativly, change the place of the classes, but I don't know how it affects the rest of your code.

Let me know if its ok

User Gravatar

guyisra

Posted Aug 21 2013 14:01 UTC

Hi,

Thanks again for your help.

Again It's not working. I need the 'a' tag as that links to the portfolio page.

It works at best as it is. Just sometimes on refresh it messes things up.

User Gravatar

user199

Posted Aug 22 2013 23:32 UTC

Hi

Are you sure the anchor doesn't work? I did it and it works (or at least I don't understand what doesn't work)

see here http://jsfiddle.net/cFEQv/embedded/result/

I copied your site's html and changed it the way I suggested and placed it all. Isotope works properly and fade works properly and links work properly. Am I missing something?

User Gravatar

guyisra

Posted Aug 28 2013 5:06 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions