CODEWITHSUNDEEP
javascriptjquery
Morten
Morten

Reputation: 127

Rewriting javascript to show content based on URL parameter to instead use directory name?

I am trying to refashion the solution at http://www.randomsnippets.com/2011/10/09/how-to-hide-or-show-content-based-on-links-or-urls-via-javascript-jquery/ to work with my website where I want to change some content based on the name of part of the directory structure.

My directory structure looks like this with the part of the URL I want to change content depending on in CAPITAL letters:

http://example.com/main/MILK/content/page/

The code from the example reads:

<html>
<head>
    <title>Hiding and showing content based on URLs</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var option = 'coke';
            var url = window.location.href;
            option = url.match(/option=(.*)/)[1];
            showDiv(option);
        });
        function showDiv(option) {
            $('.boxes').hide();
            $('#' + option).show();
        }
    </script>
    <style type="text/css">
        .boxes {
            display: none;
        }
    </style>
</head>
<body>
    <div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>

</body>
</html>

And I gather that the parts I need to change to make it work with my URL structure is this:

            var url = window.location.href;
            option = url.match(/option=(.*)/)[1];

Can anyone help me with how to make this look for my directory name instead of URL arguments?

Upvotes: 0

Views: 1676

Answers (3)

Edwin Samuel Jonathan
Edwin Samuel Jonathan

Reputation: 198

The following worked for me.

var url = "http://example.com/main/MILK/content/page/";
option = url.split('/');
alert(option[option.length-4]);

Split() function is the way to go and renders an array based on the parameter you are passing to the function.

Upvotes: 0

Morten
Morten

Reputation: 127

Here's my solution based on Aminadav's help for anyone interested:

<html>
<head>
    <title>Hiding and showing content based on URLs</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var option = 'coke';
            option = window.location.pathname.split('/')[2];
            showDiv(option);
        });
        function showDiv(option) {
            $('.boxes').hide();
            $('#' + option).show();
        }
    </script>
    <style type="text/css">
        .boxes {
            display: none;
        }
    </style>
</head>
<body>
    <div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>
</body>
</html>

Upvotes: 0

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24600

You can get each part of the URL using array.split

var parts = window.location.pathname.split('/')

In your eample: http://example.com/main/MILK/content/page/ Then, you can do:

console.log(parts[0]) // will be main
console.log(parts[1]) // will be MILK
console.log(parts[2]) // will be content
console.log(parts[3]) // will be page

I am using location.path to get everything after the domain name (remove http://exampale.com from the string)

You can do this in one line, and the test condition:

option = location.pathname.split('/')[1]
if( option=='MILK') showDiv('...')

More info:

Upvotes: 1

Related Questions