CHAPTER 8:IMPROVINGNAVIGATIONUsing jQuerys mojo to help your visitors getaround
The web is all about going from page topage
We can make somereal magic happenwhen jQuery altersthe links• Select links• Reassign their location• Stop them from going ...
Selecting links• Quick quiz … what do each of these select?$(a) – ___________________$(#mainNav a) – ___________________$(...
You can change a links destination• Change the href attribute$(#someLink).attr(href,"http://tic.com/props");
You canintercept thenavigation• return false• event.preventDefault() $(#id).click(function() {   $(#theDiv).show();   retu...
If you open external                                   links in a new                                   window, you wont l...
How to create a new window or tab               open(URL, windowName, properties)                            … or …      v...
Windows have                             many properties                           • height & width (pixels)              ...
Hang on to your new windows referenceso you can remotely control it• var helpWin = open(help.html, _blank);• helpWin.close...
How do you host a page within a page?iframes!             <iframe id="ticIFrame">             </iframe>             Then i...
Dropdown menus are a great example ofimproving UI with jQuery1. Add links to your html  • Putting them in nested <li>s or ...
Menus: Add links to your html<ul id="nav">  <li><a href="#">Parent 01</a></li>  <li><a href="#">Parent 02</a>      <ul>   ...
Style the elements so they appearproperly.clear {clear:both}             /* submenu, its hidden by default */#nav {       ...
Create jQuery to make themappear/disappear$(document).ready(function () {    $(#nav li).hover(       function () { //show ...
Conclusion• We can reassign links to do our bidding• Stop links from forwarding with return false;• Create pop-up windows ...
Lab• iframe tutorial – pp. 248 – 249• Dropdown menu tutorial – pp. 254 - 255
Upcoming SlideShare
Loading in...5
×

08 improving navigation

650

Published on

Copyright (c) 2012 Rap Payne

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
650
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • p. 235We&apos;ll look at these steps on the next few pages.Image courtesy Xtream_i at Flickr. Used with permission.
  • pp. 235 – 236$(&apos;a&apos;) – All links on the page$(&apos;#mainNav a) – All links in a certain area$(&apos;a[href^&quot;http://&quot;]&apos;) – All external links$(&apos;a[href$=&quot;.pdf&quot;]&apos;) – All links pointing to pdfs$(&apos;a[href*=&quot;tic.com&quot;]&apos;) – All links pointing to tic.com
  • pp. 236 - 237
  • pp. 237 – 238Just have the link call a JavaScript function and return false.
  • pp. 238 - 240
  • pp. 240 – 241Note that none of this is jQuery. All of it is pure JavaScriptWhether it opens a new window or tab is dependent on the user&apos;s preferences. Some browser will allow you to force a new window if you specify a height and width for that window. It is browser-dependent.
  • pp. 241 – 243location is the address bar1 and 0 also work in place of yes and no.
  • pp. 243 - 245
  • pp. 245 - 247
  • This and next three slides - pp. 248 – 254True story, but there are better ways – like plug ins. jQueryUI doesn&apos;t have one yet.use http://www.queness.com/post/1047/easy-to-style-jquery-drop-down-menu-tutorial. Cut and paste from it.
  • The divs are cleared so that the li&apos;s can begin laying out normally again.
  • 08 improving navigation

    1. 1. CHAPTER 8:IMPROVINGNAVIGATIONUsing jQuerys mojo to help your visitors getaround
    2. 2. The web is all about going from page topage
    3. 3. We can make somereal magic happenwhen jQuery altersthe links• Select links• Reassign their location• Stop them from going there• Open links in other windows
    4. 4. 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
    5. 5. You can change a links destination• Change the href attribute$(#someLink).attr(href,"http://tic.com/props");
    6. 6. You canintercept thenavigation• return false• event.preventDefault() $(#id).click(function() { $(#theDiv).show(); return false; });
    7. 7. If you open external links in a new window, you wont lose eyeballs• Links with a target of _blank will open in a new window• $(a[href^="http:"])• .not([href*="tic.com"])• .attr(target,_blank);
    8. 8. 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 theres no window called "windowName", a new one is created• But if "windowName" is already existing, the URL is opened in that window.
    9. 9. 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
    10. 10. Hang on to your new windows referenceso 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);
    11. 11. How do you host a page within a page?iframes! <iframe id="ticIFrame"> </iframe> Then in the JavaScript … $("#ticIFrame") .attr(src,tic.com);
    12. 12. Dropdown menus are a great example ofimproving UI with jQuery1. Add links to your html • Putting them in nested <li>s or <div>s make them easy to select2. Style the top links to display side-by-side and the sub- links to display under the top-level3. Add jQuery to display submenus when the top level is clicked• Well 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
    13. 13. 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>
    14. 14. Style the elements so they appearproperly.clear {clear:both} /* submenu, its hidden by default */#nav { #nav ul { list-style:none; position:absolute;} left:0;#nav li { display:none; float:left; list-style:none; display:block; } width:100px; #nav ul li { background:#ccc; width:100px; position:relative; float:left; z-index:500; } margin:0 1px; /* display block will make the link fill the whole } area of the li *//* this is the parent menu */ #nav ul a {#nav li a { display:block; display:block; }}
    15. 15. Create jQuery to make themappear/disappear$(document).ready(function () { $(#nav li).hover( function () { //show its submenu $(ul, this).slideDown(100); }, function () { //hide its submenu $(ul, this).slideUp(100); } );});
    16. 16. 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 elements2. Style them to appear properly3. Write jQuery to show/hide/position them
    17. 17. Lab• iframe tutorial – pp. 248 – 249• Dropdown menu tutorial – pp. 254 - 255
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×