a jquery script loaded before other jquery scripts

[maofree]

Hi to all
I use fancybox to show a logo at loading of the homepage, it's shown just for 2 seconds, but in the page there are other jquery effects, like a gallery and sometimes the images of this gallery are loaded before that logo (overlay popup), especially when the connection is slow.
I use jquery.ready.... to load all these effects, there is a method to load this overlay logo before the other effects.
And is it possible to manage the cookies to show that logo just one time in the homepage and not everytime it's loaded??and how?? can you show me some pdf or website to know this things??

thanks

byeeeeee

[Airshow]

Mao,

If you're lucky, the fancybox effect has a "complete" callback (see fancybox API) which will allow you to schedule the other effects to occur after fancybox has finished.

If there's no "complete" callback, you can use javascript's setTimeout() to schedule the other effects. eg.(in pseudo code):

$(document).ready(function() {
  $("selector").fancybox({params});
  setTimeout(doMyOtherEffects, 2500); //for a 2.5 second delay before function doMyOtherEffects is called.
});

Airshow

[maofree]

Hi Airshow
thanks for your answer, but I've tried setTimeout but it is not good for my use, because the effect is delaied of 2500 but the gallery's images are loaded before the logo look here

http://www.corbuccichianti.com
(in the page source you can see my solution for this gallery and logo)

if I use this queryloader solution for 2-3 seconds, after that the fancybox logo delay after 2 seconds and nobody see this problem

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Can you write some example for a fancybox callback's solution, if you want???

byeeee

[Airshow]

Mao,

Good news, fancybox has an onComplete option, and you already use it.

You need to modify the code to be something like this.

$(document).ready(function() {
	QueryLoader.init();
	function doMyOtherEffects() {
		$("#fancybox-wrap, #fancybox-overlay").delay(4500).fadeOut();
		$("a#details-product").fancybox({
			'centerOnScroll': true
		});
	}
	
	$("#hidden_link").fancybox({
		'showCloseButton': false,
		'padding': 0,
		'transitionIn': 'elastic',
		'transitionOut': 'elastic',
		'onComplete': doMyOtherEffects
	}).trigger('click');

	$('ul.menu').superfish();
	$('.cycle-gallery').cycle({
		fx: 'toss',
		random:  true,
		timeout: 6000
	});
	$('#slideshow').slides({
		preload: true,
		preloadImage: 'imgages/loading.gif',
		effect: 'fade',
		crossfade: true,
		play: 5000,
		slideSpeed: 500,
		fadeSpeed: 2500,
		pause: 5000,
		paginationClass: 'page',
		generatePagination: false
	});
	$('a[href=#]').click(function(){
		$('html, body').animate({scrollTop:0}, '400');
		return false;
	});
});

This may well not be exactly what you want but you should get the idea.

As you will see, I have created the function doMyOtherEffects() and moved some code into it. You may additionally want to move $('.cycle-gallery').cycle(...) and $('#slideshow').slides(...) into doMyOtherEffects.

As far as I can tell, $('ul.menu').superfish() , and $('a[href=#]').click() should not be moved.

I have not tested any of this so I'm not too sure whether there are consequences to delaying the other effects. In particular, you may need to suppress unstyled/unanimated content until it is ready to be shown. If necessary, this should be quite simple. Please ask.

Airshow

[maofree]

Thanks Airshow
but there is the same behavior of setTimeout, the gallery start after fancybox overlay but the images no. A possibility is to make invisible the div that contain that gallery just for 2-3 seconds.
With queryLoader I have mask this bug
when I have some free time, I'll study seriously javascript language
I'm happy to meet because you are like me to partecipe in helping others in need

byee

[Airshow]

Mao,

My problem is not fully understanding the correct order of events.

If you could make a list for me, then I should be able to write the javascript.

Airshow

[maofree]

You help me in this topic and I help another guy in a different forum. It's so funny

ok
I want the logo to appear before everything over the center gallery
with a fast connection I have not problems, but with a slow connection the logo doesn't start before gallery or music but after 2-3 seconds
So I thought about a delay of gallery's loading
the other effects are not important, the problems is only in the homepage
You have teach me some things and I'm happy for this and with queryLoader the website is ok, don't worry about that, but if you like to study this issue ok I'm here to study with you without any problems. I do not want to bother you

[Airshow]

I am still uncertain but I think it may be helpful to you to understand that: $(document).ready(function() {...}; fires as early as possible, while the page (and its images) are still loading. This is a feature of jquery. window.onload = function(){...}; fires later, when the page and all of its images have loaded. This is a feature of raw javascript, though the function can contain jquery statements.

Both can coexist on the same page, each containing its own functionality.

It is possible that moving some of your jquery into a window.onload = function(){...}; block, will give you the control of even timing that you need.

You need to experiment.

Airshow

[maofree]

Yes Airshow,
thanks alot
I know that solution but I didn't remember the word after window. When I wrote this topic I was looking for this solution.
So I'll move inside $(document).ready(function() the fancybox overlay and the gallery inside window.onload
I'll try it later

byeeee

[Airshow]

Maofree, I'm keeping my fingers crossed for you.

Airshow

[maofree]

Hi Airshow
I've tried, yes the gallery start after overlay fancybox logo, but it has a strange behavior, so in this case it doesn't work well.
But thank you for your time and suggestions, I had forgotten that option window.onload

Can we make friends??

[Airshow]

Mao,

Sorry to hear it's still not perfect. More may be possible by scheduling the sequence desired of events when the page loads.

I don't use Daniweb's "friends" system but please feel free to consider me a friend.

Airshow

[maofree]

Hi
How is possible to schedule the desired sequence of events when the page loads?
the javascript position in $(document).ready...

[Airshow]

Mao,

I would need to see the whole page in its current state.

Airshow

[maofree]

if you go in my website and than in portfolio, you can find corbucci's website

Can we exchange our e-mail??

[Airshow]

Mao,

My problem is that there are so many custom effects on the page, I can't tell what causes what.

I would love to help but it would take me more time to sort it out than I have available right now.

Sorry.

Airshow

[maofree]

Hi
ok
I think window.onload , Timeout ... works in a similar mode, but the problem is when the gallery doesn't work at loading moment, because there isn't some code to fix the images when it is not present the gallery javascript.
Another solution is to hide the div that contain the gallery example
putting all jquery effects in the normal $(document).ready and the gallery and the javascript that hide the gallery container in the window.onload

Do you know a good javascript to hide a div???? (do not worry, however, I can also find it by myself)

bye

[Airshow]

Yes, that's worth trying.

Initially hide with css, myDiv{display:none} or {visibility:hidden} .

In javascript, show with $("#myDiv").show(); , $("#myDiv").css('display','block'); or $("#myDiv").css('visibility','visible'); .

Airshow

[maofree]

Ok Airshow
I'm going to study your suggestions

thanks

[maofree]

Hi Airshow

sorry for my delay about this issue
I've found a good solution:

1)
put in the css for this div
#gallery the attribute visibility: hidden;

2)
put this line

setTimeout('gallerydelay()', 3500);

inside this code

jQuery(document).ready(function($) {
....
}

3)
outside this code

jQuery(document).ready(function($) {
....
}

put

function gallerydelay() {
$("#gallery").css('visibility', 'visible');
}

now the gallery come out after 3.5 seconds

byeeeeeee

[Airshow]

maoFree, I remember you. It's only been 8 months!!!

You should find the code simplifies as follows:

$(document).ready(function() {
	...
	setTimeout(function() {
		$("#gallery").css('visibility', 'visible');
	 }, 3500);
};

Airshow

[maofree]

Thanks Airshow
yes that code is better

byee