Show specific div based on url

Question

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:

1) only the first url will show the correct div not the url after the or (||)? 2) the else code that should show the error message shows up no matter what page you're on?

Please help.

function showdiv() {
    if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
        document.getElementById('AA').style.display = 'block';
        if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
        else document.getElementById('AA').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
        document.getElementById('BB').style.display = 'block';
        if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
        else document.getElementById('BB').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
        document.getElementById('CC').style.display = 'block';
        if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
        else document.getElementById('CC').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
        document.getElementById('DD').style.display = 'block';
        if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
        else document.getElementById('DD').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
        document.getElementById('EE').style.display = 'block';
        if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
        else document.getElementById('EE').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
        document.getElementById('FF').style.display = 'block';
        if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
        else document.getElementById('FF').style.display = 'block';
    }
    else {
        document.getElementById('error').style.display = 'block';
        if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
        else document.getElementById('error').style.display = 'block';
    }
}

Hi. It looks like you should review your entire code. That could be done in without any IF by parsing the urls. — morgar
– morgar, Commented Apr 23, 2011 at 2:13

aroth · Accepted Answer · 2011-04-23 06:55:59Z

1

That code will be a nightmare to maintain. You might have better luck structuring it more like this:

function getId() {
    var href = window.location.href;
    if (href.indexOf('?') != -1) {
        //remove any url parameters
        href = href.substring(0, href.indexOf('?'));
    }
    if (href.charAt(href.length - 1) == '/') {
        //check for a trailing '/', and remove it if necessary
        href = href.substring(0, href.length - 1);
    }
    var parts = href.split("/");
    return parts[parts.length - 1];  //last array element should contain the id 
}

function showdiv(){
    var id = getId();
    var elem = document.getElementById(id);
    if (elem) {
        if (elem.style.display == 'none') {
            elem.style.display = 'block';
        }
        else {
            elem.style.display = 'none';
        }
    }
    else {
        if (document.getElementById('error').style.display == 'none') {
            document.getElementById('error').style.display='block'; 
        }
        else {    
            document.getElementById('error').style.display='none';
        }
    }
}

edited Apr 23, 2011 at 6:55

answered Apr 23, 2011 at 2:09

aroth

54.9k22 gold badges142 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webtesa Over a year ago

Thank you so much aroth, that code definitely worked out one of my problems :).the page that has more than the base id like this "google.com/profile/AA?xg_source=profiles_memberList" still won't display the correct div :( any ideas?

aroth Over a year ago

@webtesa - I've updated the code to handle that case as well. The original version assumed that there would always be a trailing '/' character in the URL if query parameters were present. The revised version does not have that assumption, and should correctly handle either case.

Anurag · Accepted Answer · 2011-04-23 02:14:19Z

0

You should work out the logic first.

This code makes no sense at all.

document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
    document.getElementById('AA').style.display = 'block';
}
else {
    document.getElementById('AA').style.display = 'block';
}

Structurally, it is similar to this code (simplified and with comments)

var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
    a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
    a = 'block';
}

Also try to factor our the repeating parts of your code as @aroth has nicely demonstrated.

answered Apr 23, 2011 at 2:14

Anurag

142k37 gold badges223 silver badges262 bronze badges

1 Comment

webtesa Over a year ago

Wow...Thank you so much Aroth, you are a lifesaver! That worked perfectly I really want to get better at writing javascript, are there any tutorials you can point me to?

Collectives™ on Stack Overflow

Show specific div based on url

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related