0x6 Appeal

• 2009-09-04

  http://typeface.neocracy.org/

• 2009-08-17

  [.css] Taming Advanced CSS Selectors

  Great article on how to work with selectors and dependencies. This should be made into a cheat sheet.

• 2009-08-14

  [.js] Conditional Statement Shortcuts

  If you’re writing a simple if statement that sets one variable to one of two conditions, you can use something called a ternary operator. It’s basically a one line conditional statement.

  Say you have some JavaScript that checks a user’s login status:

  
      var status;
      if (login) {
          status = 'signed in';
      } else {
          status = 'signed out';
      }
  
  
  

  You can rewrite it simply as:

  
      var status=(login)?'signed in':'signed out';
  
  
  

  Pretty simple, eh?

• →

  [.js] Make Your Links Boxes

  Text hyperlinks are boring. While they have their place in a document, common practice on the front page of a website still dictates a large text link for many. Why not put it a big box instead? First we’ll start with some CSS defining the block and it’s properties (and the background image):

  
      .linkBox {
  	background: #F5F5D3;
  	padding: 5px;
  	border: 1px solid #0B3636;
  	float: left;
  	width: 165px;
  	margin-right: 10px;
  	height: 100px;
      }
      #main .linkBox a {
  	color: #154040;
  	text-decoration: none;
      }
      #main .linkBox p {
  	font-size: 14px;
  	margin-top: 20px;
      }
      .hoverLinkBox {
  	background: url(../images/background.png) no-repeat right top;
      }
      #main .hoverLinkBox a {
  	color: #FFF;
      }
  
  
  

  Next we’ll introduce the JavaScript that initiates a hover event when a user’s mouse drifts over the box:

  
      $(document).ready(function() {
          var target = '.linkBox';
          var hoverClass = 'hoverLinkBox';
          $(target).each(function() {
              $(this).hover(
                  function() {
                      $(this).addClass(hoverClass);
                      status=$(this).find('a').attr('href');
                  },
                  function() {
                      $(this).removeClass(hoverClass);
                      status='';
                  }
              );
              $(this).click(function() {
                  location=$(this).find('a').attr('href');
              });
              $(this).css('cursor','pointer');
          });
      });