Javascript not working with wordpress.

off.the.walls

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!

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?

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");
}
});

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/

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;
}