When the page loads one of the internal links gets clicked

[dog]

Hello everyone,

I'd like a piece of javascript that simulates clicking one of the internal links on the page once it's loaded.

Why? Because I've used some CSS to reposition the anchors. Once the page is all loaded the internal menu works perfectly, however links from other pages directed at the anchors bring the window to the wrong position. Refreshing the page also has this effect.

If anyone want's I'll post code and explain more. Or you can take a look at the site under construction here: http://raiar.org/01/en/home Check out the difference between using the links on the home page and using the side menus. Note: the problem does not occur in Internet Explorer because IE is reading a few line of the CSS differently.

Please. If anyone knows how to effectively read the address bar and click the corrisponding internal link when the page has loaded that would be really useful.

Let me know if that needs more explaining.

Peace and thanks,

Dog

[jscheuer1]

I can't see what you are talking about. However, it is almost never a good idea to do what you are proposing, and virtually impossible to do so in FF. You could have different css - one main css for all browsers, and a supplemental IE only stylesheet. That is usually the best way to deal with such matters.

[dog]

Hey,

Thanks for the reply John. You wrote:

I can't see what you are talking about.

Ok, I've just had a look into that and realised that the problem is only occuring on the Further Information page. Try the "Raiar News Blog" link on the home page example. You'll find yourself badly positioned. Then once you're on that page try the side menu and you'll see that it works fine. Try refreshing the page and the bad positioning occurs again.

I've got a good idea of what's causing the problem. There's a part of the newletter form that hides itself on 'domload'*. I'm guessing that's what's messing with the anchors as the positioning seems to be thrown out by the height of the hidden div. Funny that IE isn't having any trouble with these calculations.

...it is almost never a good idea to do what you are proposing...

Ok, bad idea.

You could have different css - one main css for all browsers, and a supplemental IE only stylesheet. That is usually the best way to deal with such matters.

In this case I've seperated the CSS for IE like this, (the last two lines are only acted upon by IE):

.anchorHolder {
 position: relative; top: -170px;
 /position:inherit;
 /padding-bottom: 20px;
}

This method is working fine, this isn't the problem. However, now you mention it I am interested to learn how to seperate a CSS just for IE. Is there a past thread about doing that?

As far this problem thread goes, it's the positioning of the anchors being thrown out by the self hiding div. I'm going to try getting it to hide on 'load' rather than on 'domready'*.

*I'm using mootools to initialize the javascript. For info about the on 'domready'function check out http://demos.mootools.net/DomReadyVS.Load

If I continue to have problems may be I should take them to the mootools forum. What's the correct etiquette here?

For those of you who are interested here's a copy of the code that initializes the effects.

