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?

07-17-2013, 07:13 PM

DrDOS

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.

07-17-2013, 07:17 PM

tybrantt

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?

07-17-2013, 07:24 PM

DrDOS

Quote:

Originally Posted by tybrantt

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.

07-17-2013, 09:30 PM

rnd me

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:

i think it's easier to code css selectors/rules than valid working and non-hard-coded javascript.

07-18-2013, 04:21 AM

Old Pedant

Quote:

Originally Posted by rnd me

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!

07-18-2013, 07:46 PM

rnd me

Quote:

Originally Posted by Old Pedant

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; }

07-18-2013, 08:34 PM

Old Pedant

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.

07-18-2013, 09:05 PM

tybrantt

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?

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.

(Note the placement of the script) gives the errorUncaught 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

07-19-2013, 04:12 AM

rnd me

Quote:

Originally Posted by Old Pedant

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:

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.