w3co / jcf Goto Github PK

This is probably more of a chrome bug, as it only started happening in the latest update, but maybe there is something you can do to fix it.
This problem only seems to occur when emulating devices in chrome dev tools and using the native dropdown, and does not appear to affect actual mobile devices.
You can see in this image that the dropdown is misaligned, and options are not selectable.

I would recommend looking into adding grunt, and simplifying some of your workflow.

A good example can be found here: https://github.com/chieffancypants/angular-loading-bar

They have a src folder, a build folder, and a way to automate tasks. One of the biggest downfalls of jcf is not being able to include a minified version of jcf through bower.

If we need to style different the select when an option is yet selected, we need a class or attribute that give this information. So it would great to add a jcf-selected class next to the jcf-select class.

Good day,

Implementing JCF on my Ember app, noted that I get constant warnings (in Chrome) on the deprecations for insertRule method.
insertRule started using two arguments in the function.

I have 2 Select lists. When a user selects an option in the first list I want to filter the second list and hide some of the options. I have tried most everything including but not limited to;

hide()
toggle()
hidden=true

What is the proper way to hide picklist options with jcf?

Hello,

I have an optgroup with select multiple like this

<select multiple ...>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
  </optgroup>
  ....
</select>```

 /* * * *  JCF WILL CONVERT SELECT ELEMENTS TO THIS * * * */
`<span class="jcf-optgroup">
    <span class="jcf-optgroup-caption">Swedith Cars</span>
    <ul>
        <li>
            <span class="jcf-option" data-index="6">Volvo</span>
        </li>
        ...
    </ul>
