Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    20
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Code to Display Image when keyword is found in URL

    I am needing a code (javscript?) that will display an image when a specific keyword is found in the URL.

    Ex. When someone searches my site for "ACME Mousetraps", my site will pull up products by ACME and the URL will show "acme" and "mousetraps" in the url. I want my image designated to ACME, to show up when the the ACME name appears in the URL/

    Can this be done?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,026
    Thanks
    15
    Thanked 240 Times in 240 Posts
    I believe it goes:
    window.location = "?search="+search_term;

    That goes in the search function, but how you get search_term and how you use it
    depends on things we don't know.
    Last edited by DrDOS; 07-17-2013 at 07:36 PM. Reason: Corrected code.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    20
    Thanks
    15
    Thanked 0 Times in 0 Posts
    thanks. But Im a novice, could I get the full code that I could plug in. With a little explanation where to add my keywords and image names?

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,026
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Quote Originally Posted by tybrantt View Post
    thanks. But Im a novice, could I get the full code that I could plug in. With a little explanation where to add my keywords and image names?
    We don't write code here, we help people who have written code and need help with it.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    use css if you don't like JS.

    we don't code for free, but what the hey, it's only one line of js for this project; merry xmas in july:

    Code:
    <img class="dyn mousetraps" src='http:what.ev/er' />
    <img class="dyn lollypops" src='http:what.ev/er' />
    <img class="dyn shovels" src='http:what.ev/er' >
    
    <script>document.body.setAttribute("url", decodeURIComponent(location.search).toLowerCase());</script>
    <style>
       img.dyn { display: none; }
       [url*="acme mousetrap"] img.dyn.mousetraps { display: block; }
    </style>
    Last edited by rnd me; 07-17-2013 at 09:36 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    tybrantt (07-18-2013)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    I think that's close, but likely not exactly what he wants.

    That will only work if the query string consists of *only* ?acme+mousetraps

    But he did say "when a specific keyword is found in the URL". I read that as "anywhere in the URL".

    So what if the query string is something like
    ?buy=yes&product=acme+mousetraps&price=31.99

    So couldn't you simply do:
    Code:
    <script>
    if ( decodeURIComponent(location.search).toLowerCase().indexOf("acme mousetraps") >= 0 )
    {
        document.body.setAttribute("url","acme mousetraps");
    }
    </script>
    (Could still be all in one line. <grin/>)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by Old Pedant View Post
    I think that's close, but likely not exactly what he wants.

    That will only work if the query string consists of *only* ?acme+mousetraps

    But he did say "when a specific keyword is found in the URL". I read that as "anywhere in the URL".

    So what if the query string is something like
    ?buy=yes&product=acme+mousetraps&price=31.99
    the *= css3 attrib match will hit anywhere in the entire attrib value.

    you can also stack up attrib selectors to be more precise:

    Code:
      [url*="acme"][url*="mousetrap"] img.dyn.mousetraps { display: block; }
    i think it's easier to code css selectors/rules than valid working and non-hard-coded javascript.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Old Pedant (07-18-2013)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Quote Originally Posted by rnd me View Post
    the *= css3 attrib match will hit anywhere in the entire attrib value.
    WOW! I did *NOT* realize that!

    Thank you! I *do* have uses for that!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by Old Pedant View Post
    WOW! I did *NOT* realize that!

    Thank you! I *do* have uses for that!
    for our viewers at home, i should note that there are two other related ones:

    the regexp-symbol-like:
    [href$=".txt"] to hit the end of an attrib
    [href^="/css/"] to hit the start of an attrib

    these even work to some extent in IE7 (won't hit js-created elements from an already-loaded sheet), but they totally work in IE8, so don't feel shy about using them.

    and of course, if your attrib contains spaces, as should be the url attrib in my example (after decoding), you can use the CSS2 'one-of' selectors, to hit any "word" in the attrib, and these guys even work in IE6:

    Code:
     [url~="acme"] img.dyn.acme { display: block; }
    the squiggly one is confusing to a lot of folks, but it's the building block of the class selector, which is space-seperated as well;

    Code:
    img.border { display: none; }
    is the same as:
    Code:
    img[class~='border'] { display: none; }
    Last edited by rnd me; 07-18-2013 at 07:49 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    I knew about the $ and ^, but not the other two. Just had never played in that area. Nice stuff to tuck away in the old brain.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Jun 2013
    Posts
    20
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks for the code. I loaded this for 3 images, related to 3 words. Buts its not appearing when the word is in the URL. Can you find were I broke it?

    <img class="dyn smead" src="/Images/rebates/rebate_banner_smead.png">
    <img class="dyn brother" src="/Images/rebates/rebate_banner_brother.png">
    <img class="dyn hp" src="/Images/rebates/rebate_banner_hp.png">

    <script>document.body.setAttribute("url", decodeURIComponent(location.search).toLowerCase());</script>
    <style>
    img.dyn { display: none; }
    [url*="dyn smead"] img.dyn.smead { display: block; }
    [url*="dyn brother"] img.dyn.brother { display: block; }
    [url*="dyn hp"] img.dyn.hp { display: block; }
    </style>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Your selector is wrong. You can't use url*="dyn smead" unless you are expecting to find exactly "dyn%20smead" (together, just like that) in the URL.

    You did put the <script> at the bottom of the page, I hope?

    This is done using <span>s instead of images, but it clearly is same thing.

    And it works:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    span.dyn { display: none; }
    [url*="smead"] span.dyn.smead { display: block; }
    [url*="brother"] span.dyn.brother { display: block; }
    [url*="hp"] span.dyn.hp { display: block; }
    </style>
    </head>
    <body>
    <span class="dyn smead">SMEAD</span>
    <span class="dyn brother">BROTHER</span>
    <span class="dyn hp">HP</span>
    <script type="text/javascript">
    var url = decodeURIComponent(location.search).toLowerCase();
    document.body.setAttribute("url", url );
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tybrantt (07-18-2013)

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by Old Pedant View Post
    You did put the <script> at the bottom of the page, I hope?
    actually, these type of scripts belongs in the head to prevent a FOUC...

    tybrantt: just remove "dyn " from your attrib selectors and you're golden.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    It does *NOT* work if you put in the <head> with Chrome, at least. Dunno about other browsers. Chrome says document.body is not defined, so you can't do setAttribute on it until at least the <body> tag is encountered. Given that, it makes most sense to put the script at the bottom.

    In Chrome, this code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    span.dyn { display: none; }
    [url*="smead"] span.dyn.smead { display: block; }
    [url*="brother"] span.dyn.brother { display: block; }
    [url*="hp"] span.dyn.hp { display: block; }
    </style>
    <script type="text/javascript">
    var url = decodeURIComponent(location.search).toLowerCase();
    document.body.setAttribute("url", url );
    </script>
    </head>
    <body>
    <span class="dyn smead">SMEAD</span>
    <span class="dyn brother">BROTHER</span>
    <span class="dyn hp">HP</span>
    </body>
    </html>
    (Note the placement of the script) gives the error
    Uncaught TypeError: cannot call method 'setAttribute' of null

    And, yes, the debugger indeed says that document.body is null at that point.

    Moving the <script> to any place after the <body> tag removes the error and it all works.

    EDIT: Just checked. Same thing with MSIE 9.
    Unable to get value of the property 'setAttribute': object is null or undefined
    Last edited by Old Pedant; 07-19-2013 at 02:11 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tybrantt (07-19-2013)

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by Old Pedant View Post
    It does *NOT* work if you put in the <head> with Chrome, at least. Dunno about other browsers. Chrome says document.body is not defined, so you can't do setAttribute on it until at least the <body> tag is encountered.
    ahh. i pounded the initial answer out a little quickly. i usually put attribs on the <HTML> element.

    this can enable a ton of customization to be done in css, based which page, which browser, which section, etc.

    for example, in addition to the OP solution, imagine what you can do with:
    Code:
    <script type="text/javascript">
    var url = decodeURIComponent(location.search).toLowerCase();
    var de=document.documentElement
      de.setAttribute("url", url );
      de.setAttribute("ua", navigator.useAgent);
      de.setAttribute("loc", location.href);
      de.setAttribute("lab", document.title );
      de.setAttribute("dt", new Date().toUTCString() );
    </script>
    this can deploy sectional nav, activate mobile rules, inject the page title into the footer, show content only on certain days of the week or months of the year, etc. all with just css and the above js.

    many if not all of the attribs above can also be easily applied by the server if supporting non-js clients is important. this lets you recycle more code while supporting backwards browsers, a win-win.
    Last edited by rnd me; 07-19-2013 at 04:15 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    tybrantt (07-19-2013)


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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