Lunch & Learn<br />Using jQuery<br />Learning from a year of SharePoint branding <br />Zeddy Iskandar / Food Manager<br /...
Pay Attention!<br />Rewards for occasional questions:<br />Rewards for tougher questions:<br />
What is jQuery?<br />#lga{<br />  height: 231px;<br />}<br /><img height="95" width="275" src="/logo2w.png" alt="Google"><...
What is jQuery?<br />What we want tosee<br />We want a Client-Side API to manipulate generated content<br />
What is jQuery?<br />DOM<br />Document Object Model<br />What we want tosee<br />We want a cross-browser framework to acce...
What is jQuery?<br />Paste code below to FireBug console, after jQuery-fying Google.com homepage<br />jQuery("#lga").hover...
What is jQuery?<br />DOM<br />Document Object Model<br />What we want tosee<br />cross-browser framework to access DOM<br ...
jQuery Setup<br />The framework: http://jquery.com<br />The jQuery-friendly browser:<br />http://mozilla.com<br />The DOM-...
jQuery for SharePoint Dev<br />Use NotePad++ to open:<br />.CSS & .JS in TEMPLATELAYOUTS<br />.ASCX in TEMPLATECONTROLTEMP...
How to use jQuery<br />Find the element<br />the one(s) you think will help you achieve that magic look & feel<br />Do stu...
jQuery Syntax<br />jQuery(“selector”).doStuff();<br />
selectors<br />
Most-used Selectors<br />(“#ZCarousel”)<br />selects element with id=ZCarousel<br />(“.item”)<br />selects element(s) with...
Most-used Selectors<br />(“#ZCarouselli:first”)<br />selects the 1st <li> tag found under ZCarousel<br />(“#ZCarouselli:la...
Most-used Selectors<br />(“element [attribute=something]”) <br />the example below grabs the 1st <tbody> emitted by the ta...
Most-used Selectors<br />(“input[id$=‘txtCurrency1']”)<br />element <input> with attribute id ends with ‘txtCurrency1’,   ...
METHODS<br />
Most-used Methods<br />.css(“style”, “value”)<br />or use the map argument:<br />.addClass(“redTheme”)<br />.removeClass(“...
Most-used Methods<br />.hasClass(“certainClass”)<br />check if element is using certainClass<br />.is(“:visible”)<br />if ...
Most-used Methods<br />Used to add horizontal scrollbar in Allitems.aspx page<br />// If #s4-leftpanel is visible, make th...
Most-used Methods<br />.text()<br />gets/sets combined string of element<br />.val()<br />gets/sets values of form element...
Most-used Methods<br />.attr()<br />gets/sets attribute of element<br />guess what the above does?<br />jQuery("[id$='txtF...
Most-used Methods<br />.clone() followed by .insertAfter() / .append()<br />clone an element, then appends or insert it af...
Most-used Methods<br />var copy = tr.clone();<br />// Modifications<br />copy.find("td.colNoOfShares > input").val("");<br...
Most-used Methods<br />.clone() only copies the HTML tag, does not copy events attached to the elements. See example for o...
events<br />
Most-used Events<br />.hover()<br />sets up on hover and on leave in one go<br />jQuery("#ZCarousel").hover(<br />	functio...
Most-used Events<br />.click()<br />sets up on hover and on leave in one go<br />guess what the above does?<br />jQuery(“a...
Most-used Events<br />jQuery(“a#changeMonth”).click(function () {<br />jQuery(monthFacadeText).text($(this).text());<br />...
animation<br />
How to Build a Carousel<br />.animate()<br />allows to animate an element style property (top, left, opacity, etc.)<br />
How to Build a Carousel (1)<br />Step 1: Output a series of <li> items to be carouseled:<br /><divid="ZSlideShow"><br /><d...
How to Build a Carousel (2)<br />Step 2: Float items to the left & set viewport<br />#ZSlideShowul#carousel<br />{<br />ma...
How to Build a Carousel (3)<br />Step 3: Set up helper CONSTANTS in .js<br />var ITEM_WIDTH = 166; // 161 div + 5px margin...
How to Build a Carousel (4)<br />Step 4: Set up Carouse on when DOM is ready<br />`<br />jQuery(document).ready(function()...
How to Build a Carousel (5)<br />Step 5: Helper functions<br />`<br />functionsetupAutoScroller() {<br />varintervalInSeco...
How to Build a Carousel<br />Visual logic: we are animating the Left property of the #carousel to slide left or right. The...
How to Build a Carousel (6)<br />Step 6: Append items to front & back for smooth circular effect<br />functionappendOrigin...
How to Build a Carousel (7)<br />Step 7: What happens when you click Next button<br />functioncarousel_next() {<br />var i...
How to Build a Carousel (8)<br />Step 8: What happens when you click Prev button<br />functioncarousel_prev() {<br />var i...
Thank youQ&A<br />
Upcoming SlideShare
Loading in...5
×

jQuery for Sharepoint Dev

2,862

Published on

I presented this lecture to the new SharePoint devs joining our team. As I take on the challenge of Surface v2 development, I felt the urge to share my knowledge of branding SharePoint portals with jQuery for the past 1 year.

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

No Downloads
Views
Total Views
2,862
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery for Sharepoint Dev

  1. 1. Lunch & Learn<br />Using jQuery<br />Learning from a year of SharePoint branding <br />Zeddy Iskandar / Food Manager<br />UX Engineer<br />
  2. 2. Pay Attention!<br />Rewards for occasional questions:<br />Rewards for tougher questions:<br />
  3. 3. What is jQuery?<br />#lga{<br /> height: 231px;<br />}<br /><img height="95" width="275" src="/logo2w.png" alt="Google"><br />What we see<br />We generate HTML from server-side API<br />
  4. 4. What is jQuery?<br />What we want tosee<br />We want a Client-Side API to manipulate generated content<br />
  5. 5. What is jQuery?<br />DOM<br />Document Object Model<br />What we want tosee<br />We want a cross-browser framework to access DOM<br />
  6. 6. What is jQuery?<br />Paste code below to FireBug console, after jQuery-fying Google.com homepage<br />jQuery("#lga").hover(<br /> function() {<br />jQuery("#lgaimg").attr("src", "http://www.gravatar.com/avatar/6872bc097bdddbfec28a56f76d0569a7");<br />jQuery("#lgaimg").attr("width", "150");<br />jQuery("<div>Happy Birthday Zeddy</div>").insertAfter("#lgaimg");<br /> }, <br /> function() {<br />jQuery("#lgaimg").attr("src", "/intl/en_com/images/srpr/logo2w.png");<br />jQuery("#lgaimg").removeAttr("width");<br />jQuery("#lga div").remove();<br /> });<br />
  7. 7. What is jQuery?<br />DOM<br />Document Object Model<br />What we want tosee<br />cross-browser framework to access DOM<br />==<br />
  8. 8. jQuery Setup<br />The framework: http://jquery.com<br />The jQuery-friendly browser:<br />http://mozilla.com<br />The DOM-inspector browser plugin:<br />http://getfirebug.com<br />Additional FireBug plugins:<br />http://firequery.binaryage.com<br />http://robertnyman.com/firefinder<br />
  9. 9. jQuery for SharePoint Dev<br />Use NotePad++ to open:<br />.CSS & .JS in TEMPLATELAYOUTS<br />.ASCX in TEMPLATECONTROLTEMPLATES<br />Use FireBugconsole to test jQuery scripts<br />Use FireBuginspector to edit CSS<br />Copy the tested jQuery & CSS to NotePad++<br />Test in IE7+ and fix browser-compatibility issues<br />
  10. 10. How to use jQuery<br />Find the element<br />the one(s) you think will help you achieve that magic look & feel<br />Do stuff to it<br />add hover effect, move position, replace the HTML tag with completely different tag(s), delete, animate, etc.<br />
  11. 11. jQuery Syntax<br />jQuery(“selector”).doStuff();<br />
  12. 12. selectors<br />
  13. 13. Most-used Selectors<br />(“#ZCarousel”)<br />selects element with id=ZCarousel<br />(“.item”)<br />selects element(s) with class=item<br />(“#ZCarousel li div.item”)<br />CSS-style selectors: select all <div> with class=item under <li> tag which is under ZCarousel element<br />
  14. 14. Most-used Selectors<br />(“#ZCarouselli:first”)<br />selects the 1st <li> tag found under ZCarousel<br />(“#ZCarouselli:last”) <br />selects the last <li> tag found unerZCarousel<br />(“#ZCarouselli:even”)<br />(“#ZCarouselli:odd”)<br />get all the even or odd <li> elements, useful for alternating effect<br />
  15. 15. Most-used Selectors<br />(“element [attribute=something]”) <br />the example below grabs the 1st <tbody> emitted by the tag <asp:Calendar><br />the example below changes the Prev Month arrow emitted by the tag <asp:Calendar><br />vartbody= jQuery("#calendarArea table[title=Calendar] tbody:first");<br />// Change month arrows<br />variconPrev = "<imgsrc='/_layouts/darkBlueArrow-Left.png' />";<br />varprevLink = jQuery("#calendarArea a[title='Go to the previous month']");<br />prevLink.html(iconPrev);<br />
  16. 16. Most-used Selectors<br />(“input[id$=‘txtCurrency1']”)<br />element <input> with attribute id ends with ‘txtCurrency1’, eg. this ASP.NET tag:<br />will generate this HTML:<br />this jQuery will get that element’s value:<br /><asp:TextBox ID="txtCurrency1" runat="server" /><br /><input type="text" value=“United Arab Emirates (AED)" id="ctl00_m_g_50b54854_4b09_4b72_a69d_6ded7f051845_ctl00_txtCurrency1" /><br />var curr1Pref = jQuery("input[id$=‘txtCurrency1']").val();<br />
  17. 17. METHODS<br />
  18. 18. Most-used Methods<br />.css(“style”, “value”)<br />or use the map argument:<br />.addClass(“redTheme”)<br />.removeClass(“redTheme”)<br />adds / removes class from element<br />jQuery(this).css({<br /> position: “absolute",<br />top: “10px"<br />left: “100px"<br />});<br />
  19. 19. Most-used Methods<br />.hasClass(“certainClass”)<br />check if element is using certainClass<br />.is(“:visible”)<br />if (!jQuery(this).hasClass("ui-accordion-content-active")) {<br />spacer.insertAfter(jQuery(this));<br />}<br />varleftPanel = jQuery("#s4-leftpanel");<br />if (leftPanel.length > 0 && leftPanel.is(":visible'"))<br />
  20. 20. Most-used Methods<br />Used to add horizontal scrollbar in Allitems.aspx page<br />// If #s4-leftpanel is visible, make the table layout scrollable<br />// so it doesn't fall to the bottom in IE8+, FF, Chrome<br />varleftPanel = jQuery("#s4-leftpanel");<br />if (leftPanel.length > 0 && leftPanel.is(":visible'")) {<br />// allow horizontal scrollbar on right column<br />varrightCol = jQuery("#parentPlaceHolderMain");<br /> rightCol.css("overflow-x", "auto");<br />if (jQuery.browser.msie && jQuery.browser.version < 8.0) {<br />// only happens in IE 7<br />var height = rightCol.height();<br /> rightCol.css("height", height + 30 + "px");<br /> }<br />}<br />
  21. 21. Most-used Methods<br />.text()<br />gets/sets combined string of element<br />.val()<br />gets/sets values of form elements<br />.hide() / .show() / .toggle()<br />hide/show element. Use .toggle for toggling between hiding/showing<br />var date = jQuery("input[id$='hiddenEventStartDate']").val();<br />
  22. 22. Most-used Methods<br />.attr()<br />gets/sets attribute of element<br />guess what the above does?<br />jQuery("[id$='txtFirstName']").focus(function () {<br /> if (jQuery(this).val() == jQuery (this).attr("title"))<br />jQuery (this).val("");<br />})<br />.blur(function () {<br /> if (jQuery(this).val() == "")<br />jQuery(this).val(jQuery(this).attr("title"));<br />});<br />Default value of field FirstNameis set in custom attribute Title (set via server-side, reading from resource). If you click on the field, the value is cleared, allowing you to type a value. When you move outside the field and no value is entered, a default value is set once again (Used for “Enter First Name here” helper)<br />
  23. 23. Most-used Methods<br />.clone() followed by .insertAfter() / .append()<br />clone an element, then appends or insert it after another element<br />guess what the above does?<br />does .clone() persist element event-binding?<br />var copy = tr.clone();<br />// Modifications<br />copy.find("td.colNoOfShares > input").val("");<br />copy.find("td.colPricePerShare > input").val("");<br />copy.find("td.colAddRemoveButtons > a[title=delThis]").show();<br />tbody.append(copy);<br />
  24. 24. Most-used Methods<br />var copy = tr.clone();<br />// Modifications<br />copy.find("td.colNoOfShares > input").val("");<br />copy.find("td.colPricePerShare > input").val("");<br />copy.find("td.colAddRemoveButtons > a[title=delThis]").show();<br />tbody.append(copy);<br />Above code used to clone a row when “Add Stock” button is clicked<br />
  25. 25. Most-used Methods<br />.clone() only copies the HTML tag, does not copy events attached to the elements. See example for our Advanced Search below; after we clone the advanced search criteria row, we re-attach the event handlers to the cloned element<br />var copy = jQuery(tr).clone();<br />// Modifications<br />jQuery(copy).children("td.colWhereTheProperty").text("");<br />jQuery(copy).find("td.colAddRemoveButtons > a:eq(1)").show(); // show del button<br />var selectors = jQuery(copy).find("div.selectorWrapper");<br />jQuery(selectors).each(function () {<br />addClickHandler(this);<br /> …<br />});<br />
  26. 26. events<br />
  27. 27. Most-used Events<br />.hover()<br />sets up on hover and on leave in one go<br />jQuery("#ZCarousel").hover(<br /> function () {<br />jQuery(“.divArrows”).show();<br />window.clearInterval(autoscroller_timer);<br /> },<br /> function () {<br />jQuery(“.divArrows”).hide();<br />setupAutoScrollerTimer();<br /> });<br />
  28. 28. Most-used Events<br />.click()<br />sets up on hover and on leave in one go<br />guess what the above does?<br />jQuery(“a#changeMonth”).click(function () {<br />jQuery(monthFacadeText).text($(this).text());<br />jQuery("input[id$='hiddenTxtMonth']").val($(this).text());<br />jQuery (monthOptions).hide();<br />jQuery ("input[id$='btnChangeMonthYear']").trigger("click")<br />});<br />
  29. 29. Most-used Events<br />jQuery(“a#changeMonth”).click(function () {<br />jQuery(monthFacadeText).text($(this).text());<br />jQuery("input[id$='hiddenTxtMonth']").val($(this).text());<br />jQuery (monthOptions).hide();<br />jQuery ("input[id$='btnChangeMonthYear']").trigger("click")<br />});<br />When “custom dropdown” Change Month is clicked:<br />Set the month façade div to the selected month<br />Set ASP.NET viewstate variable to the selected month<br />Hide month scrollable div<br />Trigger ASP.NET postback button with ID btnChangeMonthYear<br />
  30. 30. animation<br />
  31. 31. How to Build a Carousel<br />.animate()<br />allows to animate an element style property (top, left, opacity, etc.)<br />
  32. 32. How to Build a Carousel (1)<br />Step 1: Output a series of <li> items to be carouseled:<br /><divid="ZSlideShow"><br /><divid="container"><br /><ulid="carousel"><br /><asp:RepeaterID="carouselRepeater"runat="server"><br /><ItemTemplate><br /><li><br /><divclass="item"><br /><a href='<%# Eval("ReadMoreLink") %>'><imgsrc='<%# Eval("ImageUrl") %>' alt='<%# Eval("Title") %>'/></a><br /> <a href='<%# Eval("ReadMoreLink") %>'><h3><%# Eval("Title") %></h3></a><br /> <div class="description"><br /> <%# Eval("Description")%><br /> </div><br /> <div class="readmore"><br /> <a href='<%# Eval("ReadMoreLink") %>' class=“xButton"><%= ResourceReader.GetGlobal(“XWebParts", “XWebPart_ReadMore_Text")%></a><br /></div><br /></li><br /></ItemTemplate><br /></asp:Repeater><br /></ul><br /></div><br /><divid="prevButton"><ahref="javascript:carousel_prev();"><imgsrc="/_layouts/Images/WebParts.Ets/left_arrow.png"alt="Prev"/></a></div><br /><divid="nextButton"><ahref="javascript:carousel_next();"><imgsrc="/_layouts/Images/WebParts.Ets/right_arrow.png"alt="Prev"/></a></div><br /><asp:HiddenFieldID="hiddenIntervalTimeInSeconds"runat="server"/></div><br />
  33. 33. How to Build a Carousel (2)<br />Step 2: Float items to the left & set viewport<br />#ZSlideShowul#carousel<br />{<br />margin: 0;<br />padding: 0;<br />height: 226px;<br />overflow: visible;<br />position: relative;<br />top: 0;<br />}<br />#ZSlideShowul#carouselli<br />{<br />list-style: noneoutsidenone;<br />float: left;<br />margin-right: 5px;<br />height: 226px;<br />width: 161px;<br />}<br />#ZSlideShow<br />{<br />width: 600px;<br />background-color: #e9e7db;<br />padding: 5px4px5px4px;<br />display: block;<br />overflow: hidden;<br />position: relative;<br />}<br />#ZSlideShow#container<br />{<br />height: 226px;<br />width: 600px;<br />position: relative;<br />overflow: hidden;<br />}<br />Viewport of 600px<br />
  34. 34. How to Build a Carousel (3)<br />Step 3: Set up helper CONSTANTS in .js<br />var ITEM_WIDTH = 166; // 161 div + 5px margin<br />var LEFT_START_OFFSET = -113;<br />var LEFT_OPACITY_ITEM_INDEX;<br />var RIGHT_OPACITY_ITEM_INDEX;<br />var BACK_TO_START_LEFT_POS;<br />var START_POS_AFTER_SLIDE;<br />varMINIMUM_ITEMS_SCROLLABLE = 4; // only scroll if >= this number<br />varoriginal_items;<br />varitem_revolution_counter; // if < -(original_items.length), back to start position<br />// if > (original_items.length), back to (start position + slide)<br />varautoscroller_timer;<br />
  35. 35. How to Build a Carousel (4)<br />Step 4: Set up Carouse on when DOM is ready<br />`<br />jQuery(document).ready(function() {<br />var items = jQuery("#carousel > li");<br />original_items = items; // save for appending to create circular effect<br />if (items.length >= MINIMUM_ITEMS_SCROLLABLE) {<br />appendOriginalsToFront();<br />appendOriginalsToBack();<br /> BACK_TO_START_LEFT_POS = -(original_items.length * ITEM_WIDTH) + LEFT_START_OFFSET;<br /> START_POS_AFTER_SLIDE = BACK_TO_START_LEFT_POS + ITEM_WIDTH;<br />jQuery("#carousel").css("left", START_POS_AFTER_SLIDE + "px");<br />item_revolution_counter = 0;<br /> LEFT_OPACITY_ITEM_INDEX = original_items.length - 1;<br /> RIGHT_OPACITY_ITEM_INDEX = LEFT_OPACITY_ITEM_INDEX + MINIMUM_ITEMS_SCROLLABLE;<br />makeEdgeItemsTransparent();<br /> }<br />// adjust the width according to no. of items<br />varcarouselWidth = jQuery("#carousel > li").length * ITEM_WIDTH;<br />jQuery("#carousel").css("width", carouselWidth + "px");<br />// setup hover for prev/next to show up, and pause auto-scrolling<br />jQuery("#ZSlideShow").hover(function () { toggleButtons(); clearInterval(autoscroller_timer); },<br /> function () { toggleButtons(); setupAutoScroller(); });<br />// setup auto-scroll<br />setupAutoScroller();<br />});<br />
  36. 36. How to Build a Carousel (5)<br />Step 5: Helper functions<br />`<br />functionsetupAutoScroller() {<br />varintervalInSeconds = parseInt(jQuery("#ZSlideShow input[id$='hiddenIntervalTimeInSeconds']").val());<br />autoscroller_timer = window.setInterval(function () { carousel_next(); } , intervalInSeconds * 1000);<br />}<br />functiontoggleButtons() {<br />jQuery("#prevButton").toggle(400);<br />jQuery("#nextButton").toggle(400);<br />}<br />functionmakeEdgeItemsOpaque() {<br />var items = jQuery("#carousel > li");<br />// prevent array-out-of-bounds<br />if (LEFT_OPACITY_ITEM_INDEX >= 0 && LEFT_OPACITY_ITEM_INDEX < items.length)<br />jQuery(items[LEFT_OPACITY_ITEM_INDEX]).css({ filter: "alpha(opacity=100)", opacity: "1.0" });<br />if (RIGHT_OPACITY_ITEM_INDEX >= 0 && RIGHT_OPACITY_ITEM_INDEX < items.length)<br />jQuery(items[RIGHT_OPACITY_ITEM_INDEX]).css({ filter: "alpha(opacity=100)", opacity: "1.0" });<br />}<br />functionmakeEdgeItemsTransparent() {<br />var items = jQuery("#carousel > li");<br />if (LEFT_OPACITY_ITEM_INDEX >= 0 && LEFT_OPACITY_ITEM_INDEX < items.length)<br />jQuery(items[LEFT_OPACITY_ITEM_INDEX]).css({ filter: "alpha(opacity=50)", opacity: "0.5" });<br />if (RIGHT_OPACITY_ITEM_INDEX >= 0 && RIGHT_OPACITY_ITEM_INDEX < items.length)<br />jQuery(items[RIGHT_OPACITY_ITEM_INDEX]).css({ filter: "alpha(opacity=50)", opacity: "0.5" });<br />}<br />
  37. 37. How to Build a Carousel<br />Visual logic: we are animating the Left property of the #carousel to slide left or right. The Viewport with overflow:hidden hides the out-of-view items<br />Viewport of 600px<br />We’re scrolling the Left property of #carousel<br />
  38. 38. How to Build a Carousel (6)<br />Step 6: Append items to front & back for smooth circular effect<br />functionappendOriginalsToFront() {<br />varfirstItem = jQuery("#carousel > li:first");<br />for (var i = 0; i < original_items.length; ++i) {<br />var cloned = jQuery(original_items[i]).clone();<br />styleEtsButton_restoreHoverEffects(cloned);<br />cloned.insertBefore(firstItem);<br /> }<br />}<br />functionappendOriginalsToBack() {<br />varlastItem = jQuery("#carousel > li:last");<br />for (var i = original_items.length - 1; i >= 0; --i) {<br />var cloned = jQuery(original_items[i]).clone();<br />styleEtsButton_restoreHoverEffects(cloned);<br />cloned.insertAfter(lastItem);<br /> }<br />}<br />
  39. 39. How to Build a Carousel (7)<br />Step 7: What happens when you click Next button<br />functioncarousel_next() {<br />var items = jQuery("#carousel > li");<br />if (items.length >= MINIMUM_ITEMS_SCROLLABLE) {<br /> ++item_revolution_counter;<br />if (item_revolution_counter > original_items.length) {<br />item_revolution_counter = 1;<br />// back to 1st item -- circular effect<br />jQuery("#carousel").css("left", START_POS_AFTER_SLIDE + "px");<br /> LEFT_OPACITY_ITEM_INDEX = original_items.length - 1;<br /> RIGHT_OPACITY_ITEM_INDEX = LEFT_OPACITY_ITEM_INDEX + MINIMUM_ITEMS_SCROLLABLE;<br /> }<br />makeEdgeItemsOpaque();<br /> ++LEFT_OPACITY_ITEM_INDEX;<br /> ++RIGHT_OPACITY_ITEM_INDEX;<br />makeEdgeItemsTransparent();<br />var carousel = jQuery("#carousel");<br />varnewLeft = carousel.position().left - ITEM_WIDTH;<br />jQuery("#carousel").animate({<br /> left: newLeft + "px"<br /> }, "slow");<br /> }<br />}<br />
  40. 40. How to Build a Carousel (8)<br />Step 8: What happens when you click Prev button<br />functioncarousel_prev() {<br />var items = jQuery("#carousel > li");<br />if (items.length >= MINIMUM_ITEMS_SCROLLABLE) {<br /> --item_revolution_counter;<br />if (item_revolution_counter <= -original_items.length) {<br />item_revolution_counter = 0;<br />// back to 1st item -- circular effect<br />jQuery("#carousel").css("left", BACK_TO_START_LEFT_POS + "px");<br /> LEFT_OPACITY_ITEM_INDEX = original_items.length;<br /> RIGHT_OPACITY_ITEM_INDEX = LEFT_OPACITY_ITEM_INDEX + MINIMUM_ITEMS_SCROLLABLE;<br /> }<br />makeEdgeItemsOpaque();<br /> --LEFT_OPACITY_ITEM_INDEX;<br /> --RIGHT_OPACITY_ITEM_INDEX;<br />makeEdgeItemsTransparent();<br />var carousel = jQuery("#carousel");<br />varnewLeft = carousel.position().left + ITEM_WIDTH;<br />jQuery("#carousel").animate({<br /> left: newLeft + "px"<br /> }, "slow");<br />
  41. 41. Thank youQ&A<br />
  1. A particular slide catching your eye?

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

×