While the Jquery tools code seems to work well in chrome and FF it is not working in IE 6 or 7 ... http://designbracket.com/ I am using Overlay on the Our Services Link and the links under it (please excuse the formatting for now... still working on the site)
<?php jquery_plugin_add('overlay'); ?>
<?php
drupal_add_js(
'$(function() {
// positions for each overlay
var positions = [
[0, 530],
[400, 20],
[400, 530],
[0, 20]
];
// setup triggers
$("#Mone[rel],#Mtwo[rel], #Mthree[rel], #Mfour[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
closeOnClick: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});',
'inline'
); ?>
<STYLE>
div.overlay {
/* growing background image */
background-image:url(http://flowplayer.org/img/overlay/white.png);
/* dimensions after the growing animation finishes */
width:600px;
height:470px;
/* initially overlay is hidden */
display:none;
/* some padding to layout nested elements nicely */
padding:55px;
}
/* default close button positioned on upper right corner */
div.overlay div.close {
background-image:url(http://flowplayer.org/img/overlay/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;
}
</STYLE>
<table style="margin-left:75px;">
<tr>
<td style="width:165px; vertical-align:top">
<a href="#" rel="div.overlay:eq(0)" id="Mone"style="color:#12636e;font-size:17pt;">Our Services</a></br>
<ul>
<li><a href="#" rel="div.overlay:eq(1)" id="Mtwo">Digital Media </a></li>
<li><a href="#" rel="div.overlay:eq(2)" id="Mthree">Online Marketing</a></li>
<li><a href="#" rel="div.overlay:eq(3)" id="Mfour">Websites</a></li>
</ul>
</td>
</tr>
</table>
<div class="overlay">
<h2 style="margin:10px 0">Overlay </h2>
<p style="float: left; margin:0px 20px 20px 0;">
<img src="http://static.flowplayer.org/img/title/tools24.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay">
<h2 style="margin:10px 0">Overlay <me>#2</me></h2>
<p style="float: left; margin:0px 20px 20px 0;">
<img src="http://static.flowplayer.org/img/title/tools24.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay">
<h2 style="margin:10px 0">Overlay <me>#3</me></h2>
<p style="float: left; margin:0px 20px 20px 0;">
<img src="http://static.flowplayer.org/img/title/tools24.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay">
<h2 style="margin:10px 0">Overlay <me>#4</me></h2>
<p style="float: left; margin:0px 20px 20px 0;">
<img src="http://static.flowplayer.org/img/title/tools24.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay">
<h2 style="margin:10px 0">Overlay <me>#5</me></h2>
<p style="float: left; margin:0px 20px 20px 0;">
<img src="http://static.flowplayer.org/img/title/tools24.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
Kindly suggest what shud I do to make it work in IE 6 and 7 . To make it convenient to check the code I have ensured that it has the HTML and CSS within it .. So to check simply cut copy paste in ur test drupal site.
Thanks
I was able to fix the problem .. Apparently IE was causing trouble only thanks to an extra comma..