CODEWITHSUNDEEP
javascriptjquerycolorbox
Michelle
Michelle

Reputation: 2712

jQuery colorbox: how do I prevent the loading indicator small box from appearing before the main colorbox content does?

I'm using jQuery colorbox to load a login form (via ajax). However, this little small box shows up for a few seconds, then it fades into the actual content that I want to load. So after observing several colorbox examples on the website, I'm somewhat sure that the little box is supposed to be a pre-loading box. Is there any way I could disable this box from appearing entirely?

I've tried silly things like tweaking the CSS and setting display: none to all loading items, but it doesn't work.

enter image description here

I want to avoid any CSS hacks and solve this problem by modifying the javascript. Ideally, some way for the loading box to never show up, as I won't be using colorbox for anything that takes a long time to load.

Recreated the problem on jsfiddle using my modified colorbox javascript and CSS. The ajax content won't load there, but the little box that I want to get rid of still shows up: http://jsfiddle.net/hPEXf/

Thanks in advance!

Upvotes: 16

Views: 6048

Answers (4)

Avanika
Avanika

Reputation: 1

I was working with

$(function(){
    $("#awesome-link").colorbox({
        onOpen: function(){
            $("#colorbox").css("opacity", 0);
        },
        onComplete: function(){
            $("#colorbox").css("opacity", 1);
        }
    });
});

But it turns to black fade then open color-box when i'm working with transition:"fade" properties of colorbox.

Now i change my code in jquery.colorbox.js

comment or remove the below code in colorbox js file 

                /*var initialWidth = setSize(settings.get('initialWidth'), 'x');
                var initialHeight = setSize(settings.get('initialHeight'), 'y');
                var maxWidth = settings.get('maxWidth');
                var maxHeight = settings.get('maxHeight');

                settings.w = (maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth;
                settings.h = (maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight;

                $loaded.css({width:'', height:settings.h});
                */


                /*$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div,"LoadingGraphic")[0]]);  */                                                                

                 $slideshow = $tag('button', "Slideshow")/*,
                 $loadingOverlay*/

                 /*  clearTimeout(loadingTimer);
                 $loadingOverlay.hide();*/

                 /* loadingTimer = setTimeout(function () {
                 $loadingOverlay.show();
                  }, 100);*/

And change the below code 

             overlay.css({
                    opacity: opacity === opacity ? opacity : '',
                    cursor: settings.get('overlayClose') ? 'pointer' : '',
                    visibility: 'visible'
              }).show(500);

To,

             setTimeout(function(){     
                 $overlay.css({
                       opacity: opacity === opacity ? opacity : '',
                       cursor: settings.get('overlayClose') ? 'pointer' : '',
                       visibility: 'visible'
                  }).fadeIn(500);
      }, 600);

and now it's working smoothly.

Upvotes: 0

op1ekun
op1ekun

Reputation: 1928

I was working with ColorBox few days ago so I believe I'm quite fresh on the topic. Did You consider using built-in callbacks?

Specifically onOpen and onComplete?

If we go with the padding solution mentioned by Jay you can set padding to 0 in the onOpen and set it back to desired value in the onComplete.

It seems to be a clean solution.

Upvotes: 2

Arash Milani
Arash Milani

Reputation: 6308

As @op1ekun said ColorBox has two events that are useful in your situation.

onOpen -> Callback that fires right before ColorBox begins to open.

onComplete -> Callback that fires right after loaded content is displayed.

It seems simply just hiding lightbox using either display:none or $("#colorbox").hide() don't work. so I used opacity to hide the lightbox while content gets loaded. I've set up a jsfiddle by forking yours http://jsfiddle.net/fDd6v/2/ that demonstrate this in action. Here is the code that has been used:

$(function(){
    $("#awesome-link").colorbox({
        onOpen: function(){
            $("#colorbox").css("opacity", 0);
        },
        onComplete: function(){
            $("#colorbox").css("opacity", 1);
        }
    });
});

Upvotes: 10

Jay Blanchard
Jay Blanchard

Reputation: 34416

I changed the following in the CSS - 

#colorbox{border: 1px solid #ebebeb;}    
#cboxContent{background:#fff; overflow:hidden;padding: 20px;}

to this - 

#colorbox{border: 0px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 0px; margin: 0px;}

And the box is hidden until it expands to show the content. I'm not sure if that will be detrimental to your overall style though. You should be able to manipulate the margin of the form so that you get white space around it.

http://jsfiddle.net/hPEXf/1/

Upvotes: 3

Related Questions