Creating a Slide Down 'box'

Community Forums Forums Design Tips and Tricks Creating a Slide Down 'box'

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  fox 1 year, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1277

    fox
    Participant
    Post count: 6

    I’m attempting to set up a piece to slide down above the header a couple seconds after someone loads a page, other than home. I’m following the instructions here: http://www.artofblog.com/increase-conversions-with-a-slide-down-optin/

    I’ve entered the code below and it doesn’t slide down, nor am I able to click on the section to close the box. I’m not familiar with jquery so I don’t know if there’s a conflict with something in Genesis or not. Is there something I’m missing? Do I need to call a jquery library other than what’s with WordPress?

    Thanks.

    This is in my function file:

    /** genesis_before_header HOOK **/
    add_action( 'genesis_before_header', 'myFeatureBox' );
    function myFeatureBox () {
    if ( !is_front_page()  ){ ?>
    <div id="feature_box">
    <p>content goes here</p>
    </div>
    <div id="hideOpt">x - No Thanks, close this.</div>
    <?php }
    }
    /** END - genesis_before_header HOOK **/
    // Adds jquery for slide down header
    if ( !is_front_page()  ) {
    wp_enqueue_script( 'custom', get_bloginfo('stylesheet_directory') .'/custom/custom.js', jQuery ,1.0 ,TRUE );
    }

    And I have this in the /custom/custom.js file, taken from the link above.

    /*!
    * jQuery Cookie Plugin
    * https://github.com/carhartl/jquery-cookie
    *
    * Copyright 2011, Klaus Hartl
    * Dual licensed under the MIT or GPL Version 2 licenses.
    * http://www.opensource.org/licenses/mit-license.php
    * http://www.opensource.org/licenses/GPL-2.0
    */
    (function($) {
    $.cookie = function(key, value, options) {
    //
    // key and at least value given, set cookie...
    if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
    options = $.extend({}, options);
    //
    if (value === null || value === undefined) {
    options.expires = -1;
    }
    //
    if (typeof options.expires === 'number') {
    var days = options.expires, t = options.expires = new Date();
    t.setDate(t.getDate() + days);
    }
    //
    value = String(value);
    //
    return (document.cookie = [
    encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
    options.path ? '; path=' + options.path : '',
    options.domain ? '; domain=' + options.domain : '',
    options.secure ? '; secure' : ''
    ].join(''));
    }
    //
    // key and possibly options given, get cookie...
    options = value || {};
    var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
    //
    var pairs = document.cookie.split('; ');
    for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
    if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
    }
    return null;
    };
    })(jQuery);
    //
    jQuery(document).ready(function($) {
    if( $.cookie('first') == null ) {
    $("#feature_box").delay(5000).slideDown("slow");
    }
    $('#hideOpt').click(function(){
    $.cookie( 'first', '1', { expires: 7, path: '/' } );
    $("#feature_box").slideUp("slow");
    });
    });

    • This topic was modified 1 year, 9 months ago by  fox.
    • This topic was modified 1 year, 9 months ago by  fox.
    #1279

    fox
    Participant
    Post count: 6

    Nevermind. I just realized I didn’t save the CSS before. It’s working once the CSS is modified. Doh!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.