Whirlpool

Hi all,

I'm having a bit of trouble getting rid of a white dotted border around an anchor. I think it's something i'm doing wrong regarding the use of text-decoration but I can't work out what i'm doing wrong.

If you have a look at http://flighttracker.gleff.com and open the flight panel, and then click on one of the two options in the Aircraft list. You'll notice a white dotted border around the word ALL or QFA456 (depending on what you clicked).

I'm trying to do two things.

1. Remove that dotted border after you click the option
2. Change the colour of the active option eg. if you click on ALL, then ALL stays the colour red until you click a new option.

I've got the following:

<ul>

<li><a id="ALL" href="ALL" onclick="menuoption('All');return false;" name="ALL">All</a><br /><span class="airline">Track all Aircraft</span></li>
<li><a id="QFA456" href="QFA456" onclick="menuoption('QFA456');return false;" name="QFA456">QFA456</a><br /><span class="airline">Qantas Airlines</span></li>

</ul>

And the following CSS:

#content_flightlist ul
{
margin-top: 0px;
color: #00ccff;
}

#content_flightlist li
{
font-family: Verdana, Arial, Verdana, sans-serif;
padding: 7px 7px 4px 7px;
line-height: 100%;
list-style-type: square;
}

#content_flightlist li a:hover
{
font-size: 12px;
color: #00ccff;
}

#content_flightlist li a
{
font-size: 12px;
color: #E5E5E5;
}

.airline
{
font-size: 9px;
color: #ABB1AA;
}

I've tried adding a #content_flightlist li a:visited section but that doesn't help. I've also tried putting text-decoration: none; all over the place but nothing seems to work.

I think I must be inheriting something from somewhere.

If anyone can help it would be appreciated.

Hang on a second.

I don't get the dotted border at all in chrome or ie 6.

gleff writes...

2. Change the colour of the active option eg. if you click on ALL, then ALL stays the colour red until you click a new option.

You could use javascript to add a style depending on which element was clicked, and remove it for the other options, perhaps something along these lines:

function updateStyle(current element) {
   $(current element).addClass('red');
   $(all other elements).removeClass('red');
}

I just saw your post a minute ago and tried the outline-style: none; and that fixed the first issue.

If it's not doing it in chrome, or IE6, even better, hopefully it shouldn't do it in any now ;)

Now just to work out the second part.

ironheart writes...

You could use javascript to add a style depending on which element was clicked, and remove it for the other options, perhaps something along these lines:

That's an idea.. I'll try that as a last resort though.. I would think I should be able to do it in CSS so i'll try and get it working there first, and if I don't succeed I'll try the javascript method.

Thanks.

gleff writes...

I just saw your post a minute ago and tried the outline-style: none; and that fixed the first issue.

No wonder. I saw it once, made the post, then went back to look at the second problem and found the first problem was gone, I'd thought it wasn't outline at all :P

Incidentally, you should note that your transparent curved border bit on the Flight Panel comes out camel brown in IE6, because this browser doesn't support PNG alpha transparencies. It needs help with pngfix, or you can just convert it to gif with normal transparency.

For more info on the second problem, try this: http://api.jquery.com/addClass/
and this: http://api.jquery.com/removeClass/

gleff writes...

I would think I should be able to do it in CSS

I don't remember this being the case. I have the feeling you'll end up doing in javascript. I don't see why not, the entire Flight Panel is jqueried :)

ironheart writes...

No wonder. I saw it once, made the post, then went back to look at the second problem and found the first problem was gone, I'd thought it wasn't outline at all :P

Actually, it would still exist because the changes are only local on my development machine at present.. but obviously the outline issue only affected some browsers.. now hopefully it won't be a problem on any.

Thanks for the heads up for IE6. I'm not sure if i'll bother trying to fix it though. I thought it already had the ie6 fix in place but since I don't really want to support ie6 i'm not sure if i'll bother trying to fix it.

i'll look into the jquery addclass bit. that sample code on the page you supplied looks easy enough.

Thanks for all the help.

gleff writes...

Thanks for the heads up for IE6. I'm not sure if i'll bother trying to fix it though. I thought it already had the ie6 fix in place but since I don't really want to support ie6 i'm not sure if i'll bother trying to fix it.

Fair enough, too. I hate IE6 with a degree of prejudice normally reserved for greater evils. Sadly there's a whole bunch of entrenched users out there who bleat about stuff not working in IE 6, so I keep it around for this reason. It's your site though ;)

I'm just trying the jquery example and it doesn't appear to be working.. I'm assuming i'm just doing something stupid here.

