Archive for jQuery

Avoid Overlapping Icons in jQuery Tablesorter Headers

Thanks to the CorasWorks Application Services (CAPS), it’s easy to create fast-loading, interactive displays – and one of my favorite UI plug-ins for improving a basic HTML table is the jQuery Tablesorter plug-in: http://tablesorter.com/docs/

With a snippet of JS, I can easily convert an HTML table (say one generated via XSLT 2.0 within CAPS) to a nicely styled, sortable table. However, I’ve noticed one little styling irk that can crop up sometimes; depending on the available horizontal space for your table’s column headers, the Tablsorter’s sort icons can bleed over the header text, like this example with the “ID” column:
OverlappingIcons

Fortunately, there’s a quick and simple way to avoid this. Within your markup (or XSLT), wrap the text that is your column headers in a span element and give that span a padding-right of at 15px, such as <span style=”padding-right:15px”>ID</span> and the above becomes this:
FixedIcons

That’s it – a little extra CSS and your über-fast, CAPS-based table is styled and ready for use!

jQuery Chosen right-sized, even if hidden or in a jQuery UI Dialog

The jQuery Chosen plugin (Demo here) is a great, extensible library for creating a filterable single- or multi-select dropdown. It provides a number of usability improvements by virtue of its styling, and performs well with even large lists of options, but there’s a few potential gotchas…

  1. If the dropdown is hidden at the time Chosen is initialized, it won’t work.
  2. If the dropdown is within a jQuery UI Dialog (which we often use as a modal container for a form), then it will create nested scrollbars between the jQ UI Dialog & the control itself.

You might say no problem: why would I need to hide my new, amped up dropdown, or use it inside a fancy modal? Well a common design approach if you’re loading the <select> options dynamically (say via AJAX or based on a user’s selection elsewhere on the page) is to hide the dropdown until all the options are added, then display it. And certainly modal forms are common place in web applications today – so these CSS tips might help you out.

This hidden issue was first reported on the GitHub Issue Tracker for the Chosen plug-in (original thread here). After testing a number of the suggested workarounds posted there, we’ve consistently had success with the following CSS:

.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

.chzn-container {

min-width:250px !important; /* Customize to meet your needs */

}

The behavior inside a jQuery UI Dialog – or any similar container – was also posted on their GitHub Issue Tracker (original thread here) with a number of varying suggestions, including modifying the container’s CSS instead of Chosen’s. In the end, we’ve consistently had success with this approach:

.chzn-container .chzn-results {max-height: 185px; /* Customize to meet your needs */

}

Hopefully these work equally well for you!

Windows 8 and websites that just don’t “click”

Picture this – your IT Department announces it’s time for a new round of machine refreshes and everyone is excited to get a new, shiny laptop. You get your new machine in hand and dive in to Windows 8; after all, a recent CNNMoney article noted “Microsoft claimed that its users would enjoy the experience of learning a new operating system” (full article here).

Everything is copasetic until you decide to install a second (or third) browser; sure IE10 is a great step forward, and my preferred browser for SP2013, though it can have some struggles in SP2010 (reference here). A large portion of the Windows user base though still prefers Firefox or Chrome.

And it’s there – at the convergence of those browsers, Windows 8′s penchant for encouraging touch-based interaction and website designers trying to optimize for touch – that an issue can arise. When using one of those “other” browsers, you find some of your favorite sites seem crippled; basic events, normally related to clicking on items or opening a menu just don’t happen. There’s no JS error in the browser, no indication as to what happened; the site just doesn’t seem to be registering your mouse clicks.

In our case, our new laptops do not have touch screens; but they do have one of the newer touchpads, the ones that support multi-touch & gestures. As I started digging – and getting frustrated that some of my most commonly used sites like my bank (USAA), Google Maps, the Amazon AWS console & others weren’t working – I was able to figure out that the problem was those sites were ignoring mouse-clicks in search of “touch” events on key elements within the site.

No worries though; once I had a diagnosis in hand, it was just a matter of finding & testing the appropriate fix. I knew I had to focus at the browser layer, because the issues were not seen when using IE10.

I started with Firefox – here are the steps I followed to get all those sites working again:

  1. Type “about:config” into the address bar
  2. Accept the warning (if you dare!)
  3. Search for “touch”
  4. If “dom.w3c_touch_events.expose” says ‘true’ under its value, double-click to change it to ‘false’
  5. If “dom.w3c_touch_events.enabled” says anything but ‘0’, double-click to pop an input box and set it to ‘0’
  6. Restart Firefox and enjoy you’re once-again functional sites

