Formatting Cells with links/searching Options

[lulucachoo]

Hi!

This is going to take a bit of explaining but I hope someone can help me!

I'm creating a page here.

There are a couple of things I'd like for it to do, and I'm not sure if they're possible, but here goes!

1. When one of the links at the top is clicked I need all the cells with countries not in that continent/area to change colour to grey.

2. Then when a new letter is typed into the input box I need all the countries with that letter combination (that aren't already grayed out) to turn a new colour (say red). Sort of like a live search box for the table.

I can handle HTML fine, but I'm not amazing with javascript so any help will be much appreciated!

Thank you!

Louis

[lulucachoo]

Also!

It would be great if when you click on a country the continent/area it's in changes colour.

Thanks!

Louis

[Christian J]

1. When one of the links at the top is clicked I need all the cells with countries not in that continent/area to change colour to grey.

I recommend not using links for this (any element can be made clickable). Also, why do you use a form? The FORM element is not necessary for INPUT elements if they're only used by javascript.

2. Then when a new letter is typed into the input box I need all the countries with that letter combination (that aren't already grayed out) to turn a new colour (say red). Sort of like a live search box for the table.

What if no region is selected, should all countries be searchable (that's how I've done it) or should the searchbox be disabled until a region is selected? If so, should the user be able to unselect the selected region (currently not possible)?

It would be great if when you click on a country the continent/area it's in changes colour.

Wouldn't it be better if countries not in that continent/area changed color to gray, just like in (1)? That's how I've done it below.

CSS

CODE

p#regions span {
text-decoration: underline;
cursor: pointer;
}
table#countries td {
cursor: pointer;
}

Javascript

CODE

<script type="text/javascript">//<![CDATA[

window.onload=function()
{
    var countries=document.getElementById('countries').getElementsByTagName('td');
    var regions=document.getElementById('regions').getElementsByTagName('span');
    var search_country=document.getElementById('search_country');

    // Highlight regions ------------------------------------------
    for(var i=0; i<regions.length; i++)
    {
        regions[i].onclick=function()
        {
            for(var j=0; j<countries.length; j++)
            {
                // reset all countries:
                countries[j].style.color='#aaa';
                countries[j].style.background='#fff';
                countries[j].custom_attribute='disabled';

                // restore current region´s countries:
                if(countries[j].className==this.className)
                {
                    countries[j].style.color='#000';
                    countries[j].style.background='#fff';
                    countries[j].custom_attribute='';
                }
            }

            // synchronize region buttons
            for(var j=0; j<regions.length; j++)
            {
                // reset all region buttons:
                regions[j].style.fontWeight='normal';

                // highlight current region´s button:
                if(regions[j].className==this.className)
                {
                    this.style.fontWeight='bold';
                }
            }
        }
    }

    // Search country ------------------------------------------
    search_country.onkeyup=function()
    {
        var search_string=this.value;
        for(var i=0; i<countries.length; i++)
        {
            // first reset all countries:
            if(countries[i].custom_attribute!='disabled')
            {
                countries[i].style.color='#000';
                countries[i].style.background='#fff';
            }

            // then highlight matching countries in the region:
            var country_string=countries[i].firstChild.nodeValue;
            if(country_string.substr(0, search_string.length).toLowerCase()==search_string.toLowerCase() && countries[i].custom_attribute!='disabled')            
            {
                countries[i].style.color='#f00';
                countries[i].style.background='#fff';
            }
        }
    }

    // Highlight clicked country´s regional neighbors -----------------------------------
    for(var i=0; i<countries.length; i++)
    {
        countries[i].onclick=function()
        {
            // synchronize region buttons
            for(var j=0; j<regions.length; j++)
            {
                // first reset all:
                regions[j].style.fontWeight='normal';

                // then highlight current country´s region button:
                if(regions[j].className==this.className)
                {
                    regions[j].style.fontWeight='bold';
                }
            }

            for(var j=0; j<countries.length; j++)
            {
                // first disable all:
                countries[j].style.color='#aaa';
                countries[j].style.background='#fff';
                countries[j].custom_attribute='disabled';

                // then highlight neighbors:
                if(this.className==countries[j].className)
                {
                    countries[j].style.color='#000';
                    countries[j].style.background='#fff';
                    countries[j].custom_attribute='';
                }
            }
        }
    }

}
//]]></script>

