Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Javascript not working with wordpress.

  • 10-04-2014 12:19AM
    #1
    Registered Users, Registered Users 2 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

  • 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?


  • Registered Users, Registered Users 2 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");
    }
    });


  • Registered Users, Registered Users 2 Posts: 553 ✭✭✭redman85


    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/


  • 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