Addthis button displays behind select boxes on IE6
emackn - February 20, 2009 - 20:49
| Project: | AddThis Button |
| Version: | 6.x-2.6 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
I need some help from anyone that has run into this problem before. The "Bookmark & Share" dialog displays fine over my select boxes on Firefox and IE7, but for IE6, the dialog appears behind my select boxes. This is a bug in IE 6, but I found a work around, http://www.hedgerwow.com/360/bugs/css-select-free.html.
I added the workaround code without any success. Thought I would post here to see if you've seen this before and have any insite.
To add the workaround, I added the iframe code to the else return statement of the theme_addthis_button() funciton.
Attached is an image of the issue.
| Attachment | Size |
|---|---|
| addthis-iframe.jpg | 36.63 KB |
#1
Here's what I chaned the else clause to do,
<?phpelse {
return ( sprintf('
<div class="addthis-select-free"><div>
<a href="http://www.addthis.com/bookmark.php"
onmouseover="return addthis_open(this, \'\', \'%s\', \'%s\')"
onmouseout="addthis_close()"
onclick="return addthis_sendto()"><img src="%s" width="%d" height="%d" %s /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
</div>
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>
',
$teaser ? url('node/'. $node->nid, array('absolute' => 1) ) : '[URL]',
$teaser ? addslashes($node->title) : '[TITLE]',
addslashes(variable_get('addthis_image', 'http://s9.addthis.com/button1-share.gif')),
addslashes(variable_get('addthis_image_width', '125')),
addslashes(variable_get('addthis_image_height', '16')),
variable_get('addthis_image_attributes', 'alt=""')
));
}
?>
then added the following to the stylesheet,
.addthis-select-free
{
position:relative;
z-index:10;/*any value*/
overflow:hidden;/*must have*/
width:33em;/*must have for any value*/;
}
.addthis-select-free iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}
#2
This is off topic, but please don't hack the module. Use phptemplate_addthis_button function in your themes template.php instead. This way you don't have to hack the module again when updating it to next version.
Correct way of implementing this in your template.php:
function phptemplate_addthis_button($node, $teaser) {if (variable_get('addthis_dropdown_disabled', '0')) {
return ( sprintf('
<a href="http://www.addthis.com/bookmark.php"
onclick="addthis_url = location.href; addthis_title = document.title; return addthis_click(this);">
<img src="%s" width="%d" height="%d" %s /></a>
',
$_SERVER['HTTPS'] == 'on' ? addslashes(variable_get('addthis_image_secure', 'https://secure.addthis.com/button1-share.gif')) : addslashes(variable_get('addthis_image', 'http://s9.addthis.com/button1-share.gif')),
addslashes(variable_get('addthis_image_width', '125')),
addslashes(variable_get('addthis_image_height', '16')),
addslashes(variable_get('addthis_image_attributes', 'alt=""'))
));
}
else {
return ( sprintf('
<a href="http://www.addthis.com/bookmark.php"
onmouseover="return addthis_open(this, \'\', \'%s\', \'%s\')"
onmouseout="addthis_close()"
onclick="return addthis_sendto()"><img src="%s" width="%d" height="%d" %s /></a>
<script type="text/javascript" src="%s/js/152/addthis_widget.js"></script>
',
$teaser ? url('node/'. $node->nid, array('absolute' => 1) ) : '[URL]',
$teaser ? addslashes($node->title) : '[TITLE]',
$_SERVER['HTTPS'] == 'on' ? addslashes(variable_get('addthis_image_secure', 'https://secure.addthis.com/button1-share.gif')) : addslashes(variable_get('addthis_image', 'http://s9.addthis.com/button1-share.gif')),
addslashes(variable_get('addthis_image_width', '125')),
addslashes(variable_get('addthis_image_height', '16')),
variable_get('addthis_image_attributes', 'alt=""'),
$_SERVER['HTTPS'] == 'on' ? 'https://secure.addthis.com' : 'http://s7.addthis.com'
));
}
}
#3
I hear what you are saying, and I'm not trying to hack the module. I'm trying to find a solution to a problem. And at the moment adding the fix directly to theme function was where I was at so I did it there. I mean, when you have to copy and paste the entire theme function into your template file.. you might as well do in module file, until you find your workaround.
#4