Hiding an appended div in Optimizely

Question

In following piece of code, I'm unable to hide the appended div before the user reaches the last paragraph. The div is showing right on pageload, and I'd like to have it show only when the user reaches the "last" ID.

$('body').append('<div id="optslidebox"></div>');

$(".slide-content > p").attr("id", "last");

window.scrollBox = function () {
    $(window).scroll(function () {
        /* when reaching the element with id "last" we want to show 
        the slidebox. Let's get the distance from the top to the element */
        var distanceTop = window.$('#last').offset().top - window.$(window).height();

        if (window.$(window).scrollTop() > distanceTop) {
            window.$('#optslidebox').animate({'right': '0px'}, 300);
        } else {
            window.$('#optslidebox').stop(true).animate({'right': '-430px'}, 100);
        }
    });

    /* remove the slidebox when clicking the cross */
    $('#optslidebox.close').bind('click', function () {
        $(this).parent().remove();
    });
};

Your code above doesn't show that class `close` on the `#optslidebox` elem — tymeJV, Jul 06 '15 at 18:20
It's in the appended div as follows:

More in Technology & Science (4 of 23 articles)

The Social Impact of Scientific Research and new Technologies
Read More » — Ao C, Jul 07 '15 at 14:31
Your selector expects `close` to be a class on the `optslidebox` - add a space to make it a child selector: `$('#optslidebox .close')` — tymeJV, Jul 07 '15 at 14:35
Thanks for the response, I'm not sure why the version pasted here didn't have a space, but that was already previously added and didn't have an effect - I was wondering if there's any way to hide the appended div on page load. — Ao C, Jul 08 '15 at 17:55

score 0 · Answer 1 · answered Jul 17 '15 at 16:05

Issue came from the variation code. "Right" was set to "0px" - once this was changed to "-999px" all was good. Here's the final variation code:

    window.scrollBox();
    $("#related-posts").css({"z-index":"1"});
    $("#optslidebox").replaceWith("<div id=\"optslidebox\" style=\"z-index:2; right: -999px;\">\n\t<a class=\"close\"></a>\n\t<p>Recommended</p>\n\t<h2>WHO ARE YOUR FAVORITE RAPPERS' FAVORITE RAPPERS RIGHT NOW?</h2>\n</div>");
    $("#optslidebox > h2").wrapInner("<a href=\"http://greenlabel.com/sound/rappers-who-skate-skaters-who-rap/\"></a>");

Hiding an appended div in Optimizely

The Social Impact of Scientific Research and new Technologies

1 Answers1