Then I went over to Chrome and applied a similar set of changes:

  1. Type “chrome://flags/” into the address bar
  2. Ctrl+F and search for “touch”
  3. Find “Enable touch events” and set it to ‘disabled’
  4. Find “Touch Optimized UI” and set it to ‘disabled’
  5. Restart Chrome and enjoy you’re once-again functional sites

That’s it! Sure, I’ve essentially disabled touch support in both browsers; but I don’t have a touch-screen anyway!? And that seemed to be the root of the issue; the browsers thought I did, by virtue of the super-fancy touchpad the laptop has. Not knowing whether the issue was Windows mis-reporting touch support (which, technically, I guess I do have but not in the way app developers would expect), the browsers mis-applying touch vs mouse events, or the web designers of the afflicted sites misusing touch handlers, I just wanted my sites to work again – and that did it.

 

jQuery UI Datepicker, SharePoint Style

 

Posted by Steve Evangelista, CorasWorks Professional Services Consultant

So you’ve made the decision to create a custom form, or maybe display, within SharePoint and want a nice-looking Datepicker to go with it. If you’ve done anything with jQuery you’ve likely heard of or used the jQuery UI widgets (Datepicker here) so you run over and grab a copy to use. You create your input, initialize the Datepicker widget, and boom! – you’re in business.

The only problem is your über-functional Datepicker doesn’t look much like the native SharePoint date picker your users know and (perhaps, but not likely) love. No worries though; just apply a few of the Datepicker widget’s options, add in some targeted CSS, and your Datepicker will have all the great features of the jQuery UI while integrating seamlessly into SharePoint’s design.

First, the Datepicker options you’ll want:

