stephanwagner/jbox

jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jbox's Issues

Positioning problem

Hi there,

I have the following issue:
The modal jBox is not positioning correct. There is no negative margin cu center it. The code I use:

    $(function() {
        $('.dct-class').each(function(){
            var $modal = new jBox('Modal', {
                attach: $(this),
                content: $(this).data('dct-content')
            });
        });
    });

Thanks,
Radu

Unique ID generation

See #6

CSS added for each jBox

For each call to new jBox('Image'), this is added to the head section:

<style>
@-webkit-keyframes jBox-animation-zoomOutOpen-open {0% {-webkit-transform:scale(1.1);}100% {-webkit-transform:scale(1);}}.jBox-animation-zoomOutOpen-open {-webkit-animation-duration: 180ms;-webkit-animation-name: jBox-animation-zoomOutOpen-open;}@-webkit-keyframes jBox-animation-zoomOutClose-close {0% {-webkit-transform:scale(1);}100% {-webkit-transform:scale(1.1);}}.jBox-animation-zoomOutClose-close {-webkit-animation-duration: 180ms;-webkit-animation-name: jBox-animation-zoomOutClose-close;}
</style>

I guess the performance could be better, if this would be added just once.

Responsive image galleries

Image galleries should be responsive out of the box?
Or is it just an demo page issue?

when i use id .....

new jBox('Notice', {
id: 'infoshow',
color: 'blue',
stack: true,
autoClose: 5000,
content: text,
audio: '/audio/timeup',
volume: 100,
animation: { open: 'tada', close: 'slide:top' },
});

it not i want......you can try it

BUT!!! when i use it

new jBox('Notice', {
//id: 'infoshow',
color: 'blue',
stack: true,
autoClose: 5000,
content: text,
audio: '/audio/timeup',
volume: 100,
animation: { open: 'tada', close: 'slide:top' },
});

it will i want ↑

my code is right ????

Tooltip changing parent page style

Hi,
An ajax loaded html file overlays the main page style.
in an example from case #19 , lets make the main page style:

<style type="text/css"> body { color:blue; } </style>

Lets say ajax loaded html file style is:

<style type="text/css"> body { color:black; } </style>

Now, when main page starts, the body color is blue, but once tooltip runs then main page color changes to black.

How do you prevent tooltip from changing main page style ?

Thanks

Draggable not working on touch devices

Draggable examples are not working on touch devices (tested on iOS 8)

Adding Tooltip To Future DOM Elements

I'm using jQuery and in my document ready code, I have:

$('[title]').jBox('Tooltip');

This works for all existing elements that have a 'title' attribute, however, subsequent elements that I add to the DOM don't get a jBox tooltip. They render as the regular browser's tooltip.

I tried changing the code to:

$(document).on('mouseover', '[title]', function(){ $(this).jBox('Tooltip'); });

and it sorta works. The jBox tooltips show for any element on the page, however, they do not show on the first mouseover event! They only show after the mouse has passed over the elements at least once. I'm suspecting that is happening because the jBox tooltip isn't created on the first mouseover but is there on subsequent events. i've tried to use the option "constructOnInit" set to true but it did not make a difference.

How can I get all elements having a "title" attribute, both present and future ones, to use jBox?

TIA

adaptive size on mobile device

Hi.
Help me please.
I have normal modal window on pc

but it's not resize on mobile

how i can fix it?
Thx

use in socket.io

socket.emit('test','123', function (callback) {
if (callback == 'OK') {
new jBox('Notice', {
id: 'infoshow',
color: 'blue',
stack: true,
autoClose: 5000,
content: text,
audio: '/audio/timeup',
volume: 100,
animation: { open: 'tada', close: 'slide:top' },
});
};
});

it's work
but not have wave in my ipad2 (ios8)

but i put the code in button click event

button click use the code

new jBox('Notice', {
id: 'infoshow',
color: 'blue',
stack: true,
autoClose: 5000,
content: text,
audio: '/audio/timeup',
volume: 100,
animation: { open: 'tada', close: 'slide:top' },
});

it work and have wave

WHY???

Confirm not posting form

I am not sure if there is something I am missing but I am unable to post the form after confirm submit is pressed here is my code:

