MyBB Community Forums

Brad, maybe this code would do it - basically you have two divs;

http://stackoverflow.com/questions/67447...down-200px

http://jsfiddle.net/KEjfe/4/

The > would need to become < so that the footer vanished after the page scrolled instead of appearing.

(2013-02-17, 08:11 AM)Leefish Wrote: [ -> ]Brad, maybe this code would do it - basically you have two divs;

http://stackoverflow.com/questions/67447...down-200px

http://jsfiddle.net/KEjfe/4/

The > would need to become < so that the footer vanished after the page scrolled instead of appearing.

Yes, this would work. You could dynamically get the required height by using jQuery to get the vertical offset of the #posts element.

I'm so confused ... haha. Will try it. Thanks.

Literally willing to pay someone just to do this, I honestly don't want to invest more time into learning jQuery just to solve this as I have a lot of other things to do on the site. PM me if you're interested.

TAKE MY MONEY

Don't worry about the money... Unless you insist... This is all based on if I can get this right.

Download, Upload and Link:

http://www.appelsiini.net/projects/viewport

then use

(function() {
    $(window).bind("scroll", function(event) {
        if($("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            $("#SECONDID").css("display", "true");
        }
        else {
            $("#SECONDID").css("display", "none");
        }  
    });
});

sorry if this doesn't work. It's untested.

(2013-03-05, 08:26 PM)Init Wrote: [ -> ]Don't worry about the money... Unless you insist... This is all based on if I can get this right.

Download, Upload and Link:

http://www.appelsiini.net/projects/viewport

then use

(function() {
    $(window).bind("scroll", function(event) {
        if($("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            $("#SECONDID").css("display", "true");
        }
        else {
            $("#SECONDID").css("display", "none");
        }  
    });
});

sorry if this doesn't work. It's untested.

Only possible issue I can see is that "display: true" is not valid CSS. Try this:

jQuery.noConflict();
(function() {
    jQuery(window).on('scroll', function(event) {
        if(jQuery("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            jQuery("#SECONDID").show();
        }
        else {
            jQuery("#SECONDID").hide();
        }  
    });
});

Also note I replaced .bind() with .on() as .bind() has been deprecated since jQuery 1.7.

Again, also untested as above.

EDIT:

Or try this version, using (document).ready(). Unsure if the JS plugin will even work with that, but it makes the code slightly neater:

jQuery.noConflict();
jQuery(document).ready(function($) {
    $(window).on('scroll', function(event) {
        if ($("#PUTYOURIDHERE:in-viewport")) {
            $("#SECONDID").show();
        } else {
            $("#SECONDID").hide();
        }
    });
});

(2013-03-05, 09:03 PM)Euan T. Wrote: [ -> ]

(2013-03-05, 08:26 PM)Init Wrote: [ -> ]Don't worry about the money... Unless you insist... This is all based on if I can get this right.

Download, Upload and Link:

http://www.appelsiini.net/projects/viewport

then use

(function() {
    $(window).bind("scroll", function(event) {
        if($("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            $("#SECONDID").css("display", "true");
        }
        else {
            $("#SECONDID").css("display", "none");
        }  
    });
});

sorry if this doesn't work. It's untested.

Only possible issue I can see is that "display: true" is not valid CSS. Try this:

jQuery.noConflict();
(function() {
    jQuery(window).on('scroll', function(event) {
        if(jQuery("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            jQuery("#SECONDID").show();
        }
        else {
            jQuery("#SECONDID").hide()
        }  
    });
});

Also note I replaced .bind() with .on() as .bind() has been deprecated since jQuery 1.7.

Again, also untested as above.

Oh, well that's embarrassing. See, this is what happens when a programmer in "Programmer Mode" uses CSS :/ JK

Thanks for fixing it. I'm not much of a javascript person myself. Although, I do know a bit.

However, instead of using .show and .hide, can you not instead use display: block or display:inline

jQuery.noConflict();
(function() {
    jQuery(window).on('scroll', function(event) {
        if(jQuery("#PUTYOURIDHERE:in-viewport").length > 0)
        {
            $("#SECONDID").css("display", "block");
        }
        else {
            $("#SECONDID").css("display", "none");
        }  
    });
});

Will try it when I have some time – thank you!!

You could do, yes. But it's easier to just use the built in methods which do exactly that behind the scenes.