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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question If URL contains string, then change CSS

    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:

    Code:
    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:
    Code:
    #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:
    Code:
    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"); }
    }
    Last edited by skateme; 07-24-2011 at 07:19 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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.
    Last edited by tfburges; 07-23-2011 at 10:42 PM.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • Users who have thanked tfburges for this post:

    skateme (07-24-2011)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    forget about the dom, use css so you can do lots of stuff at once with pure simple css markup:

    CSS:
    Code:
    #success {
      display: none;
    }
    
    body.sent  #success {
      display: block;
    }

    js
    Code:
    if(location.href.match("sent")){document.body.className+=" sent";}
    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:

    skateme (07-24-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by skateme View Post
    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...
    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%

  • #6
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    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!


  •  

    Posting Permissions

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