window.addEvent('domready', function(){

var myPanal = new Fx.Slide('optionalInputs');

var myTab = new Fx.Slide('h5Optional1');

mySlide.hide();
 
$('slidein').addEvent('click', function(e){
	e = new Event(e);
	myPanal.slideOut();
	myTab.slideIn();
	e.stop();
});

And the HTML it applies to:

<h5 id="h5Optional1">
 <a href="#" id="slidein">Optional Details (click here to reveal) : </a></h5>

<div id="optionalInputs">      

 <h5 id="h5Optional2">Optional Details</h5>

 <label for="name">Organisation :</label>
 <input name="orgNews" type="text" id="orgNews" />
 <br>
 
 <label for="email">Location :</label>
 <input name="locationNews" type="text" id="locationNews" />
 <br>
 
 <label for="email">Website :</label>
 <input name="siteNews" type="text" id="siteNews" value="http://" />
 <br>
 
 <label for="email">Interest in Raiar :</label>
 <input name="locationNews" type="text" id="interestNews" />
</div><!-- optionalInputs -->

PEACE

[jscheuer1]

I think the problem is:

.anchorHolder {
 position: relative; top: -170px;
	/position:inherit;
	/padding-bottom: 20px;
}

This places it higher up on the page than it actually is, confusing the browser, which will sometimes see it there, and at other times see it - who knows where? Named anchors were never intended to be used with relative or absolute positioning, as the page is supposed to scroll to the physical location of the named anchor in the source code, and there is no guarantee that any given style associated with a named anchor will be loaded by the browser before it scrolls to the named anchor's location. Instead of using relative positioning, just place it in the actual spot where it should be.

[dog]

That was one of the things I thought of as well. I gave it a try but it didn't make any difference to the problem.

When you refresh the page with something like http://raiar.org/01/en/further/#blog in the address bar you will notice that the page first goes to the correct position and then the height of the page gets reduced and so this 'correct position' is thrown out.

What's causing this reduction in height is fx.slide slideOut() and it happens on 'domready'. Once slideOut() has taken place you can jump from one internal link to another with no problems.

To get an idea of what slideOut() is doing take a close look at the newsletter form. Click to reveal the optional details and slideIn() will be triggered. Click on the form's reset button and slideOut() will be triggered.

I'm on the mootools forum too, looking for some way to have the initial slideOut() take place before the calculation of the window location. In IE it looks like this is already the case.

Does anyone know how I might be able to do this?

[jscheuer1]

The problem does indeed appear to be mootools SmoothScroll. From what I can tell (looking about the web a little), this simply wasn't well thought out for browsers other than IE. Here is a kludge fix that works here for a local version of your page:

<title>Instituto Raiar - Further Information</title>
<script type="text/javascript">
if(window.addEventListener)
window.addEventListener('load', function(){
if(location.hash.replace(/#/,'')!=''){
var h=document.getElementById(location.hash.replace(/#/,''));
setTimeout(function(){h.scrollIntoView();}, 500);
}
}, false);
</script>
</head>

Now, if I knew more about how SmoothScroll works, if it has a function to actually do this smoothly, that would be preferable to scrollIntoView(). However, it is only on page load (after that SmoothScroll seems to work OK), and the SmoothScroll utility seems designed to only initialize a page, and isn't written in a way that lends itself to determining the exact function it is running to scroll to anything.

[jscheuer1]

After looking into this further, it appears you can skip what I suggested in my previous post and replace your slideAndHideTricks.js (on that page) with:

window.addEvent('domready', function(){

var myPanal = new Fx.Slide('optionalInputs').hide();

if(location.hash.replace(/#/,'')!=''){
var h=$(location.hash.replace(/#/,''));
new Fx.Scroll(window).toElement(h);
}

var myTab = new Fx.Slide('h5Optional1');
 

$('slidein').addEvent('click', function(e){
	e = new Event(e);
	myPanal.slideIn();
	myTab.slideOut();
	e.stop();
});
 
$('resetNews').addEvent('click', function(e){
	e = new Event(e);
	myPanal.slideOut();
	myTab.slideIn();
	e.stop();
});

});

This works well in IE 7, Opera, and FF, and is much smoother looking.

[dog]

Hi John,

Thanks very much. The code works perfectly.

I can't say that I understand everything in your code. I notice that you added .hide to the end of the myPanel variable, I didn't know to do that

In your code you added:

if(location.hash.replace(/#/,'')!=''){
var h=$(location.hash.replace(/#/,''));
new Fx.Scroll(window).toElement(h);
}

As far as I can imagine this defines the positions of the internal anchors if they haven't been defined. Is that right?

Whatever you've done it works a treat, thanks a lot. I'd be interested to better understand your code if you have the patience to explain.

Thanks again,

PEACE

dog

[jscheuer1]

Well, let's see. I actually went through many changes on the code to find the simplest version that would work out. This is mostly due to the fact that I was learning as I went along as far as what mootools would/could do.

There may even still be a better way.

As it stands now, I got rid of the stand alone command to:

myPanal.slideOut();

that you were using to initialize the extra form elements to be hidden/collapsed, as basically it takes too long to execute. Adding the .hide() to the declaration of the myPanal Fx is much faster. That allowed me to follow it immediately with:

if(location.hash.replace(/#/,'')!=''){
var h=$(location.hash.replace(/#/,''));
new Fx.Scroll(window).toElement(h);
}

which simply checks to see if the page is being loaded with a #whatever appended to the URL, and if so uses mootools to scroll to that position, which position (in some browsers) was changed when the additional form elements were collapsed (making it higher on the page, hence why in the original code FF and some others were missing the spot).

The primary references I used for this were:

http://docs12b.mootools.net/Plugins/Fx.Slide

and:

http://docs12b.mootools.net/Fx/Fx

that and my very good basic understanding of javascript and my fairly good understanding of javascript frameworks (of which mootools is one).

I hope that explains it, if not - ask another question.

[dog]

Thanks for the explaination.

It does all make sense however I wasn't even close to getting there by myself. I'm lacking that 'very good basic understanding of javascript' that you mention.

I keep looking at this bit of code:

if(location.hash.replace(/#/,'')!=''){
var h=$(location.hash.replace(/#/,''));
new Fx.Scroll(window).toElement(h);
}

How does someone come up with that? I think at this point what I'm looking for is a good javascript tutorial. Any ideas?


Dog