How can I change this JS to make it visible?

Question

_createInput: function(){ 
        var self = this;

        var input = document.createElement("input");
        input.setAttribute('type', 'file');
        input.setAttribute('name', this._settings.name);
        if(this._settings.multiple) input.setAttribute('multiple', 'multiple');

        addStyles(input, {
            'position' : 'absolute',
            // in Opera only 'browse' button
            // is clickable and it is located at
            // the right side of the input
            'right' : 0,
            'margin' : 0,
            'padding' : 0,
            'fontSize' : '480px',
            // in Firefox if font-family is set to
            // 'inherit' the input doesn't work
            'fontFamily' : 'sans-serif',
            'cursor' : 'pointer'
        });            

        var div = document.createElement("div")
        div.className = 'tooltip';
        div.id = 'ajaxupload-div';
        div.title = 'Attach a picture';
        addStyles(div, {
            'display' : 'block',
            'position' : 'absolute',
            'overflow' : 'hidden',
            'margin' : 0,
            'padding' : 0,                
            'opacity' : 0,
            // Make sure browse button is in the right side
            // in Internet Explorer
            'direction' : 'ltr',
            //Max zIndex supported by Opera 9.0-9.2
            'zIndex': 2147483583
        });

        // Make sure that element opacity exists.
        // Otherwise use IE filter            
        if ( div.style.opacity !== "0") {
            if (typeof(div.filters) == 'undefined'){
                throw new Error('Opacity not supported by the browser');
            }
            div.style.filter = "alpha(opacity=0)";
        }            

        addEvent(input, 'change', function(){

            if ( ! input || input.value === ''){                
                return;                
            }

            // Get filename from input, required                
            // as some browsers have path instead of it          
            var file = fileFromPath(input.value);

            if (false === self._settings.onChange.call(self, file, getExt(file))){
                self._clearInput();                
                return;
            }

            // Submit form when value is changed
            if (self._settings.autoSubmit) {
                self.submit();
            }
        });            

        addEvent(input, 'mouseover', function(){
            addClass(self._button, self._settings.hoverClass);
        });

        addEvent(input, 'mouseout', function(){
            removeClass(self._button, self._settings.hoverClass);
            removeClass(self._button, self._settings.focusClass);

            if (input.parentNode) {
                // We use visibility instead of display to fix problem with Safari 4
                // The problem is that the value of input doesn't change if it 
                // has display none when user selects a file
                input.parentNode.style.visibility = 'hidden';
            }
        });   

        addEvent(input, 'focus', function(){
            addClass(self._button, self._settings.focusClass);
        });

        addEvent(input, 'blur', function(){
            removeClass(self._button, self._settings.focusClass);
        });

        div.appendChild(input);
        document.body.appendChild(div);

        this._input = input;
    },

This JS starting at var div = document.createElement("div") produces this div tag:

<div style="display: block; position: absolute; overflow: hidden; margin: 0pt; padding: 0pt; opacity: 0; direction: ltr; z-index: 2147483583; left: 102px; top: 323.5px; width: 102px; height: 28px; visibility: hidden;">

I see where all the other attributes get changed, but how the heck can I change 'visibility: hidden;" ???

It's making me crazy please help.

Answer 1

Find the below section in your code i have star commented where you can modify:

addStyles(div, {
        'display' : 'block', /*You cane set display none here to hide the div.*/
        'position' : 'absolute',
        'overflow' : 'hidden',
        'margin' : 0,
        'padding' : 0,                
        'opacity' : 0,
        // Make sure browse button is in the right side
        // in Internet Explorer
        'direction' : 'ltr',
        //Max zIndex supported by Opera 9.0-9.2
        'zIndex': 2147483583,
        'visibility':'hidden' /* If you don't set display none , you can set your style attribute you want to change like visibility here also */

    });

Ok, to make it visible find the below code and try setting visibility there:

if (input.parentNode) {
            // We use visibility instead of display to fix problem with Safari 4
            // The problem is that the value of input doesn't change if it 
            // has display none when user selects a file
            input.parentNode.style.visibility = 'hidden'; /* try setting visibility='visible' here */
        }

If that doesn't work then check if any css is overriding the style property of the div by inspecting the div in your browser.

Answer 2

如果使用jQuery，我知道有命令$('#div').css('attribute','value');

Answer 3

visibility hidden is set when you "mouseout" off that input

addEvent(input, 'mouseout', function(){
    removeClass(self._button, self._settings.hoverClass);
    removeClass(self._button, self._settings.focusClass);

    if (input.parentNode) {
        // We use visibility instead of display to fix problem with Safari 4
        // The problem is that the value of input doesn't change if it 
        // has display none when user selects a file
        input.parentNode.style.visibility = 'hidden';
    }
}); 

you can either remove that event binding or change the statement to input.parentNode.style.visibility = 'visible';