Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Javascript not working with wordpress.

Options
  • 10-04-2014 12:19am
    #1
    off.the.walls
    Registered Users Posts: 1,298 ✭✭✭


    Tried this using jquery to no avail thought i'd try pure javascript.

    window.onscroll = function() {
    var el = document.getElementsByTagName('fixed');
    var className = 'fade';
    for (var i=0; i<el.length; i++) {
    if (el.classList) {
    if (window.scrollY > 200)
    el.classList.add(className);
    else
    el.classList.remove(className);
    } else {
    // IE Fix
    if (window.scrollY > 200)
    el.className += className;
    else
    el.className = str.replace(new RegExp("\\b"+className+"\\b","gi"),"");
    }
    }
    }


    Have all the css, html, php tags all rendering out fine its just this one fade thats getting me!


Comments

  • Options
    #2
    Fenster
    Closed Accounts Posts: 4,763 ✭✭✭Fenster


    Where is the script located within the top-to-bottom of the generated HTML page? How is it being input? What errors, if any, did debugger tools turn up?


  • Options
    #3
    off.the.walls
    Registered Users Posts: 1,298 ✭✭✭off.the.walls


    Fenster wrote: »
    Where is the script located within the top-to-bottom of the generated HTML page? How is it being input? What errors, if any, did debugger tools turn up?

    After messing about got this working with jQuery

    jQuery(window).scroll(function() {
    if( jQuery(window).scrollTop() > 850 ) {
    jQuery("#fixed").addClass("fade");
    } else {
    jQuery("#fixed").removeClass("fade");
    }
    });


  • Options
    #4
    redman85
    Registered Users Posts: 553 ✭✭✭redman85


    off.the.walls wrote: »
    After messing about got this working with jQuery

    jQuery(window).scroll(function() {
    if( jQuery(window).scrollTop() > 850 ) {
    jQuery("#fixed").addClass("fade");
    } else {
    jQuery("#fixed").removeClass("fade");
    }
    });

    you can use $ instead of jQuery, $ is a reference to the jQuery object.

    also check out this blog for a better way (performance wise) to do this http://ejohn.org/blog/learning-from-twitter/


  • Options
    #5
    Fenster
    Closed Accounts Posts: 4,763 ✭✭✭Fenster


    You can also use straight CSS for certain fade effects these days:
    .fade,
.fade:hover {
    transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out; 
    -o-transition: background-color .3s ease-in-out; 
}

.fade {
    background: #000;
}

.fade:hover {
    background: #fff;
}


Advertisement