• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 745
  • Last Modified:

Problem with jquery fogloader

Hello experts.
I'm trying to use the fogloader jquery plugin:
althought the documentation says that the plugin has no effect on  other implementations of a standard dialog box i have some problems.
Using the plugin and another popup dialog in the same page the dialog box is getting the css changes from the plugin after using the loader function.
I did comment all the changes and left the " .removeClass('ui-widget-header')" on line 121
and '.addClass('ui-state-default')' on line 120 . and $('.ui-dialog-titlebar-close').remove(); on line 129 looking for a solution.
After that i add to the destroy function on line 47 the opposite functions:

That what has been left is to add the '.ui-dialog-titlebar-close' class.

Any help?
Is there any other way to solve all these?

* fogLoader 0.9.1
* Author: Corbin Camp (ccamp@onebox.com)
* licensed under GPL licenses 
    $.fn.fogLoader = function(options){
        var defaults = {
            message: 'Loading',
            animated: false,
            closeOnEscape: true,
            height: 25,
            maxHeight: false,
            maxWidth: false,
            minHeight: 15,
            minWidth: 20,
            position: 'center',
            width: 130,
            textAlign: 'center',
            wrapText: 'nowrap',
            fontSize: '1.2em',
            fontFamily: null,
            fontWeight: 'normal',
            borderRadius: null,
            borderWidth: '1px',
            style: 'message',
            progressMax: 10,
            progressChar: '.',
            progressSpell: false,
            progressDelay: 250,
            progressBarImage: null,
            progressValue: 0

        var _method = null;
        var _opts = null;
        var _spellCount = 1;
        var _spellIntervalID = '';

        var _methods = {
            close: function(){
            destroy: function(){
            updateProgress: function(v){
        // process any _method calls
        if(typeof options === 'object' || ! options){ // initialize the dialog
            _opts = $.extend({}, defaults, options);
            _method = options;
                return _methods[_method].apply(this, Array.prototype.slice.call(arguments,1));
                $.error('_method ' + _method + ' does not exist on jQuery.fogLoader');

        // private functions
        function fillProgressBar(v){
            if(v <= 100){

            var msg = _opts.message; // the orgininal message
            var elmt = '#ui-dialog-title-'+$(this).attr('id');
            var displayItem; // the rendered message or element

            // set the displayItem
                        displayItem = _opts.message.substring(0,1);
                        displayItem = _opts.message;
                    displayItem = _opts.message + '&hellip;';
                modal: true,
                resizable: false,
                closeText: '',
                draggable: false,
                closeOnEscape: _opts.closeOnEscape,
                height: _opts.height,
                width: _opts.width,
                maxHeight: _opts.maxHeight,
                minHeight: _opts.minHeight,
                maxWidth: _opts.maxWidth,
                minWidth: _opts.minWidth,
                position: _opts.position,
                title: displayItem,
                beforeclose: function(event,ui){
              //  .css({fontSize:_opts.fontSize, 
                 //     fontWeight:_opts.fontWeight, 
                 //     whiteSpace:_opts.wrapText,
                //      'border-width':'0px'});
         //   if(_opts.fontFamily != null){
           //     $('.ui-dialog-titlebar').css({fontFamil:_opts.fontFamily});
         //   }
         //   $('.ui-dialog').css({padding:'0',borderWidth:_opts.borderWidth});
            // adjust border radii
          //  if(_opts.borderRadius != null){
              //  $('.ui-dialog-titlebar').css({'-moz-border-radius':_opts.borderRadius, '-webkit-border-radius':_opts.borderRadius});
             //   $('.ui-dialog').css({'-moz-border-radius':_opts.borderRadius,'-webkit-border-radius':_opts.borderRadius});
          //  };
            if(_opts.style == 'progressbar'){
                var pb = $('<div />');
                pb.css('height', (_opts.height - 5)+'px');
                if(!$.support.htmlSerialize && _opts.progressBarImage == null){ // ie fix
                    $('.ui-progressbar-value').css('height',(_opts.height + 5)+'px');
                if(_opts.progressBarImage != null){
                    $('.ui-progressbar-value').css({backgroundImage: 'url('+_opts.progressBarImage+')'});
                    $('.ui-dialog .ui-widget-content').css('border-width','0px');
            if(_opts.animated && _opts.style != 'progressbar'){
                _spellIntervalID =  setInterval(function(){
                                        var currText = $(elmt).html();
                                        if(currText == null){
                                            if(currText.length < (msg.length + (_opts.progressMax - msg.length))){
                                                if(_opts.progressSpell && _opts.animated){
                                                    if(_spellCount < msg.length){
                                                        currText += msg.substring(_spellCount, _spellCount+1); 
                                                        currText += _opts.progressChar;
                                                    currText += _opts.progressChar;
                                                _spellCount = 1;
                                                currText = _opts.progressSpell ? _opts.message.substring(0,1) : msg;
                                    }, _opts.progressDelay);
})( jQuery );

Open in new window

  • 7
  • 4
1 Solution
RobOwner (Aidellio)Commented:
Can you give a screenshot or example of how it is changing the css?

I've set up an example to try and replicate your issue but it seems ok to me...

PanosAuthor Commented:
Hi tagit:
Thank you for your help. Your test code is working with my css and js files too.
I will check this carefully tomorrow (it is now 4 o' clock in the morning) with my original html code to find where the problem is and come back with news.
PanosAuthor Commented:
Hi are you online now?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

PanosAuthor Commented:
I create a test page eliminating all the scripts ,html and styling so that you can test it local.
There are three screenshots. the first is showing the dialog before clicking on the reset button and the second after clicking on the reset button.

RobOwner (Aidellio)Commented:
sorry i wasn't online, i'm 7.5hrs ahead of you ;)

you will need to download the full theme if you want to test it locally as the jquery ui css references images within the theme.  Otherwise reference the google api version.

download: http://jqueryui.com/download/jquery-ui-1.8.16.custom.zip

google: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css
RobOwner (Aidellio)Commented:
I've modified your testfiles so that you can use it locally.  I removed your versions of ui js and css and referenced the online google ones.

In what way do you now want to modify the css?

btw i commented out your ajax call as well so it wouldn't error.

also added a test at jsFiddle: http://jsfiddle.net/rjurd/CB55u/
PanosAuthor Commented:
I just came  home. It is very late but i will try to make the tests.

Check your online testfile.If you click on the reset button and after that the delete button ,the pop up window has no <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a> tag.

PanosAuthor Commented:
tagit i must apologize but it is too late.
A last comment for now to this problem.
I did add to the test code from your first example at jsFiddle with the rest of the code on the second one.

Try it yourself. The calls with the buttons are working without problem but the calls with the links have the issue with the styling.
RobOwner (Aidellio)Commented:
that's because the fogLoader destroys all dialogs on the page.  i've recoded it so that the Delete dialog is initialised each time it is called.  have another look at the demo

PanosAuthor Commented:
Yes tagit.
Now it is working like the way i need.
Thank you for your help!!!
PanosAuthor Commented:
Thank you again.

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now