hubspot / vex Goto Github PK

The first thing I looked for was a list of officially tested and supported browsers. If you include this information prominently in your documentation, it will help increase the number of people using this library.

For embedding a chat window on a modal, that chat requires the modal to be rendered right on pageload yet I want the modal to be displayed after a delay. How can this be achieved?

Would be ideal if the top dialog came in from the top of the window not the top of the body

It could be done with CSS but it would just nicer to have an option for that.

Great library, Demo's are looking awesome.
I want to implement in nodeJS/Express/Jade project but i always get ReferenceError can't find variable 'vex'
I have include vex.dialog.js and vex.js, vex.css and vex-themse-os.css in my layout jade and in my Jade for the home page i wanna show a simple alert to get started like this

extends  layouts/layout
block content
    .page
        .container
        .content.text-center
            .heading
                h2 Home

                .border

        script.
            vex.dialog.confirm
            message: 'Are you absolutely sure you want to destroy the alien planet?'

It will give always the reference error
Please give instructions what am I doing wrong here?

If the modal exceeds the viewport height, the overlay scrolls when scrolling the modal leaving part of the underlying page without overlay coverage. It's my understanding that this is caused when a transformation of an element creates a new stacking context causing position: fixed to be ignored.

I've tested this in Chrome, Firefox, Opera, and Safari. All the browsers except Firefox exhibit this behavior. In Firefox, scrolling the modal will not scroll the overlay, but the scroll must originate from the modal and cannot be focused in the overlay itself. I.e. I must have my pointer inside the modal to scroll it in Firefox.

I can remove the perspective property from the CSS of the modal to fix the problem in the other browsers, but, as is the case with Firefox, scrolling can then only happen inside the modal. This may be preferable to leaving part of the page exposed outside the overlay. An ideal solution, IMHO, would allow for scrolling of the modal even while focused on the overlay, but the overlay itself would remain fixed.

It may be possible to remove this property after the animation is complete to "fix" the issue (although scrolling of the modal would still require focus to the modal itself). I will fork the project and try to test this as a viable solution.

Hi,
we've used the beatiful vex on our code.

It works perfectly on our site (we even changed the width on some place).

But it appears that standard vex code like this:

//The code On the screen

Render the vex strange.

Next Screen is how it appears on IE11:

And this on ie9 portable:

it appears on the bottom of the page...

I suppose this is a vex problem, here how it appears the vex demo:

First i do not see all the vex like on chrome,
second one vex is one another...
Third, it seems to me that only some vex are shown. (4 or 5).

This is what I get when I try to install vex using bower. Any advice?

bower install vex
bower cloning git://github.com/HubSpot/vex.git
bower fetching vex
bower cached git://github.com/HubSpot/vex.git
bower checking out vex#v1.3.4
bower warn Package vex is still using the deprecated "component.json" file
bower copying /Users/johnpcamara/.bower/cache/vex/110d8f520888e7d59110d886efc28959
bower error component/jquery not found

There were errors, here's a summary of them:

• component/jquery not found

Vex works great, except for a small issue I'm having.
When trying to create an alert with text on several lines, I should be able to pass something like

$('.About').click(function(){
vex.dialog.alert("Here is some information\nAnd here is some more information");
});

Instead of getting

Here is some information
And here is some more information

I get

Here is some information And here is some more information

nothing happens when i click the demo button.

console says on page load:

ReferenceError: vex is not defined
vex.defaultOptions.className = 'vex-theme-flat-attack';

and when clicking button:

TypeError: demo.loadInitialDialogs is not a function
demo.loadInitialDialogs();

i bet vex.js has not been fully loaded when you execute the script at the bottom.

Hi,

I'm using a VEX dialog in order to ask the user for a password after clicking on a link in a long list of encoded texts. The code behind is supposed to decode the text, and reveal it in-place.

The problem is that each time a VEX dialog appears, the list scrolls to the top. Is there a way to avoid that?

Working on a web app and trying to implement Vex Dialogs using requireJS. Everything compiles fine, however whenever I open the page all I get is a reference error saying vex is not defined. Have tried using the minified and unminified files, vex.dialog.js and vex.js.

