Hi all,
I’m tearing some hair out.
I’m rewriting a site and one of the things I’d like to do is keep it valid (I can’t make this accessible, not even simply, to save my life).
Our old/current site has these goofy addThis icons. Near as I can tell, the old page calls an external addThis script in the <head> (which is minimised and therefore unreadable), which created an iframe for something (not sure what). Also, the old pages have a bunch of addThis-specific HTML which is both invalid and ugly. The script fills these elements with spans and attributes so that the user gets a bunch of social networking icons to click (mouse only).
One of the new sites I have set up like the old sites, with the bogus HTML hand-written into the page:
[noparse]http://stommepoes.nl/Jeansselling/jeansselling2/artikel.html[/noparse]
(sorry for the unclickable but even changing the settings here did not stop the forums from adding titles to these)
<script type="text/javascript" src="js/jquerylightbox.js"></script>
<script type="text/javascript">
$(function() {
$('.thumbs a').lightBox({fixedNavigation:true});
});
</script>
<script type="text/javascript" src="js/artikelForms.js"></script>
[b]<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=foobar"></script>[/b]
</head>
So, that last script is the addThis script. And in the HTML is
<div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_hyves"></a>
<a class="addthis_button_googlebuzz"></a>
<a class="addthis_button_facebook"></a><span class="addthis_separator">|</span>
<a href="http://www.addthis.com/bookmark.php?v=250&username=foobar" class="addthis_button_expanded">Meer</a></div>
[ot]
Yeah, anchors without hrefs. The script adds hrefs to some of the anchors, but not for mail or twitter. So you see I’ve added for mail to make it focusable with keyboard, but twitter can’t have that because the script also adds target=“_blank” which means OUR page opens in a new window/tab.[/ot]
So if I’m writing a valid version of this site, I thought I’d just have Javascript add the bogus HTML for me, since it’s completely useless without Javascript anyway.
Since there’s already a lightbox.js that needs jQuery, I fudged my way around adding bogus HTML with it (looks to me like innerHTML basically).
Another page has an example of this:
[b]<script type="text/javascript" src="js/jquerylightbox.js"></script>[/b]
<script type="text/javascript">
$(function() {
$('.thumbs a').lightBox({fixedNavigation:true});
});
[b] $(function() {
$('.artikel').append('<div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a><a class="addthis_button_twitter"></a><a class="addthis_button_hyves"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_facebook"></a><span class="addthis_separator">|</span><a href="http://www.addthis.com/bookmark.php?v=250&username=jeansselling" class="addthis_button_expanded">Meer</a></div>');
});[/b]
</script>
<script type="text/javascript" src="js/artikelForms.js"></script>
[b]<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=foobar"></script>[/b]
But, doing this meant the icons didn’t show up in IE (7 or 8… I don’t have 9 and didn’t bother checking 6). I can verify that my script is indeed loading the HTML, but the addThis script isn’t doing anything with it. But, while trying out IE’s debugger, I did get icons. This told me the script was running possibly before the bogus HTML was added.
So I thought I’d be clever and have the same script who’s creating the bogus HTML create the script as well, since this should mean one gets executed first and then the other one.
Don’t have a page doing this but it was something like
<script type="text/javascript" src="js/jquerylightbox.js"></script>
<script type="text/javascript">
$(function() {
$('.thumbs a').lightBox({fixedNavigation:true});
$('.artikel').append('<div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a><a class="addthis_button_twitter"></a><a class="addthis_button_hyves"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_facebook"></a><span class="addthis_separator">|</span><a href="http://www.addthis.com/bookmark.php?v=250&username=foobar" class="addthis_button_expanded">Meer</a></div>');
[b] var scriptZ = document.createElement('script');
scriptZ.type = 'text/javascript';
scriptZ.src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=foobar';
$('head').append(scriptZ);[/b]
});
</script>
<script type="text/javascript" src="js/artikelForms.js"></script>
I’m not familiar enough with jQuery to tell if I can stuff everything in one function like that, but I did try with separate ones too.
I also tried appending the script to the body. No dice.
Now this got the script interacting with the bogus HTML in IE! Meaning, I got icons to appear!
But Opera broke. Opera no longer let the script interact with the icons, and only the inserted HTML appeared.
Firefox seems fine with any way I do it. For some reason.
And, while I thought I had IE working, I still didn’t: I tested the Twitter button by logging into twitter in another tab and then clicking the icon. Instead of sending
“Name of item” “some tiny url” via @addThis
(like it does in FF)
it sends
Undefined via @addThis
So, I can’t read the addThis code, can’t tell which end is up there or see how it grabs the correct information in IE.
But the script and the way the icons works ALL the time in ALL browsers if I have the dodgy HTML just sitting in the source by default. Which I don’t want, for two reasons:
-users without Javascript get some retarded link that means nothing and none of the social button thingies
-it’s invalid and I can’t make it valid.
So I’m guessing a lot of this has to do with timing and firing but I can’t follow it in Dragonfly nor in the IE debugger as it just seems to jump into either the jQuery stuff or the addThis stuff and then just ends.
Also, found out trying to add the script to the end of the page with jQuery sucks balls cause I can’t see it in generated source. So to check that I’m actually loading the addThis script, I have this:
[noparse]http://stommepoes.nl/Jeansselling/jeansselling2/artikel-combo.html[/noparse]
where at the bottom I have
</div>
<script type="text/javascript">
alert('IE FOO');
alert(document.body.lastChild);
</script>
<script id="addThis" type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=jeansselling"></script>
</body>
</html>
The script loads, definitely after the bogus HTML is added to the DOM (and it is, I can see it in IE), but it doesn’t add all the spans and icon images to it like it does if that HTML were in the source.
Does anyone have any idea why this is happening? What am I missing?
And no, I really don’t know jQuery and wouldn’t be using it except that the lightbox needs it.