flyer53 / jspanel Goto Github PK

option.id is not working correctly when using a function to generate the id. I'm working on it.

Hi Guys,

First thing Really hats off to you guys to build such a nice panel :)

Currently I am using this version of jspanel 2.3.4
and using that I was facing the below issue : please find the steps below
Step 1) In my application I m using 2 panels.
Step 2) My 1st panel is in minimized state and positioned @rightbottom
Step 3) My 2nd panel is positioned in some other position.
Step 4) now when my 2nd panel give a call to close function, it animates my first panel to @leftBottom automaticlly.

Reason : when it closes any panel then it gives a call to the "reposMinimized" function where it sets the left postion of the minimized state panels
Solution : So what I think is in "reposMinimized" function : we should check i <= minimizedCount instead of i < minimizedCount, since it sets the left postion of the respective panel to 0px if the for loop states from 0.

Please find below the corrected code.
// repositions minimized jsPanels
reposMinimized: function () {
var minimized = $('#jsPanel-min-container > .jsPanel'),
minimizedCount = minimized.length,
i;
for (i = 0; i <= minimizedCount; i += 1) {
minimized.eq(i).animate({
left: (i * jsPanel.widthForMinimized) + 'px'
});
}
},

So in my code I have incoorperate the above changes and it worked :)
Let me know if it contains any other side effect

@Flyer53
I'm experiencing a strange effect. I have a background image and color set on the body. When I open a modal dialog, the backdrop appears and under it I see the body's image and color are gone which makes the rest of the elements on the page look strange. This is with 2.3.3.

Hi,

I paid attention to a curious thing: each time $.jsPanel() is called, it fires an HTTP Request to the server. Like an Ajax call. Doesn't matter which options you use.

It happens also in http://jspanel.de/ examples. If you open firebug and see the console, you'll see HTTP Request/Response trace like: "XHR Loaded (jspanel.de - 200 OK ..."

I'm using it in a project and I'm getting "no sense" HTTP Requests each time jsPanel is called.

Is it normal? Is it necessary?

Regards ;-)

Today I begun work on jsPanel version 2. While I currently dont't have additional features in mind I want to review all the code there currently is and identify things to improve. jsPanel-bootstrap will get the same improvements of course but for now I concentrate on the standard version.

Previews will be available here: http://jspanel.de/beta/api.html

Changes already implemented:

• option.size will not set the size of the jsPanel as a whole but the dimensions of the content div of the jsPanel.
• The header section has a smaller height by default and expands height only when an additional header toolbar is set.

Whoever thinks jsPanel is a useful tool and has ideas how to make it better... tell me!

The links in the panels ajax are not clickable for version 2.4.0

$('#btn3').click(function () {
"use strict";
$.jsPanel({
size: {width: 800, height: 400},
position: {left: "center", top: 10},
theme: "success",
load: {
url: 'ajaxFile.html',
complete: function(response, status, xhr, jsPanel){
//console.log( status );
}
}
});
});

In ajaxFile.html
< a href=" http:// www . domain. com " target="_blank" >lien

I don't have a resize enabled for the modal dialog, and even if I did I would have expected the resize handle icon to be displayed on the right. But in 2.4.0 and 2.4.1 I see a resize handle being shown on the bottom left. I'm expecting it not to be shown.

For version 2.2.0 I started some experiments with iframes as content for a jsPsnel.

My current idea is to have an option.iframe that takes an object with a complete configuration of the iframe:

$.jsPanel({
    size: { width: 1000, height: 700 },
    iframe: {
        srcdoc: "<h1>srcdoc content</h1>",
        src: "http://heute.de",
        name: "myFrame",
        id: "myFrame",
        //width: 1000,
        //height: 700,
        sandbox: "allow-top-navigation",
        style: { "visibility": "visible" },
        seamless: true // not yet supported by any browser
    }
});

This would provide settings for all HTML5 compatible iframe attributes plus styles and results in an iframe appended to the jsPanel content area.

If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).

If option.size is used and the width/height values are !== "auto" this values will be used for the iframe width/height by default unless option.iframe defines other values. So you need to set only option.size properly to have an iframe with the same dimensions.

Thoughts welcome ...

PS: The latest beta has it already: http://jspanel.de/beta/api.html
But there is no documentation yet ...

