Community Forums › Forums › Archived Forums › Design Tips and Tricks › Creating a Slide Down 'box'
- This topic has 1 reply, 1 voice, and was last updated 11 years, 3 months ago by fox.
-
AuthorPosts
-
November 22, 2012 at 9:59 am #1277foxMember
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");
});
});November 22, 2012 at 10:11 am #1279foxMemberNevermind. I just realized I didn't save the CSS before. It's working once the CSS is modified. Doh!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.