In the index.html I am calling the latest version of jquery which is 1.4.2

I also call a javascript file called controller.js which contains:

function menuoption(test)
{
if (test == "All")
{
//alert ("All")
$("a:last").addClass("selected");
}
else
{
//alert ("Something else")
$("a:last").addClass("selected");
}

}

In the CSS, i've added:

.selected { color:red; }

For some reason it's not working. I assume whatever i'm doing wrong, it has to do with the a:last part but i'm not sure.

gleff writes...

For some reason it's not working

Unless you show us how you're using it, why you think it's not working, and what you're using it on, it's kind of counterproductive. So show us.

This is a habit a lot of people should get into (describing the problem) rather than just saying "it doesn't work" because nobody knows the context in which you're trying to make it work.

ironheart writes...

Unless you show us how you're using it and what you're using it on, it's kind of counterproductive. So show us.

Not sure what you mean.. Essentially, when you click on one of the options (in this case either ALL or QF456, it runs the menuoption function which in turn calls the addclass which creates the selected class. The selected class in the CSS turns the anchor red and stays that way until I choose another option whereby I'd do the same thing.

When I say it doesn't work, I mean it has no affect than if I hadn't used the addclass and selected class. In other words, you'll notice that the page doesn't do anything different when you click on one of the links.

gleff writes...

Not sure what you mean..

When I say it doesn't work, I mean it has no affect than if I hadn't used the addclass and selected class. In other words, you'll notice that the page doesn't do anything different when you click on one of the links.

This is what I mean. We are not telepathic, we can't see inside your head to interpret "it's not working". People should tell us why they think something's broken, what it should be doing and what it currently does. It really helps us help you.

Anyway, here's an example and I recommend you don't just trial-and-error with examples straight into your project. You should learn how to use the functions first, usually in a fresh index.html just to see how it works.

<style type='text/css'>
.selected {
   color: red;
}

</style>
<p><a id='malcolm'>The leprechauns are stout warriors</a></p>
<p><a id='sinister'>So many pots of gold</a></p>
<p><a id='dexter'>But this is a terrible haiku</a></p>

<script type='text/javascript'>
$(document).ready(function() {
   $('#malcolm').click(function() {
      // Remove style from all a tags
      $('a').removeClass('selected');

      // Add selected style to this tag
      $(this).addClass('selected');
   });

   $('#sinister').click(function() {
      // Remove style from all a tags
      $('a').removeClass('selected');

      // Add selected style to this tag
      $(this).addClass('selected');
   });

   $('#dexter').click(function() {
      // Remove style from all a tags
      $('a').removeClass('selected');
      
      // Add selected style to this tag
      $(this).addClass('selected');
   });
});
</script>

Thanks for that.. i'll have a go.

I'm making some progress. Now if you have a look at the site, the active link has a border around it so it proves the addclass and removeclass are both working. It's getting the white border from the .selected in my CSS file. So I have the following:

CSS contains:

.selected
{
color: red;
border: 3px solid #fff;
}

HTML contains:

<ul>

<li><a id="ALL" href="#" onclick="menuoption('All');return false;" name="ALL">All</a><br /><span class="airline">Track all Aircraft</span></li>
<li><a id="QFA456" href="QFA456" onclick="menuoption('QFA456');return false;" name="QFA456">QFA456</a><br /><span class="airline">Qantas Airlines</span></li>

</ul>

Javascript file contains:

function menuoption(test)
{
if (test == "All")
{
//alert ("All")
$('a').removeClass('selected');
$('#ALL').addClass('selected');

}
else
{
//alert ("Something else")
$('a').removeClass('selected');
$('#QFA456').addClass('selected');
}

}

What's supposed to happen in addition to the white border is the text colour should turn red. Instead, it keeps turning off white eg. #e5e5d5. Note: The white border will not be in the final site, it's just to demonstrate the addclass and CSS is working.

It must be inheriting it, but i'm not sure how to force it not to inherit. Arrrgh!

EDIT: Okay.. figured out what I was doing wrong. Instead of having just a .selected, I changed it to #content_flightlist li .selected

Now it's working as intended.

Hi gleff,

Interesting project you're working on there.

Just wanted to make note that I'm still getting the white border on the panel toggle button, is this intended? (FF 3.5)

If its not, you can blanket fix your anchors from getting the outline by using
a {outline:none}

Also, the current method you're using for the active state on your links is a little clunky. Ironheart mentioned using jQuery earlier, its much cleaner and far more flexible for you should you need to add more links later

I extracted the menu items from your site and tested this myself.

$('#content_flightlist ul li a').click(function(){
$("#content_flightlist ul li a").removeClass('selected');
$(this).addClass('selected');
});

This also means you can remove the empty class attributes from your HTML, which is also a little messy.

<div id="content_flightlist" style="overflow: hidden; width: 175px;">
<ul>
<li><a name="ALL" onclick="menuoption('All');return false;" href="#" id="ALL">All</a><br>
<span class="airline">Track all Aircraft</span></li>

<li><a name="QFA456" onclick="menuoption('QFA456');return false;" href="#" id="QFA456">QFA456</a><br>
<span class="airline">Qantas Airlines</span></li>

<li><a name="QFA789" onclick="menuoption('QFA789');return false;" href="#" id="QFA789">QFA789</a><br>
<span class="airline">Qantas Airlines</span></li>
</ul>
</div>

I changed the href values to "#" but you can amend these how you see fit.

Lastly, any reason for the inline styling on the content_flightlist div? Could extract that into your main.css as well as anything else inline. Unless of course its being created on the fly then please ignore.

Hope some of that helps.
Good luck with the rest of the build would be interested in seeing it finished.

mjn666 writes...

Just wanted to make note that I'm still getting the white border on the panel toggle button, is this intended? (FF 3.5)

Thanks for that.. is that any better? I'm using FF3.6 and don't see the outline. I've added the a {outline:none} to the main.css

Also, the current method you're using for the active state on your links is a little clunky. Ironheart mentioned using jQuery earlier, its much cleaner and far more flexible for you should you need to add more links later

I'm using the jquery in the controller.js as:

$('a').removeClass('selected');
$('#ALL').addClass('selected');

I'm not using the jquery click function because I'm essentially already using a function in the links.

I changed the href values to "#" but you can amend these how you see fit.

I'll change this now. Just forgot to do it before.. thanks.

Lastly, any reason for the inline styling on the content_flightlist div? Could extract that into your main.css as well as anything else inline. Unless of course its being created on the fly then please ignore.

The list of aircraft in the content_flightlist will be created on the fly. I'm just getting the formatting the way I want it so it's easier when I start the jquery/javascript coding. Currently all the data seen is bogus and static. I'll be using jquery to parse an xml file and then creating the flight list on the fly.

I wrote a vb .net application that parses the output from my virtual radar box and creates an XML output which I'm uploading to my webhost every 10 seconds.

eg. http://www.flighttracker.gleff.com/getdata/aircraft.xml

Hope some of that helps.
Good luck with the rest of the build would be interested in seeing it finished.

Sure does.. much appreciated.

I'm going on holidays in a couple of weeks so I'll start the coding then. I'll probably seek assistance on occasion from good 'ole Whirlpool ;)

