SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery append - Target page ID

    Hi all

    I have a small jQuery snippet which finally works, I have this code within a global js file which triggers on every page. How can I make it run only when it finds the correct ID?

    I would like to run the below only with the page that has the page ID of #listings

    Code JavaScript:
    $('.placeholder').before('<div class="napp"><img src="images/napp.png"></div>');

    I'm working with other peroples code and came across, below, which has all different snippets running for that page under different self.initialize. Example: self.initializeArticle, self.initializeFrontage and so on.

    Code JavaScript:
    self.initializeFrontpage = function() {
    $('.placeholder').before('<div class="napp"><img src="images/napp.png"></div>'); // example
    }

    How can I add my own self.initialize? What does it mean? And where does the Frontpage, Article come from?

    Many thanks,
    Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,082
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I would like to run the below only with the page that has the page ID of #listings
    Could you elaborate on this?
    Where should the id occur?
    Do you mean in the url, e.g. http://mypage.com#listings, or do you mean when an element with an id of #listings is present on the page?

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Pullo
    when an element with an id of #listings is present on the page
    ID or a class which will on the body tag.

    Keep in mind I might need to add multiple classes overtime if I decide to use this on other pages.

    Code HTML4Strict:
    <body id="listings">

    ?

    Thanks
    The more you learn.... the more you learn there is more to learn.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,082
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Then you just need to get a reference to '#listings' and check it's length property to see if it exists on the page:

    Code:
    if ($('#listings').length){
      $('.placeholder').before('<div class="napp"><img src="images/napp.png"></div>');
    }

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!
    I was doing some searching myself and what you have posted confirms

    Code JavaScript:
    if ($("#listings")[0]){
      $('.placeholder').before('<div class="napp"><img src="images/napp.png"></div>');
    }

    Is one better that the other? Whats the difference?

    Code JavaScript:
    if ($('#listings').length){
    // or
    if ($("#listings")[0]){

    Cheers,
    Barry
    The more you learn.... the more you learn there is more to learn.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,082
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Is one better that the other? Whats the difference?
    The using the length property seems to be the preferred way to test whether an element exists on a page, but essentially they both do the same thing.

    $("#listings")[0] will return the actual element that was matched.

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! Thanks.
    The more you learn.... the more you learn there is more to learn.


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
  •