Discussion on OpenPanel - Open Responsive Panel Anywhere


SOHN supports this item


29 comments found.

Hi Sohn,

I am thinking of purchasing your OpenPanel plugin and would like to ask a few questions beforehand, to determine whether the plugin is right for me.

1) I would like to use the plugin with AJAX content, where the content will be loaded from the same PHP file but with different parameters, e.g. “file.php?idx=1”, another panel with “file.php?idx=2”, another with “file.php?idx=35” etc. Can the plugin handle this situation?

2) Is it possible to place arbitrary content in a panel that is not formatted using your op-X CSS classes and still keep the responsiveness, including your inline scrollbar? For example, I am using a CSS framework that handles responsiveness using media queries, and would like to place content in the panels using CSS classes from the framework. The question in this example is, when the content is linearized (i.e. breaks up on a smaller screen size) would the OpenPanel plugin become aware of the increase in the height of the content and create its inline scrollbar etc.?

3) I use jQuery 1.10, will OpenPanel work with this? (I think you already mentioned it does in a response to a similar question, but I thought I should check anyway).

Thanks in advance for your response!



1. The AJAX load method in OpenPanel can load content in the same PHP file with different params (panelid) with POST method. However, the url will not be changed when you load AJAX content.

2. Basically, you can customize panel contents with your CSS classes as long as you keep the panel structure and some required classes (these classes are used to control the plugin and do not affect the content style).

3. The OpenPanel plugin works well with jQuery 1.10. I also checked with some older version like 1.7.x, 1.8.x, 1.9.x and I am using 1.11 in the online demo.

Kind regards.

OK, I just bought the plugin :-). I will give it a spin later in the week and let you know how everything goes.


Thank you for purchase.

Kind regards

Hi Sohn,

I have now tried your panel plugin, it was fairly easy to setup and to get it to do what I wanted :). I now have a couple of questions:

(1) I would like to remove the internal scrollbar, how can this be done? You have already answered this in another comment, but would you be able to provide an update as to what needs to be changed now with the current version of OpenPanel (released April 2014, since the line numbers seem to be different)?

(Actually, the internal scrollbar appears like a standard, unstyled scrollbar, which grabs the keyboard, maybe this appearance and behaviour indicates some bug? Anyway, this doesn’t change my question, it’s just a side note.)

(2) Still on the subject of scrolling, I would like to scrollTo a particular position in the panel content, is this possible with your plugin? Maybe if the internal scrollbar is removed it will work. At the moment I call a function to animate scrolling on $(“html”, “document”), but it doesn’t work in the context of your panel.

(3) Another thing, I would like to fadeIn and fadeOut the content in the panel after (or during) sliding transition, what would be the best way of doing this that works well together with your plugin?

(4) Not really a question, just some feedback: I changed the animation speed of the panel sliding in your code from 400 to 800. I think this is something useful to include as an option to OpenPanel in a future release.

Looking forward to your answers :),



When a panel is opened it will overlay the body so if you scroll $(html, body) the panel will not scroll.

I have not tested the feature you want but I think you can use anchor tag to move to parts. i.e: <a href="#part1-id">Part 1</a>. Maybe you can use some CSS effects to make it move smoothly.

Or you can try this way:
You can create a full HTML page where you can use your scroll handler then you can use an iframe to display your HTML page in the panel.

Kind regards.

