HTML5+jQuery+CSS3 Highlight Selected Nav Item

After looking around the net I found that there were a number of ways to highlight the current item on a navigation menu. However, most of them seemed to be very rigid and written for a certain HTML structure. After finding this, I decided to write a simple jQuery script that allows the UX (User eXperience) to display as expected while using HTML5 coding practices. Here is the code for the script...

Script

/******************************************************
 * Listen for click event and set nav item to selected
 ******************************************************/
 var $navSets = $('nav'),
 //var $navSets = $('#navContainer'),
 $navLinks = $navSets.find('a');

 $navLinks.live('click', function(){
  var $this = $(this);
    
  if($this.hasClass('selected')) {
   return false;
  }

  var $navSet = $this.parents('nav');

  $navSet.find("a.selected").removeClass('selected');
  $this.addClass('selected');
 }); // End navLinks.live / click

The setup is pretty straight forward.

HTML Code

<nav>
    <ul>
        <li><a href='javascript:void(0);'>HOME</a></li>
        <li><a href='javascript:void(0);'>PORTFOLIO</a></li>
        <li><a href='javascript:void(0);'>ABOUT</a></li>
    </ul>
</nav>

The beauty of this is that you can add as many items that you want in the navigation and not have to worry about the page that's being called via AJAX to avoid a page refresh. Also, the nice thing about loading content with AJAX is that you only load the content you want to. While this isn't really SEO friendly, it does make for a great experience for the user.

Zbrush 4R3 Notes and Update

Hey folks! I've got away from posting for a while, but I wanted to share some of the exciting things that I've come upon in the past few weeks.

Let's start with the latest version of Zbrush (now at 4R3 at the time of the blog post.) If you had purchased this then you may (or may not) have received an upgrade notice. If you did not then simply contact the support team at Pixologic and they'll get you all squared away. Now on to some of the things that I've found in the upgrade!

First off, the introduction of the Dynamesh is just incredible to say the least! It's much like working with a ball of clay without the concerns of topology for your characters. You can simply rebuild the mesh if it becomes stretched saving a LOT of time.

Of couse the other addition to this release was the Fibers. Once I saw the video tutorial for it I was blown away with how fast hair or fringes could be added to a sub-tool or to a character mesh. Not only can you add the Fibers now, but they have a few built in tools for styling the hair as well. It's quite impressive and I've included a quick example of what can be done with it.

FEATURED ITEM: Spotlight

------------------------------------------------------------------
Key notes for Spotlight:

Images must be imported before you can activate Spotlight. Once this is done, then you can use the following commands to access spotlight.

SHIFT-Z: Turn spotlight off and on

(While in Spotlight) Z: To turn off and on the Spotlight Dial.
------------------------------------------------------------------

As I get further along with the Spotlight tool I will post more information and a video detailing the process of movie assets. This will also cover using Noise Maker, Zspheres and UV Master. So stay tuned for some interesting examples!

Accessing GPSLocation data from images

There are a few things that people are unaware of and one of those happens to be the fact that images from cell phones contain GPS location data. What!?! You exclaim. Well, there are many social sites that do strip this information. Although we won't be covering that here, I will cover how to access this data using jQuery and the jQuery plugin Exif.

w00t! Let's get started on this...

Files you will need:

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Exif Plugin: http://www.nihilogic.dk/labs/exifjquery/jquery.exif.js

I've also included code from Robert K. Davis showing how to convert DMS (Degrees, Minutes Seconds) to decimal for passing to Google Maps.

I'm not a javascript guru and if you see anything that would make this function better then please feel free to comment on this post.

**NOTE: exifPretty() is used to gather a complete list of exif data contained within the image(s).


DMS to DECIMAL: http://www.codingforums.com/archive/index.php/t-9709.html

$(".img").click(function() {
                
                    var longitude = $(this).exif("GPSLongitude");
                    var latitude = $(this).exif("GPSLatitude");
                    
                    var latRef = $(this).exif("GPSLatitudeRef");
                    var lngRef = $(this).exif("GPSLongitudeRef");
    
                    // Let's make the object to a string to split on the ,'s
                    var a1 = new Array();
                    var a2 = new Array();
                    
                    a1=longitude.toString().split(',');
                    a2=latitude.toString().split(',');
                    
                    if(lngRef == "W") {
                        a1[0] = Number(a1[0]);
                        a1[0] = -a1[0];
                    }
                    
                    if(latRef == "S") {
                        a2[0] = Number(a2[0]);
                        a2[0] = -a2[0];
                    }
                    
                    // Alert all of out exif data
                    // alert($(this).exifPretty());
                    
                    /* Populate the fields with the correct data */
                    
                    // Latitude
                    $("input[name=LatDegrees]").val(a2[0]);
                    $("input[name=LatMinutes]").val(a2[1]);
                    $("input[name=LatSeconds]").val(a2[2]);
                    // Longitude
                    $("input[name=LonDegrees]").val(a1[0]);
                    $("input[name=LonMinutes]").val(a1[1]);
                    $("input[name=LonSeconds]").val(a1[2]);
                    
                    //$("this.form").submit(toDecimal(this.form));
                    
                }); 
            });

            /******************************************
            DMS to Decimal Latitude/Longitude Converter
            © 2002 Robert K. Davis [DMS to DEC /START]
            *******************************************/
            function convert(D,M,S){
                 var DD;
                 D < 0 ? DD = roundOff(D + (M/-60) + (S/-3600),6) : DD = roundOff(D + (M/60) + (S/3600),6);
                 return DD;
            }
            function roundOff(num,decimalplaces){
                 var decimalfactor = Math.pow(10,decimalplaces);
                 var roundedValue = Math.round(num*decimalfactor)/decimalfactor;
                 return roundedValue;
            }
            function toDecimal(f){
                 var LatDegrees = parseInt(f.LatDegrees.value);
                 var LatMinutes = parseInt(f.LatMinutes.value);
                 var LatSeconds = parseInt(f.LatSeconds.value);
                 var LonDegrees = parseInt(f.LonDegrees.value);
                 var LonMinutes = parseInt(f.LonMinutes.value);
                 var LonSeconds = parseInt(f.LonSeconds.value);
            
                 var LatDecimalDegrees = convert(LatDegrees,LatMinutes,LatSeconds);
                 var LonDecimalDegrees = convert(LonDegrees,LonMinutes,LonSeconds);
            
                 !isNaN(LatDecimalDegrees) && !(LatDecimalDegrees > 90) && !(LatDecimalDegrees < -90) ? f.LatDecimalDegrees.value = LatDecimalDegrees : f.LatDecimalDegrees.value = "";
                 !isNaN(LonDecimalDegrees) && !(LonDecimalDegrees > 180) && !(LonDecimalDegrees < -180)  ? f.LonDecimalDegrees.value = LonDecimalDegrees : f.LonDecimalDegrees.value = "";
                 
                 sendToGoogle(LatDecimalDegrees, LonDecimalDegrees);
            }
            
            /******************************************
            DMS to Decimal Latitude/Longitude Converter
            © 2002 Robert K. Davis [DMS to DEC /END]
            *******************************************/