I'm using jsPanel 2.5.5. I'm using the following properties:

$.jsPanel({
...,
panelstatus: "minimized"
show: false
}

and still the panel shows briefly and then fades out to minimized state. The expected behavior would be not to display it at all, but have it minimized initially.

Is there anyway to disable animation fully?

Thanks

How can I hide the panel (not destroy panel) by click the close button ?
code like this:

            var jspanel = $.jsPanel({
                position: 'center',
                size: { width: 350, height: 180 },
                callback: function (panel) {
                    $('.jsPanel-btn-close', panel).click(function () {
                        panel.hide();
                    });
                }
            });

            var showPanel = function () {
                // Whether the panel is currently hide.
                if (jspanel.isHide()) {
                    // Show the panel again.
                    jspanel.show();
                }
            }

Hi there, been using your plugin, its great, unfortunately, I'm having a problem with it.
I'm doing an AJAX call to a PHP that contains and applet in Java, and so far the data arrives ok to that PHP, but the Applet isn't displayed, any clues to what can be causing it?

Is there anyway in which I can retrieve an panel's current size? I would like my web application to save user's preferences of panels' size into localstorage so users don't have to adjust the panels every visit.

hi Stefan
Do you have advice on how I put in toolbarHeader
The print Button option to print only the jspanel screen

one of the coolest thing about JSPanel is you can attach it to element, this is great specially when using Angularjs, as i can inherit the controller properties because JSPanel is a child of it, but when i do so i cant Maximize the panel to full screen, is there a solution ?

thanks in advanced.

Hey folks,
today I uploaded an Alpha version of a possible jsPanel 3 to http://beta.jspanel.de/ with the following changes ... to list only the most important ones:

• internal use of ES6 Arrow Functions
• internal use of ES6 string templates
• use CSS flexbox for header and footer sections
• new positioning

Positioning: Since jQuery UI core has the method .position() built in anyhow I decided to remove my own positioning functions and use jQuery UI .position() instead.

ES6 and flexbox will require a modern browser of course. As far as I checked the desktop versions of FF and Edge are the only ones working right now.

All in all filesize of jsPanel 3 Alpha is about 40% smaller than jsPanel 2.5.2 and about 90% of the features are working already (not working yet are corners for tooltips and layout export/import for example).
Please visit http://beta.jsPanel.de/api.html and take a look. I updated the API docs but probably missed the one or the other thing.

Feedback welcome :)

Hi,

I successfully put content in my jsPanel (a textarea for example). I am trying to transform my textarea into a tinyMCE rich text editor. I specify a callback fundtion to my jsPanel and try to init a tinyMCE. Init works, but it still displays a textarea instead of the tinyMCE editor...
Any idea why ? Is there any display refresh to perform once a jsPanel is instanciated?Can we manipulate content via normal jQuery selectors or should we always use the methods like content, etc... ?

I updated the beta page again using another pure css3 tooltip. When the intention is only to show a simple text or replace the browser's standard tooltip this seems to be appropriate to me. The css now used in the beta also allows for positioning of the tooltip and there's no need to specify a size as with the one used first.
http://jspanel.de/beta/api.html
I think this is pretty good for the simple cases. Keep the full jsPanel for the cases where you need more than just a simple text...

Recently I keep coming back to the Foundation website. That seems to be a framework that offers a lot more possibilities than bootstrap... with of course some more overhead. Thinking about an additional adaption of jsPanel to Foundation...

i got the error when i try to init the plugin
the error :
Uncaught TypeError: undefined is not a function jquery.jspanel-1.11.0.js:935

the source code :
$(this).first().uniqueId()

& i found that uniqueId() is not support for chrome or firefox ,
how can i fix this problem?~

@devmondo @genachka
I started my first experiments with responsive tooltips and there is a very first example of tooltips shifting left or right when overflowing the window. This first example currently works only as sort of a callback after generating the tooltip:

http://jspanel.de/beta/responsive.html

By default the two buttons generate generate centered tooltips with corners. Now resize the window to a size that makes the tooltips overflow and mouseover again.

Ideas:

• tooltips overflowing to the left shift right (but only if there is no additional overflow to the right)
• tooltips overflowing to the right shift left (but only if there is no additional overflow to the left)
• shifting of tooltips is limited so that they never loose contact to the triggering element
• tooltips overflowing both sides don't shift - in this case, I think, the layout should be changed

