JQUERY NAVIGATION Using jQuery's mojo to help your visitors get around

The web is all about going from page to page

We can make some real magic happen when jQuery alters the links

• Select links • Reassign their location • Stop them from going there • Open links in other windows

Selecting links • Quick quiz … what do each of these select? $('a') – ___________________!$('#mainNav a') – ___________________!$('a[href^="http://"]') – ________________!$('a[href$=".pdf"]') – ___________________!$('a[href*="tic.com"]') – __________________!• Once selected, you can each() through the resulting links

You can change a link's destination • Change the href attribute $('#someLink').prop('href',"http://tic.com/props");!

You can intercept the navigation •  return false •  event.preventDefault()

$('#id').click(function() {! $('#theDiv').show();! return false;!});

If you open external links in a new window, you won't lose eyeballs

•  Links with a target of _blank will open in a new window

• $('a[href^="http:"]')!• .not('[href*="tic.com"]')!• .attr('target','_blank');!

How to create a new window or tab open(URL, windowName, properties)!

… or … var windowHandle = open(URL, windowName, properties)!

• Opens URL in a window called "windowName" •  If there's no window called "windowName", a new one is

created • But if "windowName" is already existing, the URL is opened in

that window.

Windows have many properties

•  height & width (pixels) •  left & top (pixels) • menubar (yes|no) •  toolbar (yes|no) •  location (yes|no) •  status (yes|no) •  resizable (yes|no) •  scrollbars (yes|no) •  titlebar (yes|no)

'height=200,width=400,left=100,top=100,menubar=yes,toolbar=no,location=no,titlebar=no'!

Hang on to your new window's reference so you can remotely control it •  var helpWin = open('help.html', '_blank'); •  helpWin.close(); •  helpWin.blur(); //Pop under other windows •  helpWin.focus(); //Pop on top •  helpWin.moveBy(x,y); •  helpWin.moveTo(x,y); •  helpWin.resizeBy(x,y); •  helpWin.resizeTo(x,y); •  helpWin.scrollBy(x,y); •  helpWin.scrollTo(x,y);

How do you host a page within a page? iframes!

<iframe id="ticIFrame">!</iframe>!Then in the JavaScript … $("#ticIFrame")! .attr('src','tic.com');!

Dropdown menus are a great example of improving UI with jQuery 1.  Add links to your html

•  Putting them in nested <li>s or <div>s make them easy to select

2.  Style the top links to display side-by-side and the sub-links to display under the top-level

3.  Add jQuery to display submenus when the top level is clicked

• We'll drill into each on the next few pages •  Important! This exercise is not for you to memorize or

even completely understand immediately. It is for you to get an idea of the strategy of UX with jQuery

Menus: Add links to your html <ul id="nav">!    <li><a href="#">Parent 01</a></li>!    <li><a href="#">Parent 02</a>!        <ul>!            <li><a href="#">Item 01</a></li>!            <li><a href="#">Item 02</a></li>!            <li><a href="#">Item 03</a></li>!        </ul>!        <div class="clear"></div>!    </li>!    <li><a href="#">Parent 03</a>!     <ul>!         <li><a href="#">Item 04</a></li>!         <li><a href="#">Item 05</a></li>!         <li><a href="#">Item 06</a></li>!         <li><a href="#">Item 07</a></li>!     </ul>         !     <div class="clear"></div>!    </li>!    <li><a href="#">Parent 04</a></li>!</ul>!<div class="clear"></div>!

Style the elements so they appear properly .clear {clear:both;} !/* top-level menu */!#nav li {!        float:left; !        width:100px; !        background:#ccc; !        position:relative;!}!!

/* submenu */!#nav ul {!    display:none; !}!!

Create jQuery to make them appear/disappear $(document).ready(function () { !    $('#nav li').hover(!        function () { //show its submenu!            $('ul', this).slideDown(100);!        }, !        function () { //hide its submenu!            $('ul', this).slideUp(100);         !        }!    ); !});!

Conclusion • We can reassign links to do our bidding • Stop links from forwarding with 'return false;' • Create pop-up windows and control them with JavaScript •  iFrames are great for hosting pages within pages •  Typical jQuery UX attack: 1.  Add normal HTML elements 2.  Style them to appear properly 3.  Write jQuery to show/hide/position them