</span>`

How an i select all childs elements of jcf-optgroup-caption ? , i tried with below code without success because trigger click never fired, and i don't find any method to do it :

$(document).on('click', 'span.jcf-optgroup-caption', function(){
    var liste = $(this).siblings('ul').find('li');              
    liste.each(function(){
          /* here i get child element and click on it : trigger click not fired */
          $(this).find('span').trigger('click')
         /* But a toggle class is working */
         $(this).toggleClass('activeitem')
    })           
})

Could someone advice me please? , JCF has any callback to handle something like this ?
Thank you.

Multiselect doesnt work when you have 'wrapNativeOnMobile: true' as option set.

Tested on a iPhone 6 plus (iOS 9.2.1)

Looking at the "core" JCF file, I see that the script attempts to detect support for AMD loaders:

(function(root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
} else {
    root.jcf = factory(jQuery);
}
}(this, function($) {

This would be awesome...if any of the other plugins also did the same thing. However, they all expect that a global jcf object exists on the window. Scripts such as JQuery get around this by providing the global even when loaded by AMD, so that plugins can be shimmed (see http://requirejs.org/docs/api.html#config-shim). JCF's approach means that I am stuck between two unworkable options - if I don't load the core JCF script through RequireJS, it will cause an error when it attempts to call define(['jquery'], factory), and if I do load it through RequireJS, I cannot load any of the plugins that make it useful.

Unless I'm missing something, the core script should export the global object in all circumstances.

Hi there,

I try to include the module through

require('jcf');

but it seems like it cannot find it.

This is the context:

var Auth = require('../auth/auth.js');
var Alphabet = require('../alphabet.js');
var Jquery = require('jquery');
var JCF = require('jcf');
/**
 * List module
 * It needs a resource from outside to populate
 * @type Object
 */
var ProjectList = {

    template: require('./views/project-list.template.html'),
    props: ['resource'],
    data: function() {
        return {
            'limitOpen': false,
            'sort': {
                'letter': '',
                'order': 'asc',
                'limit': 10
            },
            'limits': [ 10, 20, 30, 40 ],
            'letters': Alphabet,
            'items': [],
            'links': [],
            'pagination': []
        }
    },

    ready: function() {
        this.fetchData();
        Jquery(function() {
            JCF.replaceAll();
        });
    },
}

is it at all possible?

jcf.setOptions('Select', {

    wrapNative: false,

    wrapNativeOnMobile: true

});

On Chrome the native options are shown instead of the custom ones.

The goal is to have native dropdown list in mobile but jcf ones in the desktop version.

Seems like with chrome this is not possible

We are using the JCF control as part of a project and the value is a GUID not an integer? The control doesn't set the selected item? How can this be corrected to work with GUID values?

What do I do if I want to select a specific div or section element to use jcf on? Will I have to select all elements in my div/section or are there options for jcf.replaceAll( [context] ) or jcf.replace( elements [, moduleName] [, customOptions] ) to do so?

Edit: I found the answer. I read poorly:
This should work:
var myDiv = $('#div');
jcf.replaceAll( myDiv );

This should also work:
var myClasses = $('.myClass');
jcf.replaceAll( myClasses );

Correct me if I'm wrong.

Please implement Angular 2 component

Thank you for your plugin.
Could you please supporting.
When a drop-down list in the select is opened, the scrollbar is set on the top options. Can we set scrollbar to selected option of the select (so selected option is visible in the list) programmatically?

I am unable to make the slider to work on RTL based-website. Is there any specific option I have to add that will -magically- make it work?

Thanks!

Whenever html element has css rule "direction:rtl" styled select does not work properly (page content disappears on click on styled select). It's reproducible on any page by adding

html {direction:rtl}

For example, try it on your demo page https://github.com/w3co/jcf/blob/master/index.html

Hi, I have an admin type design with a collapsible menu on the left and a scrollable area on the right. However when the menu is closed, the div on the right (.jcf-scrollable) keeps the width it had upon loading the page and only re-takes full width when resizing the window.

Is there a workaround for this?

Hello,
on mobile I have problem, that it takes around 6s to render selectbox. Checkbox and radio are fine. Any idea, what can cause the problem?

Thanks

When I scroll within a dropdown list, the list immediately disappears. Is there a way to fix this? Thanks

Is there any option to restrict multi select to set max items select ? suppose, i have multi-select list with 10 items and allow to user select only 4.

I have next code

<input type="file"  class="jcf-file" data-jcf='{"buttonText": "File", "placeholderText": "Add file"}'>

<script src="js/vendor/jcf.js"></script>
<script src="js/vendor/jcf.file.js"></script>
<script src="js/vendor/jcf.scrollable.js"></script>

(function ($) {
if ($('.jcf-file').exist()) { //true
    jcf.replaceAll();
}

__if I use this code i have an error ''Uncaught TypeError: jcf.replaceAll is not a function"__
__ but scrollable and select work normal __
__Can you help me?__

Having an issue with a select dropdown ignoring alwaysPreventMouseWheel and wrapNative is false. No matter what I do, I cannot get the dropdown to allow me to scroll the inner content.

Here is a plunkr with the issue: https://plnkr.co/edit/lXSnYS1YlhBJeQCvi77z?p=preview

I dont want vertical scroll. Is there way I can disable? So user can see horizontal scroll only.

We are having an issue with using the [] characters in a name and jcf loading the correct state for these.

Any ideas?

JSfiddle: https://jsfiddle.net/xj1yde26/

Thanks

I'm not putting this here in a finger pointing way and I have no intention about debating wether jquery is either way too big or too slow or whatever, but would you guys be interested in supporting other libraries in the future?

I was thinking about hammer.js for example. or you could compile parts of jquery to the mere minimum you ever use to trimm it down a little? angular maybe? You name it...

Anyways, this stuff is awesome none the less. Worked out like a charm for my last project.

Cheers

Hello,

Number field doesn't work with float numbers:
<input type="number" min="0.1" max="100" step="0.1">

Thanks,

Forgive me for creating an issue to ask for support, but I wasn't sure what the best way to do that was. I've got a client using this library and needs some mods done to it. I thought they were simple - when you change dropdown 1, if the value is so and so, hide or show another drop down. But for the life of me I can't seem to get that working w/ jcf form elements. What's the secret?

When using the custom dropdowns for the JCF select they would sometimes not match up to the width of the select on the page. This seems to occur in a responsive design where the select is set to a percentage width. To resolve it I added the below to line 335 of jcf-select.js which makes the select on the page the same width as the custom dropdown.

this.fakeElement.css({
width: selectWidth
});

I then remove this in the hideDropdown function.

this.fakeElement.attr('style', '');

How I can get value on select change? Is there some information about this?

How to solve this issue

I am trying to clone div with jcf controls using jquery.
jcf.refresh or jcf.replace do not work in dynamically added controls.

Here:
https://github.com/w3co/jcf/blob/master/js/jcf.range.js#L454

I am unsure why you'd resort to get the realElement value passed index 0. For range "multiple" this would accuse a comma-separated value, which won't be of use to place the knob item in the right pixel.

Here:
http://www.wufoo.com/html5/attributes/08-multiple.html

We can see the next explanation for browsers that don't support yet the multiple attribute.

range: Not yet supported, but added to the spec in April 2014, range input GUI will be able to support 2 sliders once the multiple attribute becomes supported. When the multiple attribute is supported on the range input type, the value will be two float numbers concatenated with a comma. When not supported, if a comma separated value is included, the value won't be understood, and will therefore be ignored. The value will then default to the midpoint.

The default option is shown correctly, if is changed to something else that option is not available anymore

<select name="test">
 <option value="1">First Option</option>
 <option value="2">Second Option</option>
</select>

If option 2 is selected cannot go back and select option 1

Initially the dropdown works as intended but after I change the list of options for the dropdown (the user changes languages and I load a list of options in the appropriate language) the plugin fails to redraw and the options are rendered as small gray divs with no text in them.

Maybe I'm misunderstanding something, but why doesn't this library offer custom text fields too? Because it can be customized without JS? Even though this would be nice for a consistent look and feel out of the box.

Hi! It would be nice if some cool themes were added! 👍

If upon jcf.replacing the checkbox was wrapped in its own label it will not uncheck well. It sometimes unchecks and sometimes it doesn't. Looks like the toggle event is triggered twice because of it.

Many frameworks like Yii2 often wrap their checkboxes in label by default and in such situations it is very tricky to find out what goes wrong.

Is there a way to make it works in IE8?
selectedOption = this.realElement.prop('options')[selectedIndex] doesnt work in IE8 since as i understand it is not an array for IE.

How can i add some tag inside option in select? For example some icon, like <i class="fa fa-star"></i>. Thanks for answer!

Hello, I get this error in the console when I open a select that is styles true JCF plugin

Cannot read property 'defaultView' of undefined

when I use the wrapper on the native selects. These are my JS settings:

// initialize custom form elements
function initCustomForms() {
jcf.setOptions('Select', {
maxVisibleItems: 8,
wrapNative: false,
wrapNativeOnMobile: false,
fakeDropInBody:false,
});

var app = $('#app');
jcf.replaceAll(app);

}

The error is generated from this piece of script in Jquery:

var getStyles = function( elem ) {

	// Support: IE <=11 only, Firefox <=30 (#15098, #14150)
	// IE throws on elements created in popups
	// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
	var view = elem.ownerDocument.defaultView;

	if ( !view || !view.opener ) {
		view = window;
	}

	return view.getComputedStyle( elem );
}

Console debuggers shows that the elem argument is undefined.

Could you please help me to find where this bug is comming from. For your information, your plugin is used as part of the code you provided in a project via psd2html service. It is used in a laravel framework. Please let me know if you need extra info..

Tnkz for your time

Hey there!

Love JCF and using it in another project. Keen to get my hands on more "themes"
Where can I get my hands on the demo theme?

Cheers

If input step changes, jcf doesn't handle this and step not updated.
jcf.refreshAll() doesn't help either.

Hi,

I want to use the custom scrollable feature of the select dropdown. However using maxVisibleItems did not work. On inspecting the code as well as the fake elements stylings I stumbled upon a possible bug.

When the styling of the "listHolder" element is set, the code is:
this.listHolder.css({maxHeight: this.getOverflowHeight(maxCount),overflow: 'auto'});

However the max-height is not applied to the list holder. I've fixed this problem for me by changing maxHeight to 'max-height'.

Furthermore, as the list holder element is a <span>-Element I would recommend to consider adding display:'block' by default, as <span>-Elements by default are inline elements which are not capable of having CSS-height stylings.

Thanks a lot.

When tabbing through a form in Firefox and coming across a select field Upon pressing the down arrow and reaching the desired value and pressing the 'Tab' key to move to the next field, the value is being incremented by 1

Example:

Day:

03 was selected, press the tab key the focus moves to the month select next to it, but makes the day 04 when it was previously 03

Any ideas on this?

Wrong rendering applies to Selectboxes with scrollable.js plugin. After reset the form, the height of the select box is 0.
See https://jsfiddle.net/k056xn67/6/

Hello @inferpse
I am the member of cdnjs project.
We want to host this library.
But there is a question want to ask.
Which files need to be hosted?
Thanks for your help!

cdnjs/cdnjs#8725

Hello.

Is it possible to simulate click on select element with JavaScript/jQuery to open a dropdownlist?

something like this:

<select id="jcf-select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

jcf.click($("#jcf-select"));

Thanks.

Would you guys please provide information how to implement React Component?
I think its going to be tricky with React.
Because react is not supposed to go along with jquery.

I have the following notification in Chrome:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Reason is this line:
if (self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);

I am not skilled enough to write a pull request but it shouldn't be too difficult to rewrite the addEventListener call to make use of the options and make the event handler passive.

There's quite some documentation about this method (including how to keep keep older browsers support when making it passive).

Can you update this please?

Thank you

Hello,
can someone guide me how can i manually trigger checkbox of state checked i try to use this

$('.jcf-checkbox').addClass('jcf-checkbox input-checked-parent jcf-checked');

It show me checked but not consider to be checked kindly guide me for this

Your help will appreciated thanks in Advance