What do you think?

Hello Stefan
When I use a tooltip of jspanel that point to element that has href, the href becomes inactive?

I am sending you two examples

1. jspanel tooltip that the href is behave wrong behavior -href is inactive:
   http://www.admin.technion.ac.il/avi/Jspanel.html
2. Qtip2 that behave with normal functions : http://www.admin.technion.ac.il/avi/qtip2.html

Your
Hafner Avi

If you grab a panel and drag it, it is possible to drag it off the side of the page so that the page scrolls to following it, even if you have overflow-x hidden. Can you prevent the panels from being dragged off the page?

Hello,

There seems to be a bug with version 2.5.3.

The $.jsPanel(); function opens 2 files.
For example, example loading table data on your homepage, opens with a click on button Go :

Get : http://jspanel.de/files/summits.html 200 OK 169ms
Get : http://jspanel.de/index.html 200 OK 61ms

The request on the /index.html page is normally useless?

I have the same problem on my pages.
A possible solution?

I do not have this problem with the previous version 2.5.2.

Thanks again!
Mick

Hi Stefan,
Is there any way to resize a panel (which is already appended dom) as if it is created new ?
For the moment I save panel object as data(to dom) and then later trying to use object methods but no success so far. Appreciate any advice.

Regards

console.log not working in IE8

line: 62
line: 1771
line: 1772

Imagine i am loading content using ajax and user click the button again and again , I dont want him to open multiple popup of same content , is it possible to implement that if user click the button again that close the popup window and reopen if clicked again.

Sorry if there's an obvious answer to this, but is there anything built-in that will provide any persistence with regards to open panels, state and positioning? (i.e. the ability to reproduce a the user's last state on page reload ??)

when i open it from min size , i cant find it any more. cause i scroll the web page, i think it should be at the center of the window, not somewhere it was closed at

I'm using jsPanel to show the results of chain of promises in AngularJS project. I want to ask about how to do the chain of promises within the panel? or shall I apply it in the controller and then pass the result to jsPanel?

Thanks!

Hello Stefen

1. When I check the samples pages
   api / examples in ie11 (not happen in firefox).
   Example you can find in page
   http://jspanel.de/api/option/controls
   The result of the Position of jspanel is in the end of the page.
2. Would you please Surround all console.Write with try-catch,
   Quite a few users ie working in mode called compatibility Mode to ie7/8
   I am receiving an error when the Page is loading the script jspanel

Hi

Using version 2.5.2, totally clean project folder, only jspanel installed via bower, using webstorm to serve index.html.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bower_components/jspanel/source/jquery.jspanel.css" />
</head>
<body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/jspanel/source/jquery.jspanel.js"></script>
<script>
    $.jsPanel();
</script>
</body>
</html>

The resize handle appears in the bottom left corner, can initate resize anywhere in footer for first resize, after first resize is completed the footer is no longer renendered and resizing not active.

This occurs in latest versions of IE, Chrome and Firefox.

Attached some screenshots from Firefox.

Regards

Aidan

i tried the last example here
http://jspanel.de/beta/api.html#option-controls

after i minimized the panel, if i want to maximize it again, it does, but not back to the same position.

i have cleared my browser cache.

thanks in advanced.

I have a panel which I'm using with Bootstrap 3 and the toolbarFooter option to add HTML as a string.

If I inject buttons it works great:

But if I add .btn-group-justified to the div containing the buttons in order to stretch them across the bottom of the panel I get very odd behaviour: the right hand edge of the panel gets anchored to the right hand side of the screen and attempting to move the panel results in it resizing horizontally instead as the right hand side stays anchored

Any ideas? Thanks!

I thought I had the minimum example, but for some reason the resize element that should be on the lower right, is on the lower left, and of course doesn't work.

Which javascript file controls that? I'm loading the following in the head, but also tried the body.

//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js
source/jquery.jspanel.js

Hi Stefan,

Thank you for your time and effort for this nice plugin.
My question is, is there any way to disable all css animation (during transition from one state to another e.g opacity change when normalized from minimized state) ?

Best regards,

Can you provide a property to set the status of the panel while creating? say for e.g I want the panel to be in minimized state initially, so instead of calling the minimize() function separately , can we assign at the initial stage of creating of the jspanel?

