Resolved If URL contains string, then change CSS [Archive]

...

View Full Version : Resolved If URL contains string, then change CSS

skateme

07-23-2011, 09:53 PM

I'm trying to determine whether a word exists in the URL and if so, change the CSS of a div.

I know how to do each task individually, but combining the two is giving me trouble.

So far I have:

function checkSent(divname)
{
if(document.URL.indexOf("sent") >= 0)
*document.getElementById(success).style.display = 'block';
}
var sentornot = checkSent();

// If the URL contains the word, sent, then change the display of the element "success" to block

I can successfully determine whether the string exists in the URL by adding an alert, but the Javascript to change the CSS doesn't work.

The CSS for the div element "success" is as follows:

#success {
display: none;
}

Any help is appreciated! Thanks!

Edit:
If needed, this is the code I used to test whether the "check URL" portion works:

function checkSent(divname)
{
if(document.URL.indexOf("sent") >= 0) {
alert("found");
document.getElementById("success").style.display = 'block'; //this line doesn't work :(
}
else{ alert("not found"); }
}

tfburges

07-23-2011, 10:36 PM

What's your HTML?

And did you mean to put an asterisk (*) before "document.getEl.." in the first block of code you posted? You also didn't have "success" in quotes.

And I'm not sure about the browser cross-compatibility for "document.URL"... try using document.location.href and/or document.baseURI.

rnd me

07-23-2011, 10:52 PM

forget about the dom, use css so you can do lots of stuff at once with pure simple css markup:

CSS:
#success {
display: none;
}

body.sent #success {
display: block;
}

js
if(location.href.match("sent")){document.body.className+=" sent";}

skateme

07-24-2011, 02:13 PM

rnd me

07-24-2011, 07:06 PM

Thanks for the help guys! Even though the code rnd me supplied, I'm still curious as to why my original code didn't work. I'm using the new code on the site, but the hours of debugging and confusion has piqued my curiosity haha.

without seeing the whole page, especially the <div id="sent">, we can only guess what the issue was. that's exactly why i offered a simpler universal solution; otherwise i would have fixed your code...

if i had to guess i would guess that you were calling the function before the div element appeared in the document. it would probably work if place at the end of the <body>, or within an onload function that's defined earlier on...

skateme

07-24-2011, 07:19 PM

without seeing the whole page, especially the <div id="sent">, we can only guess what the issue was. that's exactly why i offered a simpler universal solution; otherwise i would have fixed your code...

if i had to guess i would guess that you were calling the function before the div element appeared in the document. it would probably work if place at the end of the <body>, or within an onload function that's defined earlier on...

Wow you hit the nail on the head! I was calling the function right before the div appeared; I thought the javascript should get a chance to alter the element before it even loads.

Anyway, I appreciate the help!