var DeleteAccConfirm = new jBox('Confirm', {

confirmButton: 'Yes Delete Account',
cancelButton: 'Hell No My Bad',
maxWidth: 450,
maxHeight: 550,
addClass: 'jBoxDelete',
reposition: true,
setContent: true,
animation: ({
    open: 'slide:bottom',
    close: 'slide:bottom'
}),
confirm: function(){
    $('#delete-account-form').submit();
}

});

(function($confirmdeleteacc){
$confirmdeleteacc.submit(function() {
DeleteAccConfirm.open();
});
})($('#delete-account-form'));

Feature detection instead of browser sniffing ?

Hello Stephan,

This is a very impressive plugin, i just had some time today, this is not really an issue , but you have the following lines in your code :

// I know browser detection is bad practice, but for now it seems the only option to get jBox working in IE8
var userAgent = navigator.userAgent.toLowerCase();
this.IE8 = userAgent.indexOf('msie') != -1 && parseInt(userAgent.split('msie')[1]) == 8;

why don't you replace this with feature detection I.E. to check if a browser supports a certain property or not ? This is just a suggestion. Although your approach is much more straightforward, its know to be not so full proof . Feature detection on the other hand is much more accurate. What do you think ?

The line of code i am talking about can be found here https://github.com/StephanWagner/jBox/blob/master/Source/jBox.js#L445

i18n problem

Hi Stephan,

great work on jBox! I have a quick question about it.
I need the tooltips to show a specific text for each tooltip. The text is placed in a separate json file.

In the HTML the contents of the language file are called this way:

There can be different tooltips an a single page.
How can I modify this to work?

Thanks a lot in advance!

Closing icon

Make the opportunity to set closing-icon image.

content jumping on modal window show/hide

When showing modal window scrolling should be disabled, but scroll bar still should be visible.
It will prevent content jumping.

Have confirm jBox not closing when confirm function return false

This is not a bug, rather a feature request.
Using a little form in a confirm Jbox, I'd like the confirm function not to close the jBox if some check in the function returns false. Any good ?

jBox dynamic height

I am attempting to set the height of the jBox-content div dynamically using another function. It is working correctly onresize and onscroll, but not onload. I can't understand why not. My code is:

<script type="text/javascript">  
$(document).ready(function() {
new jBox('Modal', {
    width: 800,
    adjustPosition: true,
    adjustTracker: true,
    attach: $('#infoTypeManually'),
    title: '<strong>Type Data Manually Information:</strong>',
    getContent: 'data-jbox-content'
});
});
</script>

<script type="text/javascript">
$(window).on('load resize scroll', function(){
   var wH = $(window).height()-160;
   $('.jBox-content').css({'height': wH});
});
</script>

Can anyone see what I am doing wrong?

Thanks

Chris

incorrect positioning when viewport enabled

Tooltip opens on fixed position when viewport enabled

can i put a form in notice type jbox?

Default value is 'auto' lacks side-bug?

WARNING - Suspicious code. This code lacks side-bug?

// Default value is 'auto'
val == undefined && (val == 'auto');

IE8 Modal windows createElementNS

Hi,

I've just discovered your plugin, it's really usefull thank you !
However I got a problem with IE8 when you launch a modal, it throws an error about createElementNS.
The problem is just when you call a modal, tooltips and notices are working well.

Any idea ?

How to use in iframe?

How to use in iframe?

Little Box

For some reason a little box gets stuck occasionally in the upper left when I call close on my box instance.

Exception occured ,not support on attribute

sorry my english ，I am Chinese