In my gruntfile under paths:
jquery : 'extra/jquery-2.1.1.min',
. . . .
vex : 'extra/vex',

In my main.js, the file that calls it:
require([ "system", "ui", "jquery", "vex" ]);

Just to test it working I have the standard confirm demo pasted in, but continue getting the reference error. Is there something I'm just not doing correctly in terms of requireJS?

We've been using vex a bit and have a situation in which it would be ideal to have some small text below the buttons. Sort of a disclaimer type of thing.

I can do it locally by inserting some JS/HTML, but was wondering if you'd be open to a contribution supporting this and if so, any direction/guidance you'd like me to follow.

Thanks!

How would one approach the integration of vex into an angularjs environment.

Specifically - I'm interested in cases where I need data binding. For instance- a prompt with a progress bar or something tied to a model.

I was just wondering if this issue was within the scope of the project. It would be nice to disable background scrolling in cases where the modal height is greater than the screen height.

An example of long modals disabling background scrolling is https://github.com/jschr/bootstrap-modal ; this issue has also been addressed in bootstrap 3.

Cheers

I'd like to use the themes but roll my own markup, but right now the CSS selector for the primary button looks like this:

.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary

It would be nice to not have to jump through so many hoops.

if you add it to the bower repo, it will be much easier to install

Chrome developer tools shows this error in the following script:

<script>
  $(function(){
    vex.open({
      content: 'Invalid login or password.',
      afterOpen: function($vexContent) {
        return $vexContent.append($el);
      },
      afterClose: function() {}
    });
  });
</script>

The line in question is return $vexContent.append($el); The Vex window opens properly and displays the correct content, but the JS error halts any further JS from processing.

Seems that the "OK" button does not always render properly (no background color) in Safari version 6.0.5 on Mac.

I'm able to reproduce this at http://github.hubspot.com/vex/api/basic/ by clicking the second demo "Open a confirm".

Thanks.

Hello,

I really like you script. I want to use on my website for window.alert created by javascript and run in browser. So far I have copied all .js file in js folder and css files in css folder. I have also included source link to my default header page but still it is showing me regular browser created pop up box....

There are a few things that we can do to improve the accessibility of the dialogs. @jdwyah has a friend who might be interested in doing some work on it.

just fyi, the "Next" button at the bottom of your dialogs is not visible in Safari

Thanks for such a great library.

My only wish is for an easy way of validating forms in modals, so I can control whether the user is allowed to press OK or not.

Alternatively, I do this once the user has pressed OK, and bring up an alert error dialog, after which I reopen the original prompt. However, the user must then complete the form again.

This says 5kb, while the README says 7kb. So which is it?

I just ran into an issue that keeps me scratching my head: When jQuery is loaded outside the requirejs dependency chain, then Vex fails as $ won't get recognized.

The "problem" can be found in the Vex loading mechanism, which assumes that if define is a function, then jquery can be injected.

My situation is the following: I don't have full control over what's happening as I'm writing a "theme" for the Ghost node.js CMS. That system loads jQuery upfront. In my theme I'm loading all scripts/modules via requirejs, but can't simply drop he built in jQuery and register my own as other third party scripts may rely on it. Of course everything works just fine, when I comment out the first if part in Vex - which is not an option - and just go with the second and third. It as well works if I remove Vex from the dependency chain and just load Vex upfront (like jQuery) as well. I assume everyone understands that this is below an optimal solution.

Still I got no idea what the best way to go on "fixing" this would be.

Hello,

i was trying your plugin and it works like a charm and i was wondering in the dialog there are the buttons YES/NO what if i'd need a button MAYBE or more buttons? For example if used in an e-commerce for quick basket purpose i could need 2 buttons checkout/continue shopping/view cart

It will be fantastic to have an option to give a title text for vex.

As example, if i use the vex-theme-os there is even for an Alert a grey bar on the top. I'd like to give some text to it.

When a vex dialog is opened the class=vex-open is added to the body which seemingly just sets overflow to hidden; however, this causes a visual shift in the body which is distracting.