HTML

CODE

<form id="form1" name="form1" method="post" action="">
    <noscript><p><strong>Javascript is required to use these search tools:</strong></p></noscript>
    <p id="regions">
    <span class="eu">EU</span>
    <span class="americas">Americas</span>
    <span class="asia">Asia</span>
    </p>
    <label>country
    <input type="text" name="textfield" id="search_country" />
    </label>
</form>


<table width="95%" border="1" align="center" cellpadding="0" cellspacing="0" id="countries">
  <tr>
    <td width="186" class="eu">ALBANIA    (TIRANE ONLY)</td>
    <td class="eu">ANDORRA</td>
    <td class="americas">ARGENTINA</td>
    <td class="asia">ARMENIA (YEREVAN ONLY)</td>
    <td class="asia">AUSTRALIA</td>
    <td class="eu">AUSTRIA</td>
    <td class="americas">AZORES</td>
    <td class="americas">BAHAMAS</td>
  </tr>
...etc

[lulucachoo]

Wow!

Thank you so much Christian! That's brilliant!

You're right I don't need it to be in a form, Dreamweaver must've done that.

Would it be possible to unselect the region when something is typed into the searchbox?

Also, can the countries be included in more than one region? (You can see now that the analogy isn't working so well...) So when you click on either region it's ungreyed and when you click on it both regions are emphasised? There are only in fact 2 regions, so could the class of some of the countries be 'both'? Sorry if I'm asking a bit much!

Thanks again!

Louis

This post has been edited by lulucachoo: Mar 9 2007, 05:12 PM

[Christian J]

Wow!

Thank you so much Christian! That's brilliant!

You're welcome.

Would it be possible to unselect the region when something is typed into the searchbox?

If you mean adding an "unselect" button, sure.

Also, can the countries be included in more than one region? (You can see now that the analogy isn't working so well...) So when you click on either region it's ungreyed and when you click on it both regions are emphasised? There are only in fact 2 regions, so could the class of some of the countries be 'both'? Sorry if I'm asking a bit much!

Didn't quite follow that: do you mean you have several regions, but a particular country can only be part of two (e.g. Europe and EU)? You can indeed use two class values, like this

CODE

<td class="europe eu">AUSTRIA</td>

but I'm not sure if it's the most efficient way to code it. Will have to think more about this tomorrow (unless someone else comes up with something better in the meantime).

[lulucachoo]

If you mean adding an "unselect" button, sure.

Not quite, I mean can the region become unselected (and the countries ungreyed) as soon as something new is typed into the searchbox, so that it's searching all of the countries and not just the ones in the region selected.

Didn't quite follow that: do you mean you have several regions, but a particular country can only be part of two (e.g. Europe and EU)?

I have two regions, and the countries can either be one, the other, or both.

Louis

[lulucachoo]

This has become much more complicated than I thought it would be!

I hope you don't mind continuing to help me!

Here is the page so far. (Yeah, it looks rubbish at the moment...)

The purpose of it is to let the viewer to either:

1. click their mobile network (Orange & T-mobile or O2) and be presented with the countries they can call
2. click the country they want to call and be presented with the network(s) they can call from
3. start typing the country they want to call and be presented with the countries containing that letter combination

Then once a network or country has been chosen the phone number(s) are presented at the bottom.

There's one number for people on O2 (0844 825 8892) and one for people on Orange & T-Mobile (07744 78 79 84).

The destinations can either be available on O2 or Orange & T-Mobile, or both (in which case both numbers are shown). If the chosen destination is only available on one of O2 or Orange & T-Mobile, or if the network is chosen first, then only one number will be shown.

All the destinations available on O2 are available 24/7 to O2 customers, but some of the destinations available to Orange and T-Mobile customers are only available on weekdays. If the chosen destination is only available on weekdays then 'weekdays!' is shown under the number, if available anytime then 'anytime!' is shown.


I tried using this:

CODE

<td class="o2 ot">AUSTRIA</td>

but these destinations aren't highlighted when either of the networks is clicked, and neither are both networks highlighted when the country is clicked.

I have the destinations and network/time availability in Excel spreadsheets if that'd be any use.

OK, I think that's everything, and I'm really not sure this is all even possible!

But I really appreciate your help!

Thanks!

Louis

[lulucachoo]

One more thing!

It'd be great to have a bit at the bottom that explained how to dial the number when connected.
Like: '00[country code of selected destination goes here]+national number without leading zero'

Louis

[Christian J]

This has become much more complicated than I thought it would be!

Me too!

I mean can the region become unselected (and the countries ungreyed) as soon as something new is typed into the searchbox, so that it's searching all of the countries and not just the ones in the region selected.

Problem is you don't want the script to unexpectedly start searching all countries if the user still wants to search within a specific network/region. To be on the safe side I simply added a button to manually unselect the current network. Or don't you want the user to search within a network in the first place?

I made a new version below. Note the various class names: when the "orange..." class is used you must also specify if it's an "anytime" or "weekdays" version:

CODE

<td class="o2 orange_and_t-mobile weekdays">

When "o2" is the only network this is not necessary, then you can just write:

CODE

<td class="o2">

I also added some text in the cells to help debugging:

CODE

<td class="o2 orange_and_t-mobile anytime">AUSTRALIA o2 orange anytime</td>

if/when you are sure the script works you can remove it:

CODE

<td class="o2 orange_and_t-mobile anytime">AUSTRALIA</td>

If you later want to customize the table (for styling, etc) note that you can't use HTML elements around the country name in the table cell:

CODE

<td class="o2"><p>USA</p></td>

and you can't use code formatting such as line-breaks or indenting:

CODE

<td class="o2">
    USA
</td>

since both may cause bugs in the current script.

JS:

CODE

<script type="text/javascript">//<![CDATA[

window.onload=function()
{
    var countries=document.getElementById('countries').getElementsByTagName('td');
    var networks=document.getElementById('networks').getElementsByTagName('span');
    var search_country=document.getElementById('search_country');
    var unselect=document.getElementById('unselect');
    var o2_phone=document.getElementById('o2_phone');
    var orange_phone=document.getElementById('orange_phone');

    // hide phone numbers -------------------------------------------
    o2_phone.style.display='none';
    orange_phone.style.display='none';


    // Highlight networks ------------------------------------------
    function highlight_networks(current_network)
    {
        // synchronize network buttons
        for(var j=0; j<networks.length; j++)
        {
            // reset all network buttons:
            networks[j].style.fontWeight='normal';

            // highlight current network´s button:
            if(networks[j].className==current_network.className)
            {
                current_network.style.fontWeight='bold';
            }
        }

        // highlight current network´s members
        for(var j=0; j<countries.length; j++)
        {
            // reset all countries:
            countries[j].style.color='#aaa';
            countries[j].style.background='#fff';
            countries[j].custom_attribute='disabled';

            // restore current network´s members:
            if(countries[j].className.indexOf(current_network.className) !=-1 || current_network=='none')
            {
                countries[j].style.color='#000';
                countries[j].style.background='#fff';
                countries[j].custom_attribute='';
            }

        }

        // hide phone numbers
        if(orange_phone.childNodes.length>1)
        {
            orange_phone.removeChild(orange_phone.lastChild);
        }
        if(o2_phone.childNodes.length>1)
        {
            o2_phone.removeChild(o2_phone.lastChild);
        }

    }

    for(var i=0; i<networks.length; i++)
    {
        networks[i].onclick=function()
        {
            highlight_networks(this);
        }
    }

    // unselect network
    unselect.onclick=function()
    {
        highlight_networks('none');
    }




    // Search country ------------------------------------------
    search_country.onkeyup=function()
    {
        var search_string=this.value;
        for(var i=0; i<countries.length; i++)
        {
            // first reset all countries:
            if(countries[i].custom_attribute!='disabled')
            {
                countries[i].style.color='#000';
                countries[i].style.background='#fff';
            }

            // then highlight matching countries in the network:
            var country_string=countries[i].firstChild.nodeValue;
            if(country_string.substr(0, search_string.length).toLowerCase()==search_string.toLowerCase() && countries[i].custom_attribute!='disabled')            
            {
                countries[i].style.color='#f00';
                countries[i].style.background='#fff';
            }
        }
    }

    // Sync clicked country´s network partners -----------------------------------
    for(var i=0; i<countries.length; i++)
    {
        countries[i].onclick=function()
        {
            for(var j=0; j<countries.length; j++)
            {
                countries[j].style.color='#aaa';
                countries[j].style.background='#fff';
                countries[j].custom_attribute='disabled';
            }

            for(var j=0; j<networks.length; j++)
            {
                networks[j].style.fontWeight='normal';
                if(this.className.indexOf(networks[j].className) !=-1)
                {
                    networks[j].style.fontWeight='bold';
                    for(var k=0; k<countries.length; k++)
                    {
                        if(countries[k].className.indexOf(networks[j].className) !=-1)
                        {
                            countries[k].style.color='#000';
                            countries[k].style.background='#fff';
                            countries[k].custom_attribute='';
                        }
                    }
                    this.style.color='#f00';
                    this.style.background='#fff';
                    this.custom_attribute='';
                }
            }


            // sync phone numbers ---------------------------------------
            o2_phone.style.display='none';
            orange_phone.style.display='none';
            if(this.className.indexOf('o2') !=-1)
            {
                o2_phone.style.display='block';
                if(o2_phone.childNodes.length>1)
                {
                    o2_phone.removeChild(o2_phone.lastChild);
                }
                o2_phone.appendChild(document.createTextNode(' anytime'));
            }

            if(this.className.indexOf('orange_and_t-mobile') !=-1)
            {
                orange_phone.style.display='block';
                if(this.className.indexOf('anytime') !=-1)
                {
                    if(orange_phone.childNodes.length>1)
                    {
                        orange_phone.removeChild(orange_phone.lastChild);
                    }
                    orange_phone.appendChild(document.createTextNode(' anytime'));
                }
                else if(this.className.indexOf('weekdays') !=-1)
                {
                    if(orange_phone.childNodes.length>1)
                    {
                        orange_phone.removeChild(orange_phone.lastChild);
                    }
                    orange_phone.appendChild(document.createTextNode(' weekdays'));
                }
            }

        }
    }

}
//]]></script>

HTML

CODE

<noscript><p><strong>Javascript is required to use these search tools:</strong></p></noscript>
<p id="networks">
<span class="o2">O2</span>
<span class="orange_and_t-mobile">Orange & T-mobile</span>
<input type="button" id="unselect" value="Unselect networks">
</p>
<label for="search_country">Search for countries that use the selected network
<input type="text" name="textfield" id="search_country" />
</label>


<table border="1" id="countries">
  <tr>
    <td width="186" class="o2">ALBANIA    (TIRANE ONLY) o2</td>
    <td class="orange_and_t-mobile weekdays">ANDORRA orange weekdays</td>
    <td class="orange_and_t-mobile anytime">ARGENTINA orange anytime</td>
    <td class="o2">ARMENIA (YEREVAN ONLY) o2</td>
    <td class="o2 orange_and_t-mobile anytime">AUSTRALIA o2 orange anytime</td>
    <td class="o2">AUSTRIA o2</td>
    <td class="o2 orange_and_t-mobile anytime">AZORES o2 orange anytime</td>
    <td class="o2 orange_and_t-mobile weekdays">BAHAMAS o2 orange weekdays</td>
  </tr>
</table>

<p id="o2_phone">O2 (0844 825 8892)</p>
<p id="orange_phone">Orange & T-Mobile (07744 78 79 84)</p>

[Christian J]

One more thing!

It'd be great to have a bit at the bottom that explained how to dial the number when connected.
Like: '00[country code of selected destination goes here]+national number without leading zero'

Louis

Have mercy!

[lulucachoo]

Brilliant!

Thank you! That's exactly what I wanted.

You're amazing!

Louis

[lulucachoo]

OK, I'm stuck again!

The page is here now: http://www.shsh.co.uk/lovefreecalls/index.html

Two problems I have:

o When you type something into the search boxes, and then delete it with backspace, all the countries are highlighted, how can I stop this?

o I'd like the countries highlighted in yellow to stay yellow when they are selected, and when they return to their original state.

I'm not amazing at web design (as you may have guessed ) but any design tips would be gratefully received!

Thanks!

Louis

[Darin McGrew]

And one more problem: The forms don't seem to do anything when I submit them.

[lulucachoo]

Yeah, you aren't supposed to submit them, they're livesearch boxes.

Louis

[Darin McGrew]

I assume that "livesearch boxes" work only when JavaScript is enabled. I recommend that you generate the forms with JavaScript too, so they aren't there to confuse readers with JavaScript disabled/unavailable.

[Christian J]

o When you type something into the search boxes, and then delete it with backspace, all the countries are highlighted, how can I stop this?

Try replacing this

CODE

if(country_string.substr(0, search_string.length).toLowerCase()==search_string.toLowerCase() && countries[i].custom_attribute!='disabled')

with

CODE

if(search_string!='' && country_string.substr(0, search_string.length).toLowerCase()==search_string.toLowerCase() && countries[i].custom_attribute!='disabled')

o I'd like the countries highlighted in yellow to stay yellow when they are selected, and when they return to their original state.

Try replacing this:

CODE

// first reset all countries:
if(otvcountries[i].custom_attribute!='disabled')
{
otvcountries[i].style.color='#000';
    otvcountries[i].style.fontSize='70%';
    otvcountries[i].style.fontWeight='normal';
otvcountries[i].style.background='#fff';


}

with:

CODE

// first reset all countries:
otvcountries[i].style.color='#000';
otvcountries[i].style.fontSize='70%';
otvcountries[i].style.fontWeight='normal';
otvcountries[i].style.background='#fff';
if(otvcountries[i].className=='weekdays')
{
            otvcountries[i].style.color='#000';
            otvcountries[i].style.background='#ff0';
}

and replace this

CODE

if(otvcountry_string.substr(0, otvsearch_string.length).toLowerCase()==otvsearch_string.toLowerCase() && otvcountries[i].custom_attribute!='disabled')            
{
otvcountries[i].style.color='#fff';
        otvcountries[i].style.fontSize='200%';
        otvcountries[i].style.fontWeight='bold';
otvcountries[i].style.background='#f63';
}

with

CODE

if(otvsearch_string!='' && otvcountry_string.substr(0, otvsearch_string.length).toLowerCase()==otvsearch_string.toLowerCase())
{
otvcountries[i].style.color='#fff';
        otvcountries[i].style.fontSize='200%';
        otvcountries[i].style.fontWeight='bold';
otvcountries[i].style.background='#f63';
        if(otvcountries[i].className=='weekdays')
        {
            otvcountries[i].style.color='#000';
            otvcountries[i].style.background='#ff0';
        }
}

[Christian J]

I assume that "livesearch boxes" work only when JavaScript is enabled. I recommend that you generate the forms with JavaScript too, so they aren't there to confuse readers with JavaScript disabled/unavailable.

To the OP: you don't need a <form> element if you just use the text field for javascript input. Even then you might generate the text field with javascript, or at least supply a message that it's only useful in a javascript-capable browser. I notice that the <noscript> message from my sample script has been deleted...

[lulucachoo]

Oops! Didn't mean to delete the <noscript>!

I've added noscript messages back in, and got the forms in document.write, but as you can see, it doesn't work, and I can't see why!

I think I need <form> tags so that the reset buttons work, is that right?

Thanks for your continuing help!

Louis

[Christian J]

Oops! Didn't mean to delete the <noscript>!

You don't really need it if you generate the form controls with javascript, and if the page's other content makes sense without javascript.

The advantage with using JS to generate JS form controls is that users without JS will not see any dysfunctional form controls. The disadvantage is that the user never gets a chance to decide for himself if he might benefit from enabling JS for that particular feature.

I've added noscript messages back in, and got the forms in document.write, but as you can see, it doesn't work, and I can't see why!

You can't use line breaks in a document.write() string. Also the string is terminated by a single quote, unless it's escaped with a backslash.

I think I need <form> tags so that the reset buttons work, is that right?

For a real reset button yes, but instead you might fake one:

CODE

document.write('Search destinations: <input type="text" id="search_otvcountry" onFocus="this.value=\'\';"> <input type="button" id="otvreset" value="Reset" onclick="document.getElementById(\'search_otvcountry\').value=\'\';">');