Problem with jquery fogloader

Posted on 2011-10-14
Last Modified: 2013-11-05
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 (
* 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,,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( == '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 && != '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

Question by:Panos
    LVL 42

    Expert Comment

    by:Rob Jurd, EE MVE
    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...
    LVL 2

    Author Comment

    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.
    LVL 2

    Author Comment

    Hi are you online now?
    LVL 2

    Author Comment

    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.
    LVL 42

    Expert Comment

    by:Rob Jurd, EE MVE
    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.


    LVL 42

    Expert Comment

    by:Rob Jurd, EE MVE
    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:
    LVL 2

    Author Comment

    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.

    LVL 2

    Author Comment

    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.
    LVL 42

    Accepted Solution

    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
    LVL 2

    Author Comment

    Yes tagit.
    Now it is working like the way i need.
    Thank you for your help!!!
    LVL 2

    Author Closing Comment

    Thank you again.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Suggested Solutions

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now