WordPress.org

Forums

SideOffer
Hide Plugin on Mobile (16 posts)

  1. nelsonq
    Member
    Posted 1 year ago #

    Hi there.

    I really like this plugin! But there's a problem whenever I view with my mobile phone.

    When using a mobile phone, the sideoffer plugin blocks the entire screen of my website.
    Is there a way to hide or disable the plugin whenever it detects the user access via a mobile.

    Really need help on this.

    Thank you.

    Nelson

    https://wordpress.org/plugins/sideoffer/

  2. nebojsab
    Member
    Posted 1 year ago #

    Hi Nelson,

    if you still in doubt how to solve this, take this and place it in your theme stylesheet:

    @media screen and (max-width: 480px) {
        #sideoffer {
            display: none !important;
        }
    }

    Normally you place max-width that suits your needs.

  3. nelsonq
    Member
    Posted 1 year ago #

    Hi nebojsab,

    when I try to view from my mobile, it is still covering my entire page.
    Is it possible to remove it entirely when view as mobile?

    To see what I mean, go to both http://avernordesign.com/designs/halcyon/ and http://avernordesign.com/designs/quirky/ using a mobile phone.

  4. GraphicToronto
    Member
    Posted 1 year ago #

    hey nelsonq,

    you need to place the css into the sideoffer.php file thats located in /wp-content/plugins/sideoffer on your wordpress installation. you'll then scroll down to where it says CSS styles or something like that and paste the code you have above just before the line "</styles>"

    hope this helps.

  5. nelsonq
    Member
    Posted 1 year ago #

    Hi, this is what I did. But it doesn't seem to be working.

    <?php
    /*
    Plugin Name: SideOffer
    Plugin URI: http://www.heavydigital.net/plugins/sideoffer/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer
    Description: <a href="http://www.heavydigital.net/plugins/sideoffer/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer" target="_blank">SideOffer</a> is a pop-out content slider, designed to increase conversions by allowing you to present your users with highly visible calls to action. You could collect emails for your newsletter, offer a free download or make your contact form persistant. Features include an easy and interactive setup, custom graphics (PSD Source included) and the integration of a "sideoffer" class, allowing users to trigger the slider via anchor link.
    Version: 1.0.2
    Author: Heavy Digital
    Author URI: http://www.HeavyDigital.net/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer
    */
    
    // Defaults
    define( 'HD_PUGIN_NAME', 'SideOffer');
    define( 'HD_PLUGIN_DIRECTORY', 'sideoffer');
    define( 'HD_CURRENT_VERSION', '1.0.2' );
    
    // Admin Page
    require_once('sideoffer-options.php');
    
    // create custom plugin settings menu
    add_action( 'admin_menu', 'hd_create_menu' );
    
    //call register settings function
    add_action( 'admin_init', 'hd_register_settings' );
    
    register_activation_hook(__FILE__, 'hd_activate');
    register_deactivation_hook(__FILE__, 'hd_deactivate');
    register_uninstall_hook(__FILE__, 'hd_uninstall');
    
    // activating the default values
    function hd_activate() {
    	// Set Default Values
    	add_option('hd_sideoffer_mode','setup');
    	add_option('hd_sideoffer_title','<h2>Sign Up Today!</h2>');
    	add_option('hd_sideoffer_content',"Create your SideOffer content and place it here.\n\nYou can use text, HTML and [shortcodes]\n\nThis plugin is a great companion to Contact Form 7!");
    	add_option('hd_sideoffer_bg',plugins_url( 'images/sideoffer-bg.png',  __FILE__ ));
    	add_option('hd_sideoffer_color_text','#ffffff');
    	add_option('hd_sideoffer_side','right');
    	add_option('hd_sideoffer_top','120');
    	add_option('hd_sideoffer_in','-510');
    	add_option('hd_sideoffer_out','-50');
    	add_option('hd_sideoffer_width','600');
    	add_option('hd_sideoffer_height','600');
    }
    
    // deactivating
    function hd_deactivate() {
    
    }
    
    // uninstalling
    function hd_uninstall() {
    	# delete all data stored
    	delete_option('hd_sideoffer_mode');
    	delete_option('hd_sideoffer_title');
    	delete_option('hd_sideoffer_content');
    	delete_option('hd_sideoffer_bg');
    	delete_option('hd_sideoffer_color_text');
    	delete_option('hd_sideoffer_side');
    	delete_option('hd_sideoffer_top');
    	delete_option('hd_sideoffer_in');
    	delete_option('hd_sideoffer_out');
    	delete_option('hd_sideoffer_width');
    	delete_option('hd_sideoffer_height');
    }
    
    function hd_create_menu() {
    
    	// create new top-level menu
    	add_menu_page(
    	HD_PUGIN_NAME,
    	HD_PUGIN_NAME,
    	'manage_options',
    	'sideoffer',
    	'sideoffer_options',
    	plugins_url('/images/icon-hd.png', __FILE__));
    
    	add_submenu_page(
    	'sideoffer',
    	HD_PUGIN_NAME,
    	HD_PUGIN_NAME,
    	'manage_options',
    	'sideoffer',
    	'sideoffer_options'
    	);
    
    }
    
    // Add settings link on plugin page
    add_filter("plugin_action_links_".plugin_basename(__FILE__), 'hd_sideoffer_settings_link' );
    function hd_sideoffer_settings_link($links) {
      $settings_link = '<a href="admin.php?page=sideoffer">Settings</a>';
      array_unshift($links, $settings_link);
      return $links;
    }
    
    // Register settings
    function hd_register_settings() {
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_mode' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_title' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_content' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_bg');
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_color_text');
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_side' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_top' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_in' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_out' );
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_width');
    	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_height');
    }
    
    /* Enqueue Admin Scripts */
    add_action('admin_print_scripts', 'hd_sideoffer_admin_scripts');
    function hd_sideoffer_admin_scripts() {
    	wp_enqueue_script('jquery');
      	wp_enqueue_script( 'farbtastic' );
    	wp_enqueue_script('media-upload');
    	wp_enqueue_script('thickbox');
    }
    
    add_action('admin_print_styles', 'hd_sideoffer_admin_styles');
    function hd_sideoffer_admin_styles() {
    	wp_enqueue_style( 'farbtastic' );
    	wp_enqueue_style('thickbox');
    }
    
    add_action('admin_head-toplevel_page_sideoffer','hd_sideoffer_css');
    /* End Enqueue Admin Scripts */
    
    /*** SideOffer Offer Code ***/
    if (get_option('hd_sideoffer_mode')!="setup") add_action('wp_footer','hd_sideoffer',100);
    add_action('admin_head-toplevel_page_sideoffer','hd_sideoffer');
    function hd_sideoffer() {
    	?>
        <!-- SideOffer -->
    	<script type="text/javascript">
    	jQuery(document).ready(function($) {
    		/* SideOffer Sidebar Functionality */
    		$("#sideoffer").toggle(
    			function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
    			function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
    		);
    
    		/* SideOffer .hd-sideoffer click function */
    		$(".sideoffer").click(function(){ $("#sideoffer").click(); });
    		/* SideOffer aLlow clicks on content box */
    		$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
    	});
    	</script>
    	<div id="sideoffer">
    	<div class="box">
    	<?php echo get_option('hd_sideoffer_title'); ?>
        <?php echo do_shortcode(get_option('hd_sideoffer_content')); ?>
    	</div><!-- End .box  -->
    	</div><!-- End #sideoffer -->
        <!-- End SideOffer -->
        <?php
    }
    
    /*** SideOffer JS  ***
    Enqueue JavaScript )jQuery)
    Since 1.0.2
    ***/
    add_action('wp_head','hd_sideoffer_js',100);
    function hd_sideoffer_js() {
    	wp_enqueue_script('jquery');
    }
    
    /*** SideOffer CSS ***/
    // Enqueue CSS
    add_action('wp_head','hd_sideoffer_css',100);
    function hd_sideoffer_css() {
    	?>
        <!-- SideOffer [HD] CSS -->
    	<style type="text/css">
    	#sideoffer {
    		background: url('<?php echo get_option('hd_sideoffer_bg'); ?>') top left no-repeat;
    		width:<?php echo get_option('hd_sideoffer_width'); ?>px;
    		height:<?php echo get_option('hd_sideoffer_height'); ?>px;
    		position:fixed;
    		top:<?php echo get_option('hd_sideoffer_top'); ?>px;
    		<?php echo "right"; //get_option('hd_sideoffer_side'); ?>: <?php echo get_option('hd_sideoffer_in'); ?>px;
    		text-transform: none;
    		z-index:99999;
    	}
    	#sideoffer .box { position: absolute; right:0; width: 78%; padding: 15px 10px; color: <?php echo get_option('hd_sideoffer_color_text'); ?>; }
    	#sideoffer p { margin-bottom: 5px !important; }
    
     <!-- This is what I add -->
    	@media screen and (max-width: 280px) {
        #sideoffer {
            display: none !important;
        }
    }
    
    	</style>
        <!-- End SideOffer [HD] CSS -->
        <?php
    }
  6. GraphicToronto
    Member
    Posted 1 year ago #

    try changing the max-width to 500px, 280 is pretty small even for a mobile device. PS. you don't have to use a mobile device to test this out, you can just re-size your browser window to smaller than 500px width.

  7. GraphicToronto
    Member
    Posted 1 year ago #

    i also took a look at your halcyon design, very nice e-commerce design there bud. one problem i noticed was the iframe in the location widget at the bottom, on resizing it overlaps the widget next to it. you should add a margin to that frame to prevent this. so something like this

    .the-widget iframe {
    margin: 0 20px;
    }

    or

    .the-widget iframe {
    padding: 0 20px;
    }

    just a suggestion, keep up the good work!

  8. nebojsab
    Member
    Posted 1 year ago #

    Have you tried with style i posted?

    @media screen and (max-width: 480px) {
        #sideoffer {
            display: none !important;
        }
    }

    I'm looking at your site, and i can't see this setting anywhere? This peace of code placed in your theme style sheet will completely remove sideoffer from browser view.

  9. nelsonq
    Member
    Posted 1 year ago #

    I got it working now! Thank you so much! @nebojsab @GraphicToronto :)

  10. fouldsy99
    Member
    Posted 1 year ago #

    I am having the same problem with removing sideoffer from mobile viewing.

    I have placed the code below into my theme's style.css but still hasn't been removed.

    @media screen and (max-width: 480px) {
        #sideoffer {
            display: none !important;
        }
    }

    My website is: World in Sport

  11. GraphicToronto
    Member
    Posted 1 year ago #

    you need to place the css into the sideoffer.php file thats located in /wp-content/plugins/sideoffer on your wordpress installation. you'll then scroll down to where it says SideOffer CSS paste the code you have above just before the line "</styles>", see below...

    /*** SideOffer CSS ***/
    // Enqueue CSS
    add_action('wp_head','hd_sideoffer_css',100);
    function hd_sideoffer_css() {
    ?>
    <!-- SideOffer [HD] CSS -->
    <style type="text/css">
    #sideoffer {
    background: url('<?php echo get_option('hd_sideoffer_bg'); ?>') top left no-repeat;
    width:<?php echo get_option('hd_sideoffer_width'); ?>px;
    height:<?php echo get_option('hd_sideoffer_height'); ?>px;
    position:fixed;
    top:<?php echo get_option('hd_sideoffer_top'); ?>px;
    <?php echo "right"; //get_option('hd_sideoffer_side'); ?>: <?php echo get_option('hd_sideoffer_in'); ?>px;
    text-transform: none;
    z-index:99999;
    }
    #sideoffer .box { position: absolute; right:0; width: 78%; padding: 15px 10px; color: <?php echo get_option('hd_sideoffer_color_text'); ?>; }
    #sideoffer p { margin-bottom: 5px !important; }

    <!-- THIS IS WHAT YOU NEED TO ADD -->
    @media screen and (max-width: 480px) {
    #sideoffer {display: none;}
    }

  12. nebojsab
    Member
    Posted 1 year ago #

    @fouldsy99

    as I see, it's all working as it should. If I resize browser to less than 480px, sideoffer DIV is disabled. Maybe you need to set that max-width a bit wider.

  13. fouldsy99
    Member
    Posted 1 year ago #

    Many thanks, worked a treat!

  14. GraphicToronto
    Member
    Posted 1 year ago #

    no worries! i generally set my mobile theme to respond at 480px, if you set it any larger you'll risk not showing the side offer tab on other devices such as smaller tablets. anyways, glad it worked for you!

  15. GraphicToronto
    Member
    Posted 1 year ago #

    we love this plugin at graphictoronto.com but we do think it needs some support for mobile browsers!

  16. Nixonsupercool
    Member
    Posted 11 months ago #

    Hi nelsonq, I liked the design of your side offer. Please can you give me the code of that so that I can re use it instead of going for a new design.

    Thanks in advance,
    Nixon

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • SideOffer
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic