close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Google+1 and Stumbleupon behave badly in IE

Thread began 2/25/2012 12:37 am by ccooper309155 | Last modified 2/29/2012 8:42 pm by ccooper309155 | 1483 views | 9 replies |

ccooper309155

Google+1 and Stumbleupon behave badly in IE

Using SM Toolkit 2.0

Google+1 and Stumbleupon are not behaving properly in IE.

In IE9, the icons appear but the whole "toolkit" disappears when they are moused-over.

In IE8, neither icon appears.

In IE7 they also act weird, although I don't remember exactly what weirdness they do but it's similar weirdness.

All work okay in Chrome, FF and Safari.

See example here:

printA.asp

Just mouseover the globe icon/share

All help and hints appreciated!

Sign in to reply to this post

Jason ByrnesWebAssist

I think the script you are using for showing and hiding the like buttons is causing the issue. I dont see where the onmouse over event is defined, but if i change the css for the social media buttons to remove the display none attribute, the problem goes away.

Sign in to reply to this post

ccooper309155

If it is the script, it's the script generated by Social Media Toolkit 2.0.

What's wrong with it.

Sign in to reply to this post

ccooper309155

This is the content of the wasocial.js generated by SMT 2.0:

function addBookmark(title, url) {
if (window.sidebar) { // firefox
window.sidebar.addPanel(title, url,"");
} else if( document.all ) { //MSIE
window.external.AddFavorite( url, title);
} else {
alert("Sorry, your browser doesn't support this feature");
}
}

Sign in to reply to this post

ccooper309155

This the wasocial.css generated by SMT 2.0:

/** Horizontal Counter **/
.wa_social_counter_hr {
overflow:hidden;
}
.wa_social_counter_hr img {
border:none;
}
.wa_social_counter_hr .button {
float:left;
margin:0 5px;
}

/** Vertical Counter **/
.wa_social_counter_vr {
overflow:hidden;
}
.wa_social_counter_vr img {
border:none;
}
.wa_social_counter_vr .button {
float:left;
margin:0 5px 0 0;
}

/****** Icons ******/
.wasocial {
position:relative;
}
.wasocial .share_icon {
margin-right:1px;
}
.wasocial a {
text-decoration:none;
font-size:18px;
display:block;
color:#999;
font-family: 'GillSansMTCndnsd', Arial, Helvetica, sans-serif;
}
.wasocial img {
border:none;
}
.wasocial .icons {
float:left;
margin:5px;
}
.wasocial:hover .share {
display:block;
}
.wasocial .share {
display:none;
background-image:url(icons/icons_bg.png);
background-repeat:repeat-x;
border:1px solid #000000;
background-color:#D7D7D7;
position:absolute;
}
.wasocial .share .wrapper {
overflow:hidden;
}
/** Twitter **/
#custom-tweet-button a {
width:20px;
height:20px;
display:inline-block;
background: url(icons/twitter.png) left center no-repeat;
}
/** facebook **/
.FBConnectButton_Simple, .FBConnectButton_RTL_Simple {
background-image:none !important;

}
.FBConnectButton_Simple .FBConnectButton_Text_Simple {
background-image: url("icons/facebook.png") !important;
display:block;
height: 20px;
width: 20px;
margin:0 !important;
}
/** digg **/
.db-wrapper .db-digger {
background: url(icons/digg.png) no-repeat scroll 0 0 transparent;
height: 20px;
width: 20px;
}
/** delicious **/
.large #delicious {
border:none;
}
/** google buzz **/
a.google-buzz-button .buzz-button-2 {
display:none !important;
}
a.google-buzz-button .buzz-button-1 {
background: url(icons/google_buzz.png) no-repeat scroll 0 0 transparent !important;
height: 20px !important;
width: 20px !important;
}
a.google-buzz-button .buzz-button-3 {
display:none !important;
}
/** stumble on **/
.badge6 .suHostedBadge a {
background-image:url(icons/stumble_upon.png) !important;
}
/** digg **/
.db-wrapper .db-digger {
cursor:pointer;
}

Sign in to reply to this post

Jason ByrnesWebAssist

I'm saying it is the script you have in place for showing and hiding the social media plugins, that seams to be what is causing the problem.

Sign in to reply to this post

ccooper309155

And I'm saying that if there is a script (and it's not a hover event) it was generated by SMT 2.0.

Look at your Insert Share Buttons extension in DW. There is a check box that says 'Hide buttons under a "Share" link.'

That is what was selected so if there is faulty code it was generated by SMT 2.0.

It sounds like you might not be aware of this possibly buggy SMT 2.0 feature.

Sign in to reply to this post

Jason ByrnesWebAssist

I apologize, your correct, i was not aware of the option to hide the icons, you are also correct that there is a bug in this feature.

basically, it is an issue with using the css :hover pseudo class and iframes. Both Google and Stumble Upon use iframes for their buttons which don't behave correctly with the hover.

I have logged this as a bug and we will probably correct it by using a javascript onclick method for showing and hidding the buttons. you can add this to your page by editing the wasocial.css file and commenting the hover method:

/*.wasocial:hover .share {
display:block;
}*/



add the following script code just before the </head tag:

<script type="text/javascript">
function toggleSocial() {
var socialElem = document.getElementById('share');
if(socialElem.style.display == 'block') {
socialElem.style.display = 'none';
} else {
socialElem.style.display = 'block';
}
}
</script>



edit the share div tag:

<div class="share">


to include an ID:

<div class="share"  id="share">



and edit the link:

<a href="#"><img src="../webassist/social/icons/greyEarth.png" align="absmiddle" class="share_icon" />&nbsp;share</a>



to call the toggleSocial function on click:

<a href="#" onClick="toggleSocial();"><img src="../webassist/social/icons/greyEarth.png" align="absmiddle" class="share_icon" />&nbsp;share</a>




NOTE:
Google + only support IE 8 and above, they do not support the Google + buttons in older versions of IE
answer.py?hl=en&answer=1140194

Sign in to reply to this post

ccooper309155

Thank you.

I will implement your changes and report back.

Sign in to reply to this post

ccooper309155

Tried it and it worked for the most part.

In IE9, it now works as it should.

In IE8, Google+ appears but StumbleUpon is still missing (but I can live with that).

In IE7, neither appear but no biggie.

I also improved on your fix as I preferred it when it was a hover event than a click event.

To this end, I changed onClick to onMouseOver.

I added a "toggleUnSocial" function to your script and added an onMouseOut trigger to the link.

Then I moved both the onMouseOver and onMouseOut triggers from the link to the div with the wasocial class like so:

<div class="wasocial" onMouseOver="toggleSocial();" onMouseOut="toggleUnSocial();">

The result is here:

printAA.asp

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...