Three till Seven

Posts with Tag “css”

8 Jan 08 new layout: Lime

I put up a new layout today, but it’s not meant to be anything spectacular, I was just sick of looking at the other one. This one also fixes some broken links that were still around after I did the big content reorg a few weeks ago. I’m going for simplicity and readability with this layout, instead of spectacular appearance. I’m going to work on a stylesheet for the ‘handheld’ media type now, because I know Kathy reads my blog on her Palm and she has had trouble in the past with my layouts being too big or image-heavy.

Time:
3:32 PM
Categories:
3till7.net
Tags:
,
Comments:
5 comments / Add a comment »

26 Sep 07 using Javascript and CSS to mark outgoing links

Note: If you enjoy this article, you might also check out the Geeky Stuff section.

It may be useful to your visitors to know which links will take them off of your site without having to hover over all of them. It might also be a nice touch to mark links pointing to PDF documents, for example, with a little Adobe PDF logo. With the help of Javascript and CSS, you can do this pretty simply.

First, we need some Javascript to go through our page and add a CSS class to every link that we want to differentiate.

JAVASCRIPT

// Goes through all links in a page and adds CSS
// classes to them to better style outgoing links,
// PDF links, etc.
function link_classifier() {
  // Get an array of all links in the page
  var links = document.getElementsByTagName( 'a' )

  // These variables will be used later to store
  // the current 'a' object we're working with,
  // and its URI
  var curr_link, uri

  // A regular expression to match URI's ending
  // in 'pdf'
  var pdf_regex = new RegExp( 'pdf$', 'i' )

  // A regular expression to match URI's beginning
  // with 'http://', which we will assume go to
  // other sites
  var outside_regex = new RegExp( '^http://', 'i' )
   
  for ( var i=0; i<links.length; i++ ) {
    curr_link = links[i]
    uri = curr_link.getAttribute( 'href' )
       
    // Add a CSS class to PDF links
    if ( pdf_regex.test( uri ) )
      add_class( curr_link, 'pdf' )
       
    // Add a CSS class to outside links
    if ( outside_regex.test( uri ) )
      add_class( curr_link, 'outside' )
  }
}

// Given some object and a class name, this
// function will append the given class name
// to the CSS class of the object
function add_class( object, class_name ) {
  var old_class = object.getAttribute( 'class' )
   
  if ( old_class == '' || old_class == null )
    object.setAttribute( 'class', class_name )
  else
    object.setAttribute( 'class', old_class + ' ' + class_name )
}

// Tell the browser to run our link_classifier
// function when the page loads
window.onload = link_classifier()

Now we can style the links based on their class names. You could do whatever you wanted to with them, maybe make all outgoing links bold, whatever. For me, I like having little icons next to outgoing links or other special links. If it's a PDF document, maybe use an Adobe logo. If it's an MP3, a little music note. Get creative! Anywho, here's some CSS for sticking such little logos in after the text of a link:

CSS

a.outside {
  background: url('outgoing_link.gif') no-repeat right center;
  padding-right: 11px;
}

a.pdf {
  background: url('pdf.gif') no-repeat right center;
  padding-right: 14px;
}

I set the right padding to be the width of the icon plus 1, so that the icon wouldn't be pressed right against the text.

Time:
3:11 PM
Categories:
Javascript, Web development
Tags:
, ,
Comments:
2 comments / Add a comment »
Music:
The Way I Are by Timbaland

22 Sep 07 Commando award possibilities

I’m having trouble deciding which site to give the first Commando award. There have been a lot of suggestions over at Snark, but it seems like whichever site I visit is already well known to my little group online, or the site bugs me in some area: the graphics are boring, the colors are too bright, the layout is weird, etc. Here are some of the sites I’m thinking of; got any suggestions as to which one, or another?

Artlessly by Hui
I like the layout on this one, but the content doesn’t seem to be that exciting. It’s mostly a blog and it doesn’t help that the most recent entry was from a month ago, at the time I’m posting this.
Mermaid Park by Leslie
I love vintage art, but I really doubt the owner drew the image of the firemen herself, and I would prefer to award a site whose graphics are homemade. I do really like the layout, however, even though it’s very simple and doesn’t showcase much graphical talent. She does seem to have an eye for laying out a page, though, because the padding and colors all work together. Her photos are nice, too, and the layout there is also good.
Valenti by Cindy
The layout is cute but the header image’s background doesn’t blend in perfectly with the page background (the greens are just slightly off), and that bugs the heck out of me. I’m looking for attention to detail. Maybe it just isn’t visible on her monitor.
Appassionato by Rilla
This would be a great candidate except it’s in Perfection so I figure most everyone in our little online circle already knows it anyway.
Noche Illusies by Autumn
It’s a gorgeous layout and I love the colors, but not all the text is easily readable because it blends in with the background in spots.
Time:
2:44 PM
Categories:
Daily life
Tags:
Comments:
6 comments / Add a comment »
Music:
Spinning by Zero 7