Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Feb 2013
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Delayed CSS Popup code help
Hi
PM User | 2
The fat guy next door
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,587
Thanks: 5
Thanked 864 Times in 841 Posts
Well, since you’re using CSS 3 already I guess you could as well work with
transitions . You could set an immediate transition (zero seconds) and a delay of your desire. But it depends on how the popup is opened. If it’s done with JavaScript anyway then using JS for the delay is a no-brainer either.
__________________
Don’t click this link
PM User | 3
Regular Coder
Join Date: Jul 2002
Location: Canada
Posts: 293
Thanks: 0
Thanked 18 Times in 18 Posts
Yes it requires scripting you put the styles in their own style tag:
Code:
<stlyle type="text/css" id="style1" disabled="disabled">
.spu-button {
margin-left:15px;
}
#spu-msg-cont {
border-bottom:1px solid#ccc;
border-top:1px solid#ccc;
background-image:linear-gradient(bottom,#D8E7FC 0%,#EBF2FC 65%);
background-image:-o-linear-gradient(bottom,#D8E7FC 0%,#EBF2FC 65%);
background-image:-moz-linear-gradient(bottom,#D8E7FC 0%,#EBF2FC 65%);
background-image:-webkit-linear-gradient(bottom,#D8E7FC 0%,#EBF2FC 65%);
background-image:-ms-linear-gradient(bottom,#D8E7FC 0%,#EBF2FC 65%);
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#D8E7FC),color-stop(0.85,#EBF2FC));
padding:16px;
}
#spu-msg {
margin:0 0 22px;
}
.step-clear {
clear:both!important;
}
#spu-title {
font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif!important;
font-size:12px;
padding:12px 0 9px 10px;
font-size:16px;
}
</style>
Then in a script You can enable it with:
Code:
document.getElementById('style1').disabled=false;
PM User | 4
New to the CF scene
Join Date: Feb 2013
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Ok sorry for the dumb question herein so what would be the final code below with a delayed time of 20 seconds after popup?
PM User | 5
Regular Coder
Join Date: Jun 2011
Location: CA
Posts: 105
Thanks: 0
Thanked 10 Times in 10 Posts
Give us the HTML so we can see how all the classes and IDs go together on the screen.
PM User | 6
New to the CF scene
Join Date: Feb 2013
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
I have the CSS and .js code or would this work below? It is a wordpress plugin,
But the developer said he can't do it but I don't see why not
PHP Code:
<?php /** class socialPopup { $_options ; $_credits ; $_defaults ; __construct () { add_action ( 'admin_init' , array(& $this , 'register_options' )); add_action ( 'admin_menu' ,array(& $this , 'register_menu' ) ); add_action ( 'init' ,array(& $this , 'load_scripts' ) ); add_action ( 'wp_head' ,array(& $this , 'exec_plugin' ) ); add_action ( 'wp_footer' ,array(& $this , 'print_pop' ) ); $this -> _defaults = array( 'enable' => 'true' , 'facebook' => 'https://www.facebook.com/pages/Timersys/146687622031640' , 'twitter' => 'chifliiiii' , 'google' => '' , 'close' => 'true' , 'close-advanced' => 'true' , 'bg_opacity' => '0.65' , 'days-no-click' => '99' , 'where' => array( 'everywhere' => 'true' ), 'template' => '<div id="spu-title">Please support the site</div> , 'css' => '.spu-button { ); $options = get_option ( 'spu_option' , $this -> _defaults ); $this -> _options = $options ; $defaults = array( 'credits' => 'false' ); $credits = get_option ( 'spu_credit_option' , $defaults ); $this -> _credits = $credits ; //function that register options function register_options () register_setting ( 'spu_options' , 'spu_option' ); register_setting ( 'spu_credit_options' , 'spu_credit_option' ); //function that register the menu link in the settings menu and editor section inside the option page function register_menu () add_options_page ( 'Social PopUP' , 'Social PopUP' , 'manage_options' , 'social-pop-up' ,array(& $this , 'options_page' ) ); add_settings_section ( 'bsbm_forms' , 'Settings' , array(& $this , 'style_box_form' ), 'spu_style_form' ); add_settings_section ( 'spu_support' , 'Support the plugin' , array(& $this , 'spu_support_form' ), 'spu-support' ); //Function that load the scripts function load_scripts () is_admin ()) wp_enqueue_script ( 'spu-fb' , 'http://connect.facebook.net/en_US/all.js#xfbml=1' , array( 'jquery' ), FALSE , FALSE ); wp_enqueue_script ( 'spu-tw' , 'http://platform.twitter.com/widgets.js' , array( 'jquery' ), FALSE , FALSE ); wp_enqueue_script ( 'spu-go' , 'https://apis.google.com/js/plusone.js' , array( 'jquery' ), FALSE , FALSE ); wp_enqueue_script ( 'spu' , plugins_url ( 'spu.js' , __FILE__ ),array( 'jquery' )); wp_enqueue_style ( 'spu-css' , plugins_url ( 'spu.css' , __FILE__ )); //function that display the options page function options_page () ?> <div class="metabox-holder"><?php screen_icon (); echo "<h2>" . __ ( 'Social PopUP' ) . "</h2>" ; ?> <?php do_settings_sections ( 'spu_style_form' ); ?> <?php do_settings_sections ( 'spu-support' ); ?> <? } //function that display the textarea editor form function style_box_form () $options = $this -> _options ; $defaults = $this -> _defaults ; ?> <style type="text/css"><?php settings_fields ( 'spu_options' ); ?> <div class="inside"><div class="intro"><p>Please add settings for the Social PopUP.</p></div> <?PHP if( $options [ 'enable' ] == 'true' ){echo 'selected="selected"' ;} ?> >Enabled</option><?PHP if( $options [ 'enable' ] == 'false' ){echo 'selected="selected"' ;} ?> >Disabled</option><?php echo $options [ 'google' ]; ?> " /><?php echo $options [ 'facebook' ]; ?> " /><?php echo $options [ 'twitter' ]; ?> " /><?php echo isset( $options [ 'template' ]) && $options [ 'template' ] != '' ? $options [ 'template' ] : $defaults [ 'template' ] ; ?> </textarea><?php echo isset( $options [ 'css' ]) && $options [ 'css' ] != '' ? $options [ 'css' ] : $defaults [ 'css' ]; ?> </textarea><?php echo $options [ 'bg_opacity' ]; ?> " /><?php echo isset( $options [ 'where' ][ 'home' ]) && $options [ 'where' ][ 'home' ] == 'true' ? 'checked="checked"' : '' ; ?> /> Home <br/><?php echo isset( $options [ 'where' ][ 'pages' ]) && $options [ 'where' ][ 'pages' ] == 'true' ? 'checked="checked"' : '' ; ?> /> Pages <br/><?php echo isset( $options [ 'where' ][ 'posts' ]) && $options [ 'where' ][ 'posts' ] == 'true' ? 'checked="checked"' : '' ; ?> /> Posts <br/><?php echo isset( $options [ 'where' ][ 'everywhere' ]) && $options [ 'where' ][ 'everywhere' ] == 'true' ? 'checked="checked"' : '' ; $options [ 'where' ][ 'everywhere' ]) ? 'checked="checked"' : '' ; ?> /> Everywhere<br/><?PHP if( $options [ 'close' ] == 'true' ){echo 'selected="selected"' ;} ?> >Yes</option><?PHP if( $options [ 'close' ] == 'false' ){echo 'selected="selected"' ;} ?> >No</option><?PHP if( $options [ 'close-advanced' ] == 'true' ){echo 'selected="selected"' ;} ?> >Enabled</option><?PHP if( $options [ 'close-advanced' ] == 'false' ){echo 'selected="selected"' ;} ?> >Disabled</option><?php echo isset( $options [ 'days-no-click' ]) && $options [ 'days-no-click' ] != '' ? $options [ 'days-no-click' ]: $defaults [ 'days-no-click' ]; ?> " /><?php echo $options [ 'days-no-click' ]; ?> days, click this button to see the popup again.</div><?php if ( get_bloginfo ( 'version' ) >= '3.1' ) { submit_button ( 'Save Changes' , 'secondary' ); } else { echo '<input type="submit" name="submit" id="submit" class="button-secondary" value="Save Changes" />' ; } ?> </div><div style="clear:both;"></div><?php } exec_plugin () $options = $this -> _options ; // Only continue if the pop-up option is enabled... if( $options [ 'enable' ] == 'true' ) //if show everywhere i print script if( isset( $options [ 'where' ][ 'everywhere' ]) && $options [ 'where' ][ 'everywhere' ] == 'true' ) $this -> print_script (); $options [ 'where' ][ 'posts' ]) && $options [ 'where' ][ 'posts' ] == 'true' ) is_single () || is_home () ) $this -> print_script (); $options [ 'where' ][ 'pages' ]) && $options [ 'where' ][ 'pages' ] == 'true' ) is_page () ) $this -> print_script (); $options [ 'where' ][ 'home' ]) && $options [ 'where' ][ 'home' ] == 'true' ) is_front_page () ) $this -> print_script (); // End if enabled } // End main function function print_script () $options = $this -> _options ; $credit = $this -> _credits ; ?> <?php echo $options [ 'css' ]; ?> </style> <?php echo $options [ 'close-advanced' ]; ?> ,<?php echo $options [ 'bg_opacity' ]; ?> ",<?php echo $options [ 'days-no-click' ]; ?> "<?php } //function that prints support part function spu_support_form () $credits = $this -> _credits ; ?> <?php settings_fields ( 'spu_credit_options' ); ?> <p><strong>Click here to add a small link at the bottom of widget</strong><?php echo isset( $credits [ 'credits' ]) && $credits [ 'credits' ] == 'on' ? 'checked="checked"' : '' ; ?> ><?php if ( get_bloginfo ( 'version' ) >= '3.1' ) { submit_button ( 'Save Changes' , 'secondary' ); } else { echo '<input type="submit" name="submit" id="submit" class="button-secondary" value="Save Changes" />' ; } ?> </form> <? } //function that prints pop function print_pop () $options = $this -> _options ; $credits = $this -> _credits ; $socials = array( "google" => '<div class="spu-button spu-google"><div class="g-plusone" data-callback="googleCB" data-action="share" data-annotation="bubble" data-height="24" data-href="' . $options [ 'google' ] . '"></div></div>' , "twitter" => '<div class="spu-button spu-twitter"><a href="https://twitter.com/' . $options [ 'twitter' ] . '" class="twitter-follow-button" data-show-count="false" data-size="large">Follow Me</a></div>' , "facebook" => '<div class="spu-button spu-facebook"><div id="fb-root"></div><fb:like href="' . $options [ 'facebook' ] . '" send="false" show_faces="false" data-layout="button_count"></fb:like></div>' ); $template = $options [ 'template' ]; '<div id="spu-bg"></div> ; $options [ 'close' ] == 'true' ? '<a href="#" onClick="spuFlush(' . $options [ 'days-no-click' ] . ');" id="spu-close">Close</a>' : '' ; $socials as $key => $value ) $template = str_replace ( "{" . $key . "}" , $value , $template ); $template ; $credits [ 'credits' ]) && $credits [ 'credits' ] == 'on' ? '<div id="spu-bottom"><span style="font-size:10px;float: right;margin-top: -6px;">By <a href="http://www.masquewordpress.com">MasqueWordpress.com</a></span></div>' : '' ; '</div>' ; //end of class $social_pop_up = new socialPopup ();
Last edited by VIPStephan; 02-20-2013 at 10:49 PM ..
Reason: added code BB tags
PM User | 7
New to the CF scene
Join Date: Feb 2013
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Code:
(function($) {
$.fn.socialPopUP = function(options) {
var defaults = { days_no_click : "10" };
var options = $.extend(defaults, options);
var cook = readCookie('spushow');
var waitCook = readCookie('spuwait');
if (cook != 'true') {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#spu-main").height();
var popupWidth = $("#spu-main").width();
$("#spu-main").css({
"position": "absolute",
"top": 250,
"left": windowWidth / 2 - popupWidth / 2
});
$("#spu-bg").css({
"height": windowHeight
});
$("#spu-bg").css({
"opacity": defaults.opacity
});
$("#spu-bg").fadeIn("slow");
$("#spu-main").fadeIn("slow");
}
if (defaults.advancedClose == true) {
$(document).keyup(function(e) {
if (e.keyCode == 27) {
spuFlush(defaults.days_no_click);
}
});
$('body').click(function() {
spuFlush(defaults.days_no_click);
});
$('#spu-main').click(function(event) {
event.stopPropagation();
});
}
return true;
};
})(jQuery);
jQuery(document).ready(function(){
FB.Event.subscribe('edge.create', function(href) {
spuFlush();
});
twttr.ready(function(twttr) {
twttr.events.bind('tweet', twitterCB);
twttr.events.bind('follow', twitterCB);
});
});
function twitterCB(intent_event) {
spuFlush();
}
function googleCB() {
spuFlush();
}
function spuFlush( days ) {
days = typeof days !== 'undefined' ? days : 99;
createCookie('spushow', 'true', days);
jQuery("#spu-bg").fadeOut("slow");
jQuery("#spu-main").fadeOut("slow");
}
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
Last edited by VIPStephan; 02-20-2013 at 10:47 PM ..
Reason: added code BB tags
PM User | 8
The fat guy next door
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,587
Thanks: 5
Thanked 864 Times in 841 Posts
If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
__________________
Don’t click this link
PM User | 9
New to the CF scene
Join Date: Feb 2013
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
would this work?
setTimeout( function() {$('#various1').trigger('click'); },20000);
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 07:27 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
