Having trouble initializing as such:

<h4 id="handle">Navigation</h4>
<nav data-navigation-handle="#handle">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

$(document).ready( function () { 
  $('nav').navigation({
    type: 'overlay',
    maxWidth: '10000px',
    gravity: 'left'
  });
});

Receiving an Uncaught TypeError: Cannot read property 'removeClass' of null - navigation.js:213 error. jQuery v2.1.3

Seems to fail on this line: $Locks.removeClass(RawClasses.lock); in onClose function.

First of all I want to thank you for making such an amazing set of components that works beautifully.

I think one of the functionality that would be helpful is to have an event such as onFileAdded. The purpose of this event is to add a certain file to the queue only if user defined validations are passed. Such as you might want to limit file based on it's mime type or any other user defined validation. Alternately you could even use it show activity in any kind of UI as well.

Hi, I'm trying to show/hide a Lightbox based on a Checkbox (checked) value.

https://jsfiddle.net/ryy545yL/

Additionally, the Lightbox options don't seem to be working as expected. Could you let me know if what I'm trying to do is possible or if I'm just doing it wrong?

Thanks!

Before all, congratulations for your great job with the upgrade of all the modules of Formstone!

I'm using React and I change the checkbox "checked" attribute with a state. However, Formstone's checkbox doesn't read the change, but I do not request so much, I just need a function that "update" the checkbox.

Before (with the picker) I used the method "update"

$(".target").picker("update");

and everything works fine, but now that method does not exist.

How can I solve the problem?

Thanks

I think there some important things missing in the background documentation.

• are videos auto-started on mobile platforms and if not, how can this be achieved
• is there an api to know if a video is currently played or paused

Make sure you clean up each handle individually, labels from the second are displaying in the first.

When the menu button exists inside the page content, the close button fires twice which reopens the menu.

Remove pointer events?
Check target and kill event?

@rultor hello

Is it possible to show some custom html tags inside the dropdown options?
I have an option like this:

<option value="hello"><span class="icon icon-hand"></span> Hello</option>

Obviously usually this has no sense in an option tag, but because the dropdown module use buttons to create the dropdown, technically it would be nice to have this possibility (from what I understand, currently html code is stripped when the buttons are built).

Thanks

Scenario: Very bottom of html document has a 300px tall div set to overflow:scroll; and containing a vertical list of 60 Formstone Checkbox elements.

Problem: The overflow:hidden; has no effect on the original input elements because they are set to position absolute; As a result the document can be scrolled down far beyond where the actual HTML element ends.

Fix A: Set the input elements to display:none; instead of position:absolute; opacity:0;
(not sure how this affects accessibility)

Fix B: Use visibility:hidden; instead of position:absolute; opacity:0;
(not sure how this affects accessibility)

Fix C: Add top:-99999px; in addition to the current left:-99999px;
(I assume this doesn't harm accessibility if the current left:-99999px; doesn't harm accessibility)

Or just mention in the documentation exactly how the original input elements are hidden, the potential for unexpected side effects, and these 3 options to work around it.

This bug applies to the old Formstone Picker as well.

The component is not compatible with AngularJs. When I tried to add ng-model="sortMethod" the model did not updated when I chose an option element. Please add support for AngularJs. <select class="selectpicker" data-style="btn-select" data-width="auto" data-ng-model="sortMethod"> <option value="-createdAt" selected="selected">Last changed</option> <option value="-price">Price desc</option> <option value="price">Price asc</option> </select>

When clicking a checkbox, the value of the actual input element doesn't update the value attribute. The only thing that happens is the wrapping div gets the class "fs-checkbox-checked" added.

If I have a file queue and reload the page then as per the documentation you should be shown the message "You have uploads pending, are you sure you want to leave this page?". However I don't see this message being displayed anywhere. It doesn't work in the example as well.