Line Number：767
Source code:el.on(trigger + '.jBox-attach-' + this.id, function(ev)

I use it like this：$("a[title]").jBox("Tooltip");

can i don't close the window when click overlay on `Confirm` model?

demo: http://jsfiddle.net/hacrmgef/2/

new jBox('Confirm', {
    attach: $('.delFs'),
    width: 300,
    title: 'remove bound',
    overlay: true,
    content: $('#delConnContainer')
});

use Confirm ask sb. whether to do sth., i am don't expect close the window when sb. click the overlay,here provide a option cancel the behaviour?

can't dynamicly create modal box from example

var myModal = new jBox('Modal');

myModal.setTitle('My Title');
myModal.setContent('My Content');
myModal.open();

doesn't work
need to move up line !this.wrapper && this._create(); in function setTitle before var wrapperHeight = this.wrapper.height(), wrapperWidth = this.wrapper.width();

Open modal after ajax-request complite.

How i can show my modal only after i get content from ajax&? it's need to correct work open's animation effect

Stop closing on mouseleave when it's hovered again

It would be very useful as a popover with some UI elements,
if an accidental short mouseleave, as well as having an offset,
would not close the popover (which makes it useless).

Won't close without close button on touch device

hello, I have an issue here, i can't close the modalbox without a close button on touch device. Maybe you want to add some? for an example on your gallery. :)

Running into issues using jBox with event delegation

I'm trying to set up jBox to work with event delegation so the tooltips are "lazy loaded" / only init'd when the user goes to use them.

So far I have this jsfiddle, which partially works, but I noticed two things that seemed odd.

On the first mouseover event of a tooltip item, the tooltip does not display, on any mousever event afterwards, the tooltip displays fine.

Is there a way to have a tooltip display immediately when used inside of a event handler like I've got set up in the jsfiddle on the first mouseover event?

Second, I noticed that each time I hover over a item that has a tooltip, a new tooltip is created. This is probably related to how I have the event handler set up, but was wondering if there is some option not to create multiple instances in this case.

can not scroll the multiple choice select element through mouse wheel on popup window

can not scroll the multiple choice select element through mouse wheel and touch pad on popup window.

only can use the left mouse button
mac 10.10.2 chrome 42.0.2311.90 (64-bit)

see http://jsfiddle.net/mbzg79ke/1/

onCreated fired before elements available in DOM

Using Chromium Version 39.0.2171.65 and Firefox 34 on Ubuntu 14.04 (64-bit).

I have a callback set with the onCreated option. I put a breakpoint in my callback to debug why the code wasn't working. When I debug, a div with an id starting with "jBox" is not available.

The source says onCreated is fired "Triggered when jBox is created and is availible in DOM"

This isn't the case. On both browsers the jBox div isn't in the DOM when onCreated is fired.

on chrome, click multi on content box -> close box. Please fix.

Adding a class selector to property of Image instance

Hi there, great plugin, btw! Question for you, Is the best way to add responsiveness to the galleries would be to add the addClass property which you listed in the documentation?

I have a gaggle of images and when one is clicked you'd go to your gallery and i'd like that container to be responsive http://antonio-p-ortiz.com/work/

I have tried:

new jBox('Image', {
width: 500,
height: 500,
imageFade:2000,
animation: 'slide',
addClass: '.jBox-image-container'
});

.jBox-image-container{ //
max-width: 100% !important;
height: auto!important;
display: block!important;
margin: 0px auto!important;
}

Or is there another way which is simpler which I have overlooked...?

Thanks so much!

Confirm type: option target doesn't work

I expected confirm modal dialog to be near the 'target', but it is actually in the center of the screen.
Here some code:

$(this).jBox('Confirm', {
confirmButton: 'Remove',
cancelButton: 'Cancel',
target: $('#chart1'),
confirm: function() {
chart.remove();
}
});

Fixed Tooltip not at correct position after page scroll

As the title says - if I scroll the page, the fixed tooltip which is also opened from fixed block, is not opened at the correct position. It doesn't have correct top position. See the issue here http://jsfiddle.net/igrynsh/L5nn42o7/3/

Bower support?

Have you considered making this a bower package? I can send in a PR if you want.

See http://bower.io/#defining-a-package

The audio file will lag in other

the audio file recommend push first

because in Ipad and HTC phone the view is show on fast but audio is last(1s)

in the PC is Very Good

But i recommend push first => .play();
for the use other os user

not working if an image has a space in name

need to add quote in function appendImage in css rule

                    }).css({
                        backgroundImage: 'url("' + this.images[gallery][id].src + '")',

duplicate notice in a page

I want to show message box to user1 when message is emit from the user2 in node project.
The data (one or more) is emitted. That data is push into an array. The data is shown to the user1 in FIFO. The function which creates jbox object is call and call again til the array is empty.
I don't want to show second data if first data is not check and click one of the button.
I thought it is okay in local. But when I push the project on the heroku server and test the app, the message box are duplicated.
Can you help me to solve the problem. This is urgent.

Sometimes function "confirm" called twice

Sorry about my English)

I use jBox.Confirm as a wrapper for a quick editor grid. When I do a double click on the field, created jBox.Confirm: http://screencloud.net/v/5Xe0. I push "Submit (Обновить)" then I do a double click on another field: http://screencloud.net/v/ligY. Sometimes function "confirm" called twice after push "Submit".

Please help. Thank you.

recalculate coordinates after changing target position

How I can to force modal window to recalculate coordinates after changing target position (for example after scrolling). As I see "repositionOnOpen" option make this, but I can't get it to work.

Fallback if opts.attach.selector is empty

See #5

Dynamic ajax request impossible

I would load content dynamic. But i can't set the ajax dynamic.

jbox_tag = new jBox('Modal', {
        position: {
            x: 'left',
            y: 'top'
        },
        offset: {
            y: 25
        }
    });

    $('.addtag').click(function (e) {
        e.preventDefault();
        jbox_tag.open({
            ajax: {
                url: this.href,
                reload: true,
                type: 'GET'
            },
            target: $('.addtag')
        });
    });

This opens a empty box. No request was triggered.

jbox_tag.ajax({
        url: this.href,
        reload: true,
    type: 'GET'
});

Result: crash this.wrapper unknown object.

Allow adjustPosition "move" without having a pointer

I don't understand, why that "pointer" is needed for the reposition,
it's just a picture!
How can having the picture of an arrow relate to a capability of a program?

Closure compiler warnings

http://closure-compiler.appspot.com/home

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js
// @code_url https://raw.githubusercontent.com/StephanWagner/jBox/master/Source/jBox.js
// ==/ClosureCompiler==

Warnings:

JSC_USELESS_CODE: Suspicious code. This code lacks side-effects. Is there a bug? at line 1189 character 2 in jBox.js
        val == undefined && (val == 'auto');
        ^
JSC_USELESS_CODE: Suspicious code. The result of the 'eq' operator is not being used. at line 1189 character 23 in jBox.js
        val == undefined && (val == 'auto');
                             ^
JSC_USELESS_CODE: Suspicious code. This code lacks side-effects. Is there a bug? at line 1367 character 143 in jBox.js
...s.getTitle) && this.setTitle(this.source.attr(this.options.getTitle)), true);
                                                                          ^
