CODEWITHSUNDEEP
jquerycssjoomla
Dtorr1981
Dtorr1981

Reputation: 263

Excluding a sub-class from an animation in Jquery/CSS

I have a site where by I am using a small jQuery function and css to translate a section on page scroll (fades in and moves up).

All of the sections that I do not want to animate have a sub-class of 'sp-portfolio' i.e. sp-page-builder .section .sp-portfolio but the function works on .sp-page-builder section See below (please note, this runs in Joomla hence the slightly different syntax at the start:

jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section")
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(".sp-portfolio")[0]){
        //Do Nothing
        } else {
            if (jQuery(tag).position().top < pageBottom) {
                jQuery(tag).addClass("visible").delay( 800 )
            } else {
                jQuery(tag).removeClass("visible")
            }
        }
    }
})

The css is:

/** Animation test **/
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)) {
  opacity: 0;
  transition: opacity 1s;
  transform: translate(0, 100px); 
  transition: all 0.6s;
}
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)).visible { 
  opacity: 1;
  transform: translate(0, 0);
}

Is there a way to check if the sub-class .sp-portfolio exists and if so to skip the function on that section.

The above code just seems to skip the function on the entire page rather than moving on to the next section.

A sample page can be seen here: SP Portfolio - The sections that should not move are 'Our Work' and 'Latest Insights'.

Upvotes: 1

Views: 127

Answers (4)

dmuensterer
dmuensterer

Reputation: 1885

You can test if an element with class sp-portfolio exists in JavaScript.

if ($(".sp-portfolio")[0]) {
    // Class exists
} else {
    // Class does not exist
}

Upvotes: 2

Jan Misker
Jan Misker

Reputation: 2149

On re-reading I notice that the .sp-portfolio class is not on the section, but somewhere lower in the DOM tree. In that case easiest would be to just fix your code as follows:

if (jQuery(".sp-portfolio")[0]){
    //Do Nothing
} else {

Could be rewritten as follows

if (jQuery(".sp-portfolio", tag).length){
    //Do Nothing
} else {

Specifying the tag as second parameter means that jQuery only searches inside that element (aka context).

You can use the :not() selector in the query.

var tags = jQuery(".sp-page-builder section:not(.sp-portfolio)")

That way you only get sections that do not have class .sp-portfolio.

Upvotes: 2

Growyour GK
Growyour GK

Reputation: 463

<script>
jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section").not(".sp-portfolio");
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(tag).position().top < pageBottom) {
            jQuery(tag).addClass("visible").delay( 800 )
        } else {
            jQuery(tag).removeClass("visible")
        }
    }
})
</script>

You should use .not the function of jQuery which will let you select only those .sp-page-builder section element, which doesn't have sp-portfolio class.

Upvotes: 2

Arne
Arne

Reputation: 1135

Since you are in a loop with your if query and the if query should only refer to the current element, this element must also be addressed.

You can easily do this by changing your code

if (jQuery(".sp-portfolio")[0]){

in

if (jQuery(tag).hasClass(".sp-portfolio")){

Your used code always refers to the first element on the whole web page with the corresponding class, no matter if it is in the loop or not. So if the class exists only once – no matter where on the page – the query always returns a true and behaves correctly.

With the small adjustment you just refer to the current element in the loop and not to the whole page.

I hope this could help. :)

Upvotes: 2

Related Questions