Results 1 to 2 of 2

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

  1. #1
    Join Date
    Apr 2012
    Posts
    19
    Thanks
    10
    Thanked 0 Times in 0 Posts

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

    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 !!
    Code:
    			$("#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 :

    HTML Code:
    <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
    Last edited by jscheuer1; 05-11-2012 at 02:54 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •