how to declare an ID in javascript to be recongnized in the whole website

[the cute]

Hello
i'm having trouble to get a javascript work on other page than the front page !
i have a page (wordpress) :
www.wesbite.com/scenario ==> with some javascript code
the code is for the fancybox :here is what i have !!

$("#popin").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});


that worked on the front page of the wordpress website ,as that code is in the header.php of the theme !
and to call that #popin i use :


<a id="popin " href="#popin "><img src="../popin/popin.png" alt="" /></a>
<div style="display: none;">
<div id="popin" style="width: 350px; height: 140px; overflow: auto;">

../popin/popin.png ==> the image that i'm clicking to show the fancybox !
i duplicate that post in a nother page -www.website.com/scenarios/
but when i click on the image /popin/popin.png nothing happens except the link bar turns to :
www.website.com/scenarios/#popin

******
so i'm wondering if i could get that popin code in javascript to be recognized in teh whole website and how to call it that way !
thank you in advance for your Help !
i'm desperate :(

[jscheuer1]

There could also be other problems, or it might be something else. But there's only supposed to be one element per page with a given id. Often browsers will ignore that, like for css. With javascript, they will either choose the first one or ignore them all.

Now here:



<a id="popin " href="#popin "><img src="../popin/popin.png" alt="" /></a>
<div style="display: none;">
<div id="popin" style="width: 350px; height: 140px; overflow: auto;">

You've got an extra space in the id. And other than that, it's the same id as for the div, which I guess is the content div. So, unless that was a typo, or the browser is error correcting, that shouldn't work on any page and might not anyway even without the extra space.

But the browser may be error correcting, taking the first one to init, and looking for the second one as a div with that id. If it did all that, it could work.

Also, for it to do anything, the fancybox scripts (fancybox and jQuery) and the fancybox css must be available to the page.

I could tell a lot easier what's what if I could see an example of the page where it is working and an example of the page where it's not.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.