I know this was likely intentional—just wanted to add my $0.02. I find the visual shift to be more of a problem than the ability to scroll behind the dialog.

Would be great to get a MIxen for Vex, similar to the one we now have internally.

Placeholder for @gregsabo.

At least thats the behaviour I would expect. Just saying.

Sorry a little unfamiliar....but i love this script. Is it possible to make it pop up on load? I want a welcome message to mobile visitors that they should visit the desktop for the full experience, blah blah.

Is it possible to do that with Vex?

I hope so! I'm dying for a solution! thanks!

(p.s. oddly, this jsfiddle of yours i found works, but only because of the broken style tag?! http://jsfiddle.net/adamschwartz/qJav7/)

Simple fix:

add below hack to the .vex-overlay class in order to change the background opacity in IE8.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c000000', endColorstr='#4c000000'); /* IE 8*/

I need to create a fairly complex modal sidebar for something like settings. I'd like to have is slide out from the left and remain in place attached to the left side of the viewport/window. The user will fiddle with settings and dismiss at some point.

I can see how to do most of this but wonder about how to put the fairly complex HTML into the dialog.

Is there an option to disable console.log's that appear everytime for example when I use vex.closeAll()?

Let user decide whether modal should be closed on submit button.
Use case
login form, when user submits credential data. Data is checked serverside then.

This could be done in onClose method (naming its up to you).

onClose: function() {
    doAjaxCallAndShowResponse();
    return false;
}

hi,
I'm trying to change the buttons text into Greek language but i get some strange characters.
Can you please help me?

Hi

First thanks for your easy-to-use and beautiful VEX dialog, and now I'm using it in our project.

But I wonder if can I use it in a if statement like the traditional confirm() function in JavaScript, I want to send request only when user clicked YES/OK. I tried and failed.

Is there any method to achieve this task?

BR.

Is it possible to scroll using the scrollbar on large modal windows? right now, clicking the scrollbar will close the modal.

Can you put the vex files on cdnjs so people can use it without needing to download/updload it.

Clearly peeps want this, also, cuz

i have found a strange problem with the plugin in IE9 and lower ..
when you open a modal in a page with a scroll then you close the modal the page can't re-back the scroll again ..
i fix it by remove the CSS attribute which give the body overflow = hidden,
i hope you can fix it too :)

https://twitter.com/flurin/status/380321605878317056

Vex 2.0.1 installed using Bower does not ship with compiled theme css that has styling for input[type="tel"], rest of the input fields are styled as expected. Got the styling to work after yanking equivalent input field styling from the default theme file line 427 and 444 and putting it in place.

I think that can be useful have a method for populate field in prompt dialog ... something like this:

vex.dialog.prompt({
  message: 'What planet did the aliens come from?',
  placeholder: 'Planet name',
  value: 'Mars', // <--- Useful on value update
  callback: function(value) {
    return console.log(value);
  }
});

Thoughts ?

I don't normally do this, but after googling for hours and days for the perfect modal, finding the most ridiculous results, I am beyond thankful and thrilled to have found Vex.

You would think more people would have built something that involves CSS3 animations + JS callbacks + IE8 support + fallback, but alas the options are weak.

Thank you thank you thank you.

On the demo page a console.log call causes problems with IE8. It is not possible to close the "login" modal. This can easily be removed by uncommenting consloe.log or preceed it with if(console.log)

I need to NOT close dialog right after clicking Ok button. (I'm waiting for response of ajax call), I see onSubmit option (https://github.com/HubSpot/vex/blob/master/js/vex.dialog.js#L53) is it the only way to reinit it?
Maybe I missed some option?

It will be an idea to let the user manage how the button (ok/cancel) Are shown.

As example, first i've got the cancel, then the ok.

Maybe the user want to invert those.

Or maybe add some more buttons too.

I think it can be done adding some optional settings to the vex...

I can't make vex.combined work with requireJS.
It seems to only work when using the separate vex.js and vex.diaolog.js ( like in the AMD exemple).
I was hoping to just load the vex.combined and be able to use vex.dialog. Possible?