$(‘#YourDateInput’).datepicker({dateFormat:’yy-mm-dd’,showOn: “both”,buttonImage: “/_layouts/images/calendar.gif”,buttonImageOnly:true});
  • dateFormat – You’ll want to use this if your solution will write back the value in the Datepicker, as this is the format SharePoint will require when setting a Date value via web services, CSOM, etc.
  • showOn – This tells the Datepicker to pop the Calendar upon clicking inside the <input> (focus), clicking the icon (button) or both (both). I prefer the latter but for a true one-to-one experience like the native SharePoint date picker, you’ll want “button.”
  • buttonImage – The path to the image you want displayed as part of the Datepicker; this is the server-relative path to the same icon used by SharePoint’s native date pickers.
  • buttonImageOnly – By setting it to “true,” this ensures only the icon image is rendered, instead of it appearing inside a button element.

You’ve now got a Datepicker widget that is much closer in appearance to the native SharePoint date picker. Now let’s just apply some CSS to get the calendar icon spaced exactly right…

img.ui-datepicker-trigger {padding:0 0 5px 4px;vertical-align:middle;cursor:pointer}
  • The padding specified is 4px left and 5px from the bottom; this puts the calendar icon in the right spacing relative to the input box.
  • The vertical-align:middle, in combination with the padding, keeps the calendar in the ideal alignment.
  • The cursor:pointer ensures the user’s mouse takes on the “pointer” style when mousing over the calendar image.

Sometimes it’s the little things that make a solution feel “just right,” and having custom controls that seamlessly integrate into SharePoint’s UI are a great step in that direction.

 

App Design Tip… Custom Displays with jQuery Plug-ins

As a JavaScript framework, jQuery has undoubtedly become a big player amongst previously established frameworks like Prototype+script.aculo.us, MooTools, Dojo, etc. Especially as it relates to the SharePoint world, jQuery has caught on like a wildfire as designers and developers find whole new ways to improve the appearance and functionality of their solutions. Microsoft has thrown it’s weight behind jQuery, indicating it will be natively supported in Visual Studio going forward. Meanwhile, rumors abound of native or near-native (i.e. quick & easy to add) support for jQuery in SharePoint 2010. There’s even a “jQuery for SharePoint” project on CodePlex – appropriately named jPoint

Learning jQuery is actually remarkably easy, with it’s intuitive queries & functions, almost sentence-like syntax and a capability called chaining that allows for stringing together multiple queries. Best of all, much like the SharePoint community, jQuery has found a strong following of actively involved users who collaborate on ideas, share examples and generate plug-ins. It’s those plug-ins specifically that I would point CorasWorks users to explore closely.

Trust me, there’s no shortage of sites out there (including the official jQuery site itself) for finding great jQuery plug-ins. In the end, the custom display plug-ins we’re interested in all have one thing in common. They all are looking for some data to display; such as List- & Library-based (or external) data right there on your SharePoint sites. In addition to the official site, I’ve found some great plug-ins on sites like CSS-Tricks and others. Specifically, CSS-Tricks released one called the AnythingSlider which is a fantastic plug-in for displaying text and/or images in a slider: http://css-tricks.com/examples/AnythingSlider/

Dave Cavins (his blog), another fan of extending SharePoint with jQuery, then did a great write-up on using the AnythingSlider as a way of displaying Announcements from a SharePoint list: http://davecavins.com/2009/12/css-tricks-anythingslider-in-sharepoint/.

Not content to stop there though, I thought it would be much quicker & easier to wire up an AnythingSlider using a CorasWorks Toolset Provider. That way, your data could be coming from say an aggregate of Announcement lists across Departments, or any other data source you can connect to via Toolset. Give it a shot yourself: grab the necessary JS & CSS files from the CSS-Tricks link above and then apply the following XSLT (thanks again Dave!) via Custom Display Adapter to the output of a Toolset Provider and – voila! – you have an AnythingSlider.

NOTE: The XSLT references the location of the JS & CSS files via relative path (in bold); in this example, pointing to a folder/library called “Files” off the current path where the display is. Just make sure you update that path correctly, if need be. And, of course, make sure any XPATH statements (xsl:for-each, value-of, etc) match your Provider’s output. You can also grab a pre-configured SharePoint Data Provider and the below XSLT from our Forum post here.

<?xml version=”1.0″ encoding=”utf-8″ ?><xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”><xsl:output method=”html” indent=”no”/>

<xsl:template match=”/” >

<link rel=”stylesheet” href=”Files/page.css” type=”text/css” media=”screen” />

<link rel=”stylesheet” href=”Files/slider.css” type=”text/css” media=”screen” />

<script type=”text/javascript” src=”Files/jquery-1.3.2.min.js”>

</script>

<script type=”text/javascript” src=”Files/jquery.easing.1.2.js”>

</script>

<script type=”text/javascript” src=”Files/jquery.anythingslider.js” >

</script>

<script type=”text/javascript”>

function formatText(index, panel) {

return index + “”;

}

$(function () {

$(‘.anythingSlider’).anythingSlider({

easing: ‘easeInOutExpo’,

autoPlay: true,

delay: 3000,

startStopped: false,

animationTime: 600,

hashTags: true,

buildNavigation: true,

pauseOnHover: true,

startText: ‘Go’,

stopText: ‘Stop’,

navigationFormatter: formatText

});

$(“#slide-jump”).click(function(){

$(“.anythingSlider”).anythingSlider(6);

});

});

</script>

<div>

<div>

<ul>

<xsl:for-each select=”NewDataSet/Announcement”>

<li>

<div>

<!– display the item title and a link to the item –>

<h3>

<a target=”_blank”>

<xsl:attribute name=”href”>

<xsl:value-of select=”ObjSiteURL” />

<xsl:text>/</xsl:text>

<xsl:value-of select=”DisplayPageURL” />

<xsl:text>?ID=</xsl:text>

<xsl:value-of select=”ListID” />

</xsl:attribute>

<xsl:attribute name=”title”>

<xsl:value-of select=”Title” />

</xsl:attribute>

<xsl:value-of select=”Title” />

</a>

</h3>

<!– display the body of the item  –>

<xsl:if test=”Image != ””>

<img alt=”Announcement Image”>

<xsl:attribute name=”src”>

<xsl:value-of select=”substring-before(substring-after(Image,’&gt;’),’&lt;’)” />

</xsl:attribute>

</img>

</xsl:if>

<xsl:value-of select=”Body” disable-output-escaping=”yes” />

</div>

</li>

</xsl:for-each>

</ul>

</div>

</div>

</xsl:template>

</xsl:stylesheet> 

For more reading, Vedant Kulshreshtha has a complete Blog post of links and references on jQuery and, specifically, using it within SharePoint 2007: http://blogs.technet.com/vedant/archive/2009/02/08/jquery-and-sharepoint-2007.aspx