Let me know if the outline still exists. I think it will in IE because I don't think it supports outline. (IE is the bain of my existence).

gleff writes...

I'm not using the jquery click function because I'm essentially already using a function in the links.

This is really not a good way of doing it. You'll slash your wrists over it later, I think.

I think it will in IE because I don't think it supports outline.

IE supports outline if you use a doctype (which I assume is the case)

ironheart writes...

This is really not a good way of doing it. You'll slash your wrists over it later, I think.

What's wrong with the way i'm doing it.. or better yet, what is the advantage to doing it the other way? So far, I see my current method as being sufficient, but i'm definitely open to another way if there's a good reason for it. Can you explain?

Basically, the flight list will be created on the fly using jquery. The click event as it currently stands runs the menuoption function and passes the hex code to it (actually at the moment it's the callsign, but will be the hex code). I'll then process this and other data.

IE supports outline if you use a doctype (which I assume is the case)

I didn't realize this. I am using a doctype. I just thought it wasn't supported. I just noticed though that since I put the a outline: none; into the main.css it's fixed it for me.. So that's great news.

gleff writes...

what is the advantage to doing it the other way?

It abstracts the javascript from the html. Unobtrusive coding means you aren't presented with a mammoth wad of junk when you edit code.

With jquery, there is a massive plus because of its selection ability:

eg. $('a').each(function() {...}); allows me to apply a behaviour to *all* anchor tags on a page.

$('a').each(function() {
   $(this).click(function() {
      menustyle(); 
   });
});

Using your way, you'd have to manually search for and add these behaviours manually.

<a onclick='menustyle();'>blah</a>

What if you wanted to change the function from menustyle() or whatever you used, to something else? What if it were a mix of two functions? What if you want to do more than just menustyle(); and wanted to do say, buttonstyle() and imagestyle() as well? Suddenly your links become something horrific like this all over the place:

<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a onclick='menustyle();buttonstyle();imagestyle();'>fourteen sheep went missing</a>

<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a onclick='menustyle();buttonstyle();imagestyle();'>a frozen carrot was found</a>

<h2>augustus gloop</h2>
<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a onclick='menustyle();buttonstyle();imagestyle();'>the clouds were damp today</a>

It's clunky, unwieldy and *obtrusive*. And yes, there was a time when I used to do it like this. Then I found jQuery and life was much, MUCH better.

This is much easier to read and therefore maintain, fix and extend:

$('a').each(function() {
   $(this).click(function() {
      menustyle();
      buttonstyle();
      imagestyle();
      impossibly_large_set_of_other_functions();
   });
});

<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a>fourteen sheep went missing</a>

<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a>a frozen carrot was found</a>

<h2>augustus gloop</h2>
<p>lorem ipsum dolor sit amet nu ani anquietas</p>
<a>the clouds were damp today</a>

I can add mouseover, mouseout states *to every anchor tag* just as easily without even TOUCHING the html itself, not needing to modify crap inline, saving myself the headache of wondering: "have i actually done this for all the anchor tags, or are there one or two missing somewhere? Why doesn't this particular one work?"

$('a').each(function() {
   $(this).click(function() {
      menustyle();
      buttonstyle();
      imagestyle();
      impossibly_large_set_of_other_functions();
   });

   $(this).mouseover(function() {
      insert_massive_amount_of_things_to_do();
   });

   $(this).mouseout(function() {
      insert_more_massive_amount_of_things_to_do();
   });
});

Unobtrusive javascript is something that really should be drilled into beginners, rather than letting them pick up bad habits and run with them. It's for these kinds of reasons I am loathe to use some other dude's script without having at least considered rebuilding it myself (unless of course, it's already good to start with)

Other benefits:
1. All my javascript is kept away from html. This allows me to squish the javasript using a minifier, or an uglifier, making it both smaller and harder for people to swipe.

2. the HTML file itself is smaller and easy to edit, because it's clean and javascript free (this also allows you to utilise Strategic Division of Labour, where you have a javascripter who can program things independently of the HTML guy who doesn't need to have knowledge of javascript to move crap around on his page). I suppose you might think of it as Three-and-a-half tier architecture or something like that.

3. Because of (2) it's easier for people to read and fix ;)

Thanks Ironheart. Makes sense. I'll give your way a bit of thought before deciding whether to rewrite that part. I invision that I may only have to update one line anyway for this particular click event since all the flight list items will be built automatically from one master line.

Having said that, this is how I learn, by trial and error. It's good to get other ways of doing it, and often I may re-write sections.

Thanks for the explanation. Much appreciated.

gleff writes...

Having said that, this is how I learn, by trial and error. It's good to get other ways of doing it, and often I may re-write sections.

It's how I did it. I've done things the wrong way so many times, too :P

gleff writes...

is that any better?

Bingo.

I'm not using the jquery click function because I'm essentially already using a function in the links.

Looks like you've been sorted on this now too.

I'm fairly certain you'll have a light bulb moment when you realise the suggested method works in your favour!

ok.. I've re-written that section.. and you're both right.. It's radically simplified things.

I'm now controlling the click function from the document.ready as well as the addclass and removeclass. Now my controller.js contains nothing but an if/else statement and a temporary alert command. Should make it much easier to code now.

I've also radically reduced the link size.

Thanks heaps for the suggestions and help.

Just a note, I use unobstrusive JS, only because it's the better alternative, but it's definitely not without its flaws. While replacing the inline onclick event with unobtrusive JS is what I would have done, there are a couple of things to consider:

1) an inline event declared is immediately attached to the element when it's loaded onto the page, therefore, it doesn't have to wait for the document.onready event to trigger

2) an inline event is applied to that element, and that element alone; you don't need to worry about performance issues with poor usage of selectors.

For point 1, I'm hoping they'll release a new version of JavaScript that has onready event for all DOM elements.

For the second point, if you're selecting by class or tag name, you should give it a context. For example, you could change your "tabs" from class to id and do:

$('li', $('#tabs')).click(function() { ... });

JuB-jUb writes...

Just a note, I use unobstrusive JS, only because it's the better alternative, but it's definitely not without its flaws. While replacing the inline onclick event with unobtrusive JS is what I would have done, there are a couple of things to consider:

Thanks for that. Duly noted. I think in this case though, there's no point in changing what's working, and working pretty well imho.