hubspot / vex Goto Github PK
View Code? Open in Web Editor NEWA modern dialog library which is highly configurable and easy to style. #hubspot-open-source
Home Page: http://github.hubspot.com/vex/docs/welcome
License: MIT License
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source
Home Page: http://github.hubspot.com/vex/docs/welcome
License: MIT License
Would be ideal if the top dialog came in from the top of the window
not the top of the body
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?
Is there an option to disable console.log
's that appear everytime for example when I use vex.closeAll()
?
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
if you add it to the bower repo, it will be much easier to install
Is it possible to scroll using the scrollbar on large modal windows? right now, clicking the scrollbar will close the modal.
Clearly peeps want this, also, cuz
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.
At least thats the behaviour I would expect. Just saying.
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?
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:
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).
Would be great to get a MIxen for Vex, similar to the one we now have internally.
Placeholder for @gregsabo.
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
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!
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.
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.
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.
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.
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....
<script src="js/vex.combined.min.js"></script> <script src="js/vex.dialog.js"></script> <script src="js/vex.dialog.min.js"></script> <script src="js/vex.js"></script> <script src="js/vex.min.js"></script> <script>vex.defaultOptions.className = 'vex-theme-os';</script>It could be done with CSS but it would just nicer to have an option for that.
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.
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?
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)
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.
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...
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.
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?
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?
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.
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*/
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/)
It's awesome that I can see the Javascript code samples with that little button on the top right of the docs site, but that button is super easy to miss. It was only after I'd downloaded and was looking through the source of the docs site to see how things worked that I noticed that it was there.
How about defaulting to Javascript and/or having the JS/Coffee buttons near each code sample?
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.
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.
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.
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?
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.
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.
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 :)
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:
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.
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 ?
Can you put the vex files on cdnjs so people can use it without needing to download/updload it.
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;
}
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.