IE and back button help on script to display targeted div

a question about a well known script (suckerfish pseudo class target for IE

[jerry95]

Hi there, regards to everyone. I really don't know if this is the right place to post this question because I can't find out if the problem is the script or something with my markup. But anyways, I need help. I live in Mexico City and am building a site which uses the funtion created by Patrick Griffith, author of the HTML Dog. If there's need I paste the function at the end of this message. I've previously worked with the function and worked fine. But this time I have a trouble that I can't find out if it's something related to the browser or what is it. Here's the thing: I have a scrollable div set to overflow x: hidden and overflow y:scroll, there I point to three anchors that should display the related three divs which display is hidden except when they are targeted. Of course the page works fine in Firefox, Safari, Opera, and other common browsers, but the point is that it should work as well in IE with the script to cheat it. I started building the page and noticed there was a problem when the div's were displayed, sometimes it didn't work. I seriously ignore if there's some trouble with the markup, I tried checking the tags in the lists that and unordered lists where the anchor is, and nope. But, suddenly, it worked! Just as expected, the divs are displayed when the link is clicked. I also use the same trick to display the rest of 11 divs where I have photos of the products on sale. But, here goes the question: Is there a trouble with a scrollable div, with positioning (the containing div is relatively positioned, which I figure should be fine) or with using anchors in a list, etc. As stupid as may sound, I ask this question because the page loads fine, except when I hit the back button and forward button of the browser (am using IE 8, haven't tried with IE7 nor IE6). The thing is when I hit the back button the page loads with an error, ahd then the anchors are useless. Please help! I don't know enough Javascript to understand if there's a trouble that has to do with the specific markup, the style rules or the script. How does it relate to the way the back button works? If there's need I'll post the entire markup, and finally I post the function. Any hint will be greatly appreciated.

sfTarget = function() {
var sfEls=document.getElementsByTagName("H2");
var aEls = document.getElementsByTagName("A");
document.lastTarget = null;
for (var i=0; i<sfEls.length; i++) {
if (sfEls[i].id) {
if (location.hash==("#" + sfEls[i].id)) {
sfEls[i].className+=" " + cls;
document.lastTarget=sfEls[i];
}
for (var j=0; j<aEls.length; j++) {
if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function() {
if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;
return true;
}
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfTarget);

That's the function that works fine, thanks to Patrick Griffith, and although I can gather that it goes through the tags I need (of course I work with DIV and not Hn) and renames the class applied to it by a regular expression, I can't figure what's going wrong.

[daveVk]

When you go back to the page the onload may or may not happen, as a first step I would put an alert at the top of sfTarget and see if IE acts different from others in this regard.

[jerry95]

Hi Dave and thank you for answering to my question. I've been busy and couldn't check on what you suggested, but I finally did and I suppose IE (am using IE 8.0.6) in Windows Vista, is no different from browsers that do load the function when hitting the back button. At least, the alert I put ("Welcome back") works and shows whenever I go back to the page. But the thing is that the page still shows an error, which it doesn't when loaded the first time, and many of the anchors which are targeted do not work the second and nth time. I also am using a function to extract the title of each image and use it as captions, but as usually do, I can't understand if and what is the conflict. I seriously think I don't understand something about coding because from what I gather many methods and so that I think should work somehow behave different from what I think. Could you help me pointing further what's wrong?

The function sfTarget remained the same except there's now a method of alert('Welcome back') at the beggining of the defined function, and the other function am using is as follows:

function extractImageTitles() {
images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var title = images[i].getAttribute('title');
if ((title) && (title != '')) {
if (title.match('http://', 'i')) {
newlink = document.createElement('a');
newlink.setAttribute('href', title);
newlink.setAttribute('title', ('Go to ' + title));
newlink.appendChild(document.createTextNode('Image source'));
var newdiv = document.createElement('div');
newdiv.className = 'caption';
newdiv.appendChild(newlink);
images[i].parentNode.appendChild(newdiv);
images[i].removeAttribute('title');
} else {
var newdiv = document.createElement('div');
newdiv.className = 'caption';
newdiv.appendChild(document.createTextNode(title));
images[i].parentNode.appendChild(newdiv);
images[i].removeAttribute('title');
}
}
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function(e) {
extractImageTitles();
});

Thanks in advance!

[daveVk]

As you see "welcome back" on the back button, I wonder if sfTarget if modifing the original content, or the previously modified page in this case.

Try replacing

sfEls[i].className+=" " + cls;

with

alert( 'classname=' + sfEls[i].className + ' cls=' + cls );
sfEls[i].className+=" " + cls;

and check if alerts the same the second time around.

You may need some code in sfTarget to exit if page already "cooked"

[jerry95]

Dave, after messing with the file once the site is complete, I figure there's little chance that someone will go back and forth with the browser since the only link within the page to the rest of the site is to the home page and back to the page in question. I've given up and as the page seems to load fine sometimes when the forward or backbuttons are hit. I will upload the site and post the link so you can see the entire html code. The script seems to have trouble with the page structure, I think, since there are lots of scrolllable divs and the links (anchors) are within them, I suppose. Thanks for what its worth, and, I forgot to say, changing the alert to the part where the script deals with the equal operator to give the class a new name just doesn't alert anything at all, neither onload nor hitting back and forth buttons in the brower, funny, since putting an alert at the very beginning of the function did produced an alert.

[daveVk]

changing the alert to the part where the script deals with the equal operator to give the class a new name just doesn't alert anything

Ok there are probably no H2's to modify.

May wish to try a bit further down where it does the same on A tags.

if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;

to

if (this.targetEl) {
alert( 'classname=' + this.targetEl.className );
this.targetEl.className+=" sftarget";
}
document.lastTarget=this.targetEl;