Recent Topics

jQuery script For Corner Popup Window - help

Started by on Sep 15, 2015 – Contents updated: Jan 03, 2016

Sep 15, 2015 19:36    

Hi,

Do you know if there is any plugin that could generate a popup window in the bottom right corner of the screen where I should include my own code (email subscription for example from feedburner)?
I'm looking for something like the popup window (at scroll down) from this demo: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Corner-Popup-While-Scrolling-cornerSlider/

I tried to build it myself, but I don't manage to make it work.

The steps are described here: http://www.jqueryscript.net/other/jQuery-Plugin-For-Corner-Popup-While-Scrolling-cornerSlider.html

I managed to create a plugin to insert the code from steps 1 and 3 into the <head> tags, but I don't know how/where to insert the code from steps 2 and 4.
I thinking to insert the code from step 4 also in the <head>, but I don't think is a good idea.

Any help would be appreciated. I have a 4.1.7 installation which I plan to upgrade in the future, but know is not possible.

This is the plugin I've created to insert the code from steps 1 and 3 into the <head> tags:


<?php

if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );


/**
* PLUGIN_NAME Email_Subscription_Corner_Popup
*
* @package plugins
*/
class email_subscription_corner_popup_plugin extends Plugin
{
/**
* Variables below MUST be overriden by plugin implementations,
* either in the subclass declaration or in the subclass constructor.
*/
var $name = 'Email Subscription Corner Popup';
/**
* Code, if this is a renderer or pingback plugin.
*/
var $code = 'email_subscription_corner_popup';
var $priority = 10;
var $version = '1.0';
var $author = 'BB';
var $help_url = 'http://www.jqueryscript.net/other/jQuery-Plugin-For-Corner-Popup-While-Scrolling-cornerSlider.html';
var $number_of_installs = 1;

var $apply_rendering = 'never';
var $group = 'ME';


function PluginVersionChanged( & $params )
{
if ( $params['old_version'] != $this->version )
{
return true;
}
else
{
return false;
}
}

/**
* Init
*
* This gets called after a plugin has been registered/instantiated.
*/
function PluginInit( & $params )
{
$this->short_desc = $this->T_('b2evolution plugin for Email Subscription Corner Popup');
$this->long_desc = $this->T_('Plugin created to better suggest users to subscribe to email)');
}

/**
* Define settings that the plugin uses/provides.
*/

function GetDefaultSettings()
{
return array(

'popup_window_height' => array(
'label' => $this->T_('Popup window height (px)'),
'type' => 'text',
'size' => 25,
'maxlength' => 200,
'note' => $this->T_('Ex: "119"'),
),

'popup_window_width' => array(
'label' => $this->T_('Popup window width (px)'),
'type' => 'text',
'size' => 25,
'maxlength' => 200,
'note' => $this->T_('Ex: "269"'),
),

'border_color' => array(
'label' => $this->T_('Border color'),
'type' => 'text',
'size' => 25,
'maxlength' => 200,
'note' => $this->T_('Ex: "#b3b3b3"'),
),

'background_color' => array(
'label' => $this->T_('Background color'),
'type' => 'text',
'size' => 25,
'maxlength' => 200,
'note' => $this->T_('Ex: "#34BC9D'),
),

);
}


/**
* Head text
*/
function SkinBeginHtmlHead()
{
echo "

<!-- Begin Email Subscription Corner Popup plugin -->

<script src=\"//code.jquery.com/jquery-1.11.2.min.js\"></script>
<script src=\"/plugins/email_subscription_corner_popup_plugin/src/jquery.cornerslider.js\"></script>

<style>
#corner-slider {
position: fixed;
z-index: 10000;
overflow: hidden;
/*Change to your own dimensions*/
height: " . $this->Settings->get( 'popup_window_height') . "px;
width: " . $this->Settings->get( 'popup_window_width') . "px;
/*Change to your own colors*/
border: 1px solid " . $this->Settings->get( 'border_color') . ";
background: " . $this->Settings->get( 'background_color') . ";
}

#corner-slider.hidden { display: none; }

#corner-slider .close {
position: absolute;
cursor: pointer;
font-size: 16px;
display: inline-block;
z-index: 1002;
/*Change here the close button position*/
right: 24px;
top: 18px;
color: #fff;
}
</style>

<!-- End Email Subscription Corner Popup plugin -->
";
}

/**
* Define user settings that the plugin uses/provides.
*/
function GetDefaultUserSettings()
{
return array(

);
}


} // end Plugin class
?>

Thanks in advance,
Bogdan

Sep 16, 2015 00:24

@bogdan_benn2000 there is a major issue with this. Your current version of b2evolution runs jQuery 1.6.2 by default and the plugin you're trying to use doesn't work with that version (http://jsfiddle.net/g9eoompa/ - try different 1.11.0 to see the working example).

I realized that just after making a fully functional copy of your plugin for the current stable version 6.6.3. Anyways, you can find it attached to this comment.

In theory, if you find a safe way to upgrade only the jQuery version of your site (I seriously doubt it can be done), the plugin might work.

Regards!


Attachments:

Sep 16, 2015 13:56

Hi mgsolipa,

Thanks a lot for your answer.
I tried your plugin and indeed it does not work :(

I tried to view the source of the page and I cannot see anywhere inserted the <div id="corner-slider"><div class="close">X</div> section.

I see that the plugin has the following code, so it should also be displayed on the page:


function SkinTag( $params )
{
echo '<div id="corner-slider"><div class="close">X</div>'.$params['slider_content'].'</div>';
}

Is it because jQuery version that my instalation is using?

Regards,
Bogdan

Sep 16, 2015 21:17

All right, I didn't mention that the plugin works as a widget, so you need to install the plugin and add the widget to any of the containers of your collections in order to get the code displayed at the front-office.

Sadly, as I said you before, the jquery.cornerslide.js plugin requires a higher version of jquery than the one you're running in your site right now.


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.