I am unable to set maxWidth parameter, cause there isn't such, though there is minWidth. The only way is to to use CSS and set it globally. Otherwise if I specify data-lightbox-width it doesn't resize on smaller screens, but not specifying the width it stretches too much on larger screens.

..would be helpful ;)

.. or am i just stupid .. because i cant get it to work :(

Hello,

the Lightbox Caption on mobile is out of the viewport...

BR
Oliver

Hi, thanks for this great library. I've just started exploring it and can't manage to get the background component to be displayed in the background. Any content on the page is below the background. Is this how it's supposed to work? Thanks!

Hello,

Thanks for these useful plugins.
I can't get work the Dropdown.js. Firebug says:
"TypeError: c.$selected.touch is not a function"

M

So we can resize once images have loaded.

I know that your library is designed to be a replacement for bootstrap. I would like to bring up that in my implementation that leverages some of bootstraps functionality alongside some of your widgets there is a compatibility issue with the "carousel()" methods due to naming conflicts.

The fix to it is to comment out the whole carousel code block from bootstrap. (* Bootstrap: carousel.js v3.3.4)

It would be nice to maybe use a different name for your methods so they will play more nicely together.

💃 💃

This is a bug encountered when the page is scrolled then the dropdown opened. To replicate:

1. Load a page with dropdowns
2. Scroll the page down
3. Click a dropdown with enough options to make it scroll (e.g., "Select a State")

You'll notice that the options have scrolled with the page and are above the top of its containing element.

Discovered in Chrome 43.0.2357.124 on OSX

I tried with IE on Windows Phone 8.1 and clicking on a dropdown it doesn't do anything. While on Android everything is ok.

When the checkbox component is used with jQuery, the on('click') event is unusable.

I've uploaded a video to show the problem --> https://youtu.be/kePoKifvuCY

When you scroll the page after opening & closing the menu the sticky nav bar flickers. I've tested it in Safari and Firefox and it works fine, just seems to be Chrome having the issue.

So they can flex with current items.

UPLOAD CONTROL

The control supports multiple file upload using the drag and drop feature. The click/browse is only a single selection. The generated [input type=file] needs the multiple attribute added.

currently i am doing this in document ready as
$('.fs-upload-input').attr("multiple", '');

where "upload" is the class name via call
$(".upload").upload();

I did not see an option to enable multiple in the docs even though the drag drop uploads multiple files.

I just test the dropdown component, but I have an graphic issue (you can see in the JSFiddle screenshot). The component opens from the top.

You can test my code at : http://jsfiddle.net/tcbnmn85/4/

My configuration : Ubuntu 15.04 with Firefox 38.0

Thanks your for work on these components.

I am having problems with the setup functions of widget modules not executing when asynchronously loading the js-files with script.js. I can instruct script.js to make the widget function only execute when its dependencies are ready but it looks like the asynchronous loading is causing the Document Ready section at the end of core.js not to execute.

Would it be possible to make the _setup method callable via $.plugin("initialize");(or similar) much like "defaults" and "destroy" already is, while setting the respective initialized flag to prevent re-initialization of dependencies where they are used by different modules?

Hey,

I'd like to use the following function:

 $(window).on("open.lightbox", function() {
    $('body').css("overflow","hidden");
    console.log("Lightbox is opened.")
}).on("close.lightbox", function() {
    $('body').css("overflow","auto");
    console.log("Lightbox is closed.")
});

it works perfectly while opening but ignores everything on close.

I checked the following too:

 $(window).on("close.lightbox", function() {
    $('body').css("overflow","auto");
    console.log("Lightbox is closed.")
});

but it didn't work as well. Chrome's console log with preserved log showed only "Lightbox is opened" state.

Sometimes Dropdown has to be used with a parent element that has a fixed height and overflow hidden.

This causes long option lists to be cut off.

It would be nice if there was an option to have Dropdown's option list moved higher in the dom tree and then absolutely positioned to line up with the Dropdown box.

I specifically say "higher in the dom tree" and not "the very top" because I remember old IE and other dropdown scripts had problems where select elements would render above the dark page overlay of lightbox scripts.

Formstone Classic - Boxer is working, but I can't get Lightbox working on mobile devices..

On tap the box opens and keeps showing the loading indicator.

The error in console is

Uncaught TypeError: U.$content.touch is not a function

The site is build on bolt cms and I'm using the following bower components:

"jquery": "~2.1.4",
"formstone": "~0.5.11",
"normalize.css": "~3.0.3",
"font-awesome": "~4.3.0",
"pickadate": "~3.5.6",
"isotope": "~2.2.0",
"autosize": "~3.0.4",
"imagesloaded": "~3.1.8",
"jQuery.mmenu": "~5.1.2",
"slick.js": "~1.5.3"

Is there any solution to abort a running upload?

Some extra fancy modern layouts may have body set to 100% of html which is 100% of the viewport. In that scenario if the dropdown options list is kind of long it will always be shown above the element instead of below.

If there is a fixed element, for example something with:

position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 300px;
background-color: #FFF;

and there is a dropdown right near the upper border of the fixed bottom, if the height of the dropdown is < 300px then it will open under the fixed element.

This is obvious, because there is enough height between the dropdown and the bottom of the window.
However, it would be nice to say "hey dropdown, open toward top (instead of bottom) if there are < X under you (where X could be 300px).

What you think?

In certain cases I want to disable both drag and drop and file input in the upload component and show the cursor as the disabled one. How could we do something like this? Thanks.

Hello guys!

Thank you for offering a good combination of components!

I'd like to use a tooltip with a large amount of text. Is there any way to make it fixed sized instead of spreading to all the width of the page (it goes over the page borders)?

Sincerely.
Kate

URL: http://formstone.it/components/dropdown/

The only thing I am missing here is the possibility for keyboard interaction. Using arrows when a dropdown have focus should let me navigate the list.

For some reason scrollbar does not work for dropdown anymore, in previous version it was working fine.

Not sure if IE9 is even officially supported by Formstone, but we noticed that the Lightbox gallery doesn't function correctly with IE9. The first image opens fine and everything looks as expected, but as we tried to browse other photos from same gallery by clicking the left or right arrow it gets stuck. The lightbox shows the loading icon but second image is never loaded. You can replicate this at the demo site http://formstone.it/components/lightbox/

IE10 and IE11 seems to work correctly.

Hi there,

would be possible to have a fade effect option too?

Many thanks!

When you have 2 sets of tabs on a page in IE11. You can perform this test on your own demo (http://formstone.it/components/tabs/)

1. First click on tab from set one.
2. Click on tab from set two.

Result. Set one has a highlighted tab with no content.

Comment: The DOM show that "active" gets stripped from content. This only was found in IE 11 (possibly) other IEs?.

BTW, I love your approach to coding.

Hey,
Although a package.json file exist, I think you have yet to update the npm registery
https://www.npmjs.com/search?q=formstone

would be great if you could do that.

Thanks!

https://formstone.it/components/range/

Looks like when you pass query strings (//player.vimeo.com/video/XXXX?title=0&byline=0&portrait=0&autoplay=1&badge=0) they are not passed to the iframe building.

Demo http://thinsoldier.com/wip/fsdd/site/components/
Tested on latest Chrome for android and an old ios Safari.
Change the first dropdown. You will get 2 alerts.
Change the 2nd one that doesnt have the plugin applied. You will get 1 alert.
If someone fixes this, could you tell me how to apply the same fix to the older Classic Formstone Selecter?

Hello,
I can't find this stylesheet : swap.css
M

I'm attempting to open the menu via another link on the page (in addition to the #handle method in docs).

Am I missing something or is this a bug?

$( "a.btn" ).on( "click", function() {
  $("#nav").navigation("open");
});

what about smoothstate in stead of asap.js

...should be hidden.