Forums

kooh

Hello!

I'm working on a page for my band in which I am using the full page background technique as described here in CSS-Tricks. It works fine in FF, IE>6, Opera and almost* fine in Chrome. It also works just fine in IE<=6 when using the MooTools script as (also) described in the aforementioned article.

Looks like this (of course in the [head]):

	<!--[if lt IE 7]>
		<script type=\"text/javascript\" src=\"resources/js/mootools.js\"></script>
		<script type=\"text/javascript\" src=\"resources/js/core.js\"></script>
		<script type=\"text/javascript\" src=\"resources/iepngfix/iepngfix_tilebg.js\"></script>
		<style type=\"text/css\" media=\"screen\">
			.iepngfix { behavior: url(iepngfix.htc) }
			.menutabs li a { background: none; }
			.menutabs li a:hover { background: black; }
		</style>
	<![endif]-->

As you can see I also use a PNG Transparency Fix (which I currently don't remember where I found but probably here aswell)...

I would also like to use the ShadowBox script for some lightbox-type galleries. The ShadowBox script may work with any of the available libraries and just for testing I chose jQuery. I thought I may, in the future, use more scripts, and, as I've read, a lot of them use jQuery.

Looks like this:

	<script type=\"text/javascript\" src=\"resources/js/jquery.js\"></script>
	<script type=\"text/javascript\" src=\"resources/js/shadowbox/shadowbox.js\"></script>
	<script type=\"text/javascript\">
	Shadowbox.init();
	</script>

The thing is that when I use this last part of the code, the full-page background doesn't work in IE6. It just shows the image fully centered but with white space all around. When I comment out (or delete) the jQuery.js thus

<!-- <script type=\"text/javascript\" src=\"resources/js/jquery.js\"></script> -->

it works just fine...

Why does this happen? Is it because two libraries are in use? How can I fix that?
Can the full-page background be implemented with the jQuery library?

I can upload some screenshots if needed. I may also have a test page available in a few days..

Thank you in advance!
Kooh!

[i]* About the full-page background in Chrome:
In Chrome, even the page here in CSS-Tricks has white space on the top and bottom of the page.

kooh

Well, I found the solution..
It was rather simple, just putting this after all the libraries have loaded:

<script>
	jQuery.noConflict();
</script>

treehouse : what would you like to learn today?

Forums

[Solved] jQuery, Mootools, FullscreenBG & IE6 Conflict