JSC_USELESS_CODE: Suspicious code. This code lacks side-effects. Is there a bug? at line 1370 character 257 in jBox.js
... ? this.setContent(this.source.attr(this.options.getContent), true) : null));
                                                                         ^

Tooltip/Ajax/url=page.html#anchor

When tooltip opens, I would like tooltip to scroll to anchor.
How do yo accomplish this ?
Thank you.

Ajax is firing two times..

Hey i am using latesh jbox plugin and i am having an issue with that like ajax is firing incrementally every time..and how can i set style with content returned via ajax.

Shared User List

<script type="text/javascript"> function list(id){ alert() $('#listmodel_'+id).jBox('Modal', { ajax: { url: 'userlist', data: 'id='+id, title:'User List', animation: 'zoomIn', width:300, height:250, setContent: true, spinner: true, reload: true } }); } </script>

loading issue

Hi,

I'm working in a Knack environment (knackhq.com) and if I load jbox as shown here, it works fine:

However, I would like to simply copy and past jBox into the Javascript window, but it then silently fails - as soon as it reaches

var modal = new jBox('Confirm', {...

later in the code it says that jBox is not loaded. Is there something preventing jBox from loading?

I tried to use your cdn (even though you suggested not to), but I can't do that either as the CDN is http, and I'm coming from https.

The reason its an issue is because the clients I'm creating this for don't have their own server, its all hosted on Knack.

Not sure why it silently fails, is there anything I can do to try and figure out better what is going on?

Thank you,

Mark

Ajax parameters

Can you add "datatype","type" parametrs in ajax?
I need get json string but jbox automatically show my content.