Thanks, I tried but couldn’t get the scrolling to work :-(

There is another thing though (sorry for all the questions!): I am using ajax (.load()) to get some content that has OpenPanel links. I call openpanel() on a div element once the content loads. But, when I refresh the div content with another load(), and call openpanel() again, the openpanel links in the content no longer work. Looking at your code, I saw that the OpenPanel object is getting stored in the element’s data, but there is no way to destroy it. Getting rid of the check for this actually “fixes” the problem by creating a new OpenPanel object every time the content in my div changes (via ajax), but this is not a proper solution. So I guess the quesion is, how can I destroy the openpanel object? Would you be able to provide a destroy() function? My idea is to be able to do the following during my ajax callback:

{ $(”#my-div”).destroypanel(); // the previous instance $(”#my-div”).openpanel(); // make a new instance }

Maybe there is another way to approach this? Suggestions welcome.

Looking forward to your reply, Skyblue


About the destroy feature, I need time to research and test it. Maybe I will add it in the next update.

Thank you for your idea.

hi, nice plugin! however, i cant ake it run (and im copying and pasting code form the demo page that comes with the zip folder). please help!


Have you included “openpanel.dev.js” or “openpanel.min.js” in your page?

The error usually happen when the page can not find the plugin script.

Kind regards.

yes sir, now it says-based on this code: $(window).load(function(){

enableKeys: true

“undefined is not a function

Please give me your link, I will check it for you.

I need a way to dynamically close and open panel pages – Is there a way for example usually use: $( ”#searchpanel” ).panel( “open”, “animate”, false); I can’t think on how I can do this. Any information would be greatly appreciated Great Plugin!



To call the plugin we have only one way to do at this time, like:


When you want to create a button that is used to open a panel you just add a “op-tab” class for the button and provide “data-panelid” value (e.g: data-panelid=”panelname”).

When the button is clicked a panel (with id=”panelname”) will be displayed.

That is the way we control panels. You do not need to add javascript code for each panel.

If you have more questions, please open a ticket on my support system: http://talk.sonhlab.com

Kind regards.

Thanks for your reply. I’m looking for a way to open a panel page onclick because I’m using dialogs intermittently – When a dialog pops up, depending which button is clicked on, I want to .show the panel that is selected – e.g.. I tried using $(’#searchpanel’).show(); but the panel doesn’t appear. Shouldn’t ’$(’#searchpanel’).openpanel(); do it? If you can post a way to initialize a panel, on click, it would be greatly appreciated. I’ve already spent to much time of this lol

You trying to create a button in your popup that can open a panel when it is clicked?

If yes, you can try to add this script into your popup:

<script type="text/javascript">

Kind regards.

HI SOHN, i’d like to know if it’s possible to use your plugin , but with out overlay the body.

I’d like to keep it inside a div.



OpenPanel plugin shows content in full screen mode only. If you want to load content inside a div you can try to use a Tab Plugin (check my portfolio you may find what you need).

Kind regards.

maybe time for WP version?

Maybe. I am considering it. Regards.

Hello, To open a pop up lightbox as a newsletter, a particular image or other iframe to open a page automatically. Is it possible that a window opens to the page loads? San but we have to click on a link. I would like ca runs the page loads. Do you know how I can do? create a cookie and be able to specify that this popup will open once every 24 hours, for example. thank you

sample code

<!DOCTYPE html>


<!--  START POPUP -->
<!-- chargement de jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- chargement du petit script de cookies, plus de détails à https://github.com/carhartl/jquery-cookie -->
<script type="text/javascript" src="js/Lightbox/jquery.cookie.js"></script> 
<!-- chargement de Lightbox -->
<script type="text/javascript" src="js/Lightbox/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="js/Lightbox/lightbox.css" media="screen" />
<!-- appel de la Lightbox -->
<script type="text/javascript">

    jQuery(document).ready(function($) {
        if($.cookie('the_cookie') != 1) { // Si the_cookie n'a pas pour valeur 1 alors on l'initialise et on joue l'appel de la popup
            $.cookie('the_cookie', '1', { expires: 1 }); // valeur en jour(s) avant expiration du cookie

                    type : 'iframe',
                    href : 'pub.png', // url vers notre page html qui sera chargée dans la popup en mode iframe
                    width: 800,
                    height: 600,
<!--  END POPUP -->


In body :
<a id="popup" style="display:none;"></a>

Hello, Not possible, add a plugin in your javascript cookie? thank you


It is possible, you can add, edit or customize the plugin. However, I don’t have plan to add cookie feature at this time.

Kind regards.


agree, before buying, I would not buy for nothing. that is why I ask you to demo the integrated on a cookie functionality

Kind regards.

Hello I come to you because I’m always interested in your plugin? is this possible? use to open links in popup modal.lightbox type: ‘ajax’ type : ‘iframe’, example I would like to
  • Tutorial
  • then open an Advertising Office ‘image’ while the 24 / 48H cookie? to open a page automatically. Is it possible window will open once every 24 hours, for example

    Thank you


    Sorry, my plugin does not have the feature you need.


    hi,you said that you will add the functionality. on a new project you talking about the cookie feature ?.Regards.


    I have not ready released a new thing at this time. I am working for other projects.


    Hi, I would like to use the panel in a dynamic way, passing a var to the panel as it open. I tried several things but it seem that Ajax only working, from the links inside the panel. In another I would like my opening button from the main page to pass a dynamic var , as i want to insert a form in the first panel that will need that var. hope I’m clear enougth…thanks

    Ok thanks, but i have several forms (or just buttons) in the main page, each with a different value of the var. Session could be possible but it’s not the straighter way of dealing with it. I would have prefer to pass the var to the panel in js


    You can try this way:

    Adding a data-form=”some-value” attribute into each button. Then, you can try to write a Javascript code to get the value of “data-form” when the button is clicked to insert into your form.


    Ok thanks i’ll try that