Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
205
Add custom CSS class to ui-igstartupbrowsebutton
posted

Im using the igUpload on a responsive site together with fastclick (https://github.com/ftlabs/fastclick) to eliminate the 300ms delay between a physical tap and the firing of a click event on mobile browsers.

The problem is that it wont work correctly with igstartupbrowsebutton. The click event is never fired correctly on iOs.

Im rendering the upload with 

    $.ig.loader('igUpload', function() {

        $('#projectImage').igUpload({

            mode: 'multiple',

            css: {

                "what_name_should_i_use_here": "needsclick" // Does not work

            },

            multipleFiles: true,

            maxSimultaneousFilesUploads: 1,

            maxUploadedFiles: 50,

            autostartupload: true,

            labelUploadButton: 'Submit photos',

            controlId: 'projectImage',

            progressUrl: '/IGUploadStatusHandler.ashx',

allowedExtensions: [ 'jpg', 'JPG', 'jpeg', 'JPEG' ]

        });

    });

<button id="projectImage_ibb" class="ui-igstartupbrowsebutton ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default" title="Upload File" role="button" aria-disabled="false"><span class="ui-button-text" id="projectImage_ibb_lbl"><span class="glyphicon glyphicon-upload"></span> Submit photos</span></button>

The problem is that i need to add a custom class to browsebutton to prevent FastClick on the specific element. Eg:

<button id="projectImage_ibb" class="ui-igstartupbrowsebutton ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default needsclick" title="Upload File" role="button" aria-disabled="false"><span class="ui-button-text" id="projectImage_ibb_lbl"><span class="glyphicon glyphicon-upload"></span> Submit photos</span></button>

Parents
  • 17590
    Offline posted

    Hello pytte wrote,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is setting the startupBrowseButtonClasses to your custom class as following:

    //Initialize
    $(".selector").igUpload({
        css: {
            "startupBrowseButtonClasses": "customClass"
        }
    });
    I believe this will help you achieve your requirement.
    Some further reference to the classes applied to igUpload could be found at:
    http://help.infragistics.com/jQuery/2015.1/ui.igupload#theming

    Please let me know if you need any further assistance with this matter.


  • 205
    Offline posted in reply to Vasya Kacheshmarova

    I did not get your example code to work properly.

    The documentation you refer to does not correspond to your example.

    I want to add a custom class called needsclick to my rendered control below.

    <button id="projectImage_ibb" class="ui-igstartupbrowsebutton ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default" title="Upload File" role="button" aria-disabled="false"><span class="ui-button-text" id="projectImage_ibb_lbl"><span class="glyphicon glyphicon-upload"></span> Submit photos</span></button>

    I want the result to be:

    <button id="projectImage_ibb" class="ui-igstartupbrowsebutton ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default needsclick" title="Upload File" role="button" aria-disabled="false"><span class="ui-button-text" id="projectImage_ibb_lbl"><span class="glyphicon glyphicon-upload"></span> Submit photos</span></button>

    I was not able to do that with you example.

    $(".mySelector").igUpload({
        css: {
            "startupBrowseButtonClasses": "needsclick"
        }
    });
  • Reply Children
    No Data