/    Sign up×
Community /Pin to ProfileBookmark

Change background depending on content

Copy linkTweet thisAlerts:
Nov 09.2007

Hello,

I am trying to write a short piece of JavaScript that will change the background colour of the page if a certain string is present on the page.

For example purposes:

[code=html]
<html>
<head>
<style type=”text/css”>
<!–
body{
background-color:#ffffff;
}

–>
</style>
</head>

<body onload=”bg();”>
Can you find the word pizza?
</body>
</html>
[/code]

Javascript would be something like:

[code]
var searchPhrase=”pizza”;

var str=document.all;

function bg(){

var present=str.search(searchPhrase)

if(present!=0){
document.body.style.background= ‘#ff00ff’;
}
}
[/code]

I know that is entirely wrong but hopefully it gets across what I am trying to achieve. if the string is present on the page content, change teh background colour.

Any advice?

Thanks

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdNov 09.2007 — Try window.find(searchPhrase)
Copy linkTweet thisAlerts:
@abzauthorNov 09.2007 — thanks! that worked perfect. I now have:
<i>
</i>var searchPhrase="find";

function bg(){
if(window.find(searchPhrase)){
document.body.style.background= '#ff00ff';
}
}


my next task is to attach this bit of code to my firefox browser so that any page I visit with the word pizza on has it's background changed.

Any idea how I would do this? As far as I am aware, it requires some kind of macro add-on for firefox? or is there an easier way to do it using accesibility options?

Thanks
Copy linkTweet thisAlerts:
@abzauthorNov 09.2007 — <i>
</i>var searchPhrase='pizza';

function bg(){
if(window.find(searchPhrase)){
document.body.style.background= '#ff00ff';
}
}

document.onload=bg();


This should work but I am getting the error mesage:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMJSWindow.find]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: file:///C:/Documents%20and%20Settings/Abi/Desktop/test.js :: bg :: line 6" data: no][/QUOTE]

?
Copy linkTweet thisAlerts:
@KorNov 09.2007 — Could be:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
onload=function(){
var words=[
['pizza','#ff00ff'],
['curry','#0000ff'],
['banana','#ccff00']
]
var doc=document.getElementsByTagName('body')[0];
var allE=doc.getElementsByTagName('*');
var i=0, a, c, j, w, k, reg;
while(a=allE[i++]){
if(a.firstChild){
j=0;
while(c=a.childNodes[j++]){
if(c.nodeType==3){
k=0;
while(w=words[k++]){
reg=new RegExp(w[0],'gi');
c.nodeValue.match(reg)?doc.style.backgroundColor=w[1]:null;
}
}
}
}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;this &lt;/div&gt;is&lt;br&gt;&lt;p&gt;pizza&lt;/p&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


But what if there will be more than one different key words on the page?
Copy linkTweet thisAlerts:
@abzauthorNov 09.2007 — there will only be one word it will ever need to look for, but it will need to look for it on a page taht I can't change the HTML for. plus I need to attach it manually through firefox somehow which I am not sure how to do yet.

Thanks for your suggestions ?
Copy linkTweet thisAlerts:
@KorNov 09.2007 — My code is crossbrowser...
Copy linkTweet thisAlerts:
@abzauthorNov 09.2007 — Ok. I need my javascript file to run on pages that aren't mine though. So at any time while looking on the web, if a page turns up that has the word pizza, the background will change. I need the jaascript to be applied through the browser tools, rather than being linked in the html.

does that make any sense? It is hard to explain and I don't think I'm doing a very good job! :S

thanks
Copy linkTweet thisAlerts:
@WebnerdNov 09.2007 — In other words, you want to develop a Firefox extension. You really should start somewhere like here:

http://www.rietta.com/firefox/Tutorial/overview.html
Copy linkTweet thisAlerts:
@abzauthorNov 09.2007 — ok thanks for the advice. I think that is a little too much effort for my mini project! I was hoping it would be a matter of an hour or so to sort out. I will keep my eyes open for some firefox add ons that allow you to attach your own javascript though.

thanks again for your help
Copy linkTweet thisAlerts:
@KorNov 09.2007 — Ok. I need my javascript file to run on pages that aren't mine though. So at any time while looking on the web, if a page turns up that has the word pizza, the background will change. I need the jaascript to be applied through the browser tools, rather than being linked in the html.

does that make any sense? It is hard to explain and I don't think I'm doing a very good job! :S

thanks[/QUOTE]
Oh, that's completely a different thing, and needs a different approach... Yes, follow the [B]Webnerd[/B]'s advice.
×

Success!

Help @abz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...