Hello,

First of all: thanks for the great effort into this plugin. It's being really helpful.

I am working with an iframe inside the panel. In the iframe i have a report which has a great server side processing. I noticed that when i minimize the panel, the iframe gets reloaded, so the processing occurs three times (first for the openning, second for the minimize, third for openning again).

As far as i've seen, this is not a real issue with the plugin, but with how the plugin manage its content.

    movetoMinified: function (panel) {
        // wenn der Container für die minimierten jsPanels noch nicht existiert -> erstellen
        if ($('#jsPanel-min-container').length === 0) {
            $('body').append('<div id="jsPanel-min-container"></div>');
        }
        if (panel.status !== "minimized" || panel.option.panelstatus !== "minimized") {
            // jsPanel in vorgesehenen Container verschieben
            panel.css({
                left: ($('.jsPanel', '#jsPanel-min-container').length * jsPanel.widthForMinimized),
                top: 0,
                opacity: 1
            })
                .appendTo('#jsPanel-min-container') // <--- this seems to be the 'evil'
                .resizable({disabled: true})
                .draggable({disabled: true});
            panel.trigger('jspanelminimized', panel.attr('id'));
            panel.trigger('jspanelstatechange', panel.attr('id'));
        }
    }

Currently i am hacking my way trying to only make a repositioning rather than an DOM manipulation. Would this be ok?

BTW: I'm using content and positioning the iframe inside with an string concatenated. But i could reproduce the problem using the iframe examples of the demos.

Hi! what can I do about this?
file : jquery.jspanel.min.js : [b,b.header,b.content,b.footer].forEach(function(a){c(a)....

I tried many ways, but not able to hide those functions.
Please help ,Thanks!

Hi,

I try to add a button to my footer which will close the jsPanel the same way as the header x button.
For that I implement in the callback of my panel instanciation the following :

var this_panel = $.jsPanel({......

callback: function(){
$('.btn-danger', this_panel).on('click', function (e) {
this_panel.close();
});
.....

But when I open several jsPanel, this closes all the panels, not only the one where the button is clicked.

I am currently using JsPanel 2 . And found that resizable property is not working. In my code I have disabled that property and then if I use some other events say minimize and normalize the jspanel , after that resizing panel works. So can you check this issue in jspanel ?

Nice Job!

First of all, awesome plugin! Thanks!!
I was having issues with position: { top: "auto", rigth: "auto" }. When top = 0, the position object, panelpos was returning {bottom: NaN, right: NaN}, instead of {top: 0, right: 0}

Looking the code, two changes solve my issue:

• including panelpos.top = jsP.option.position.top; after this.calcPos('top', jsP); and
• including panelpos.left = jsP.option.position.left; after this.calcPos('left', jsP);

everything works fine now. is this correct? Or am I missing something.

Panel changes width with initial height decrease/increase when '.ui-resizable-s' is dragged.

Any instruction how to use it on a responsive page?

Extend the default object to include an offset parameter for the maximized window.

The new parameter could be called maximizedOffset and take an object like the current offset parameter.

For instance:

maximizedOffset:{
  top: 95,
  bottom: 40
}

The maximized panel would essentially have an additional top margin of 95 and bottom margin of 40 pixels.

The default settings according to calcPosmaxtoScreen would be:

maximizedOffset:{
  top: 5,
  left: 5
}

A first alpha preview for support of RTL text direction is here:
http://jspanel.de/beta/api.html

Hi,

In the jspanelbeforeclose event, is it possible to cancel the closing of the jsPanel after clicking on the close button?
I want to show a dialog if the user wants to really close the window. If not, the closing must be cancelled.

Thanks

Hello Stefan
How do I delete reference
To jspanel
After some event happening in my page
Thank you and good day

Thanks so much --- This is a really awesome piece of code!! :)

I was wondering if you had any thoughts on resizing the panel as a method after the panel has been created?

if i use, var tp = $.jsPanel();
-and then-
tp.css({'width':'500', 'height':'300'});

The content div has an unresized border until I use the resize control or max or min etc the panel - so it looks like .css wont be an option.

Anyway, just wondering if there is a work around or any plans on adding a resize method? :)

I can provide more detail if needed.

Thanks again,
Jim

hi,
awesome work, is it possible to integrate with bootstrap 3

thanks in advanced.