Friday, August 29, 2014

IE8 and RGBa background colors

Simply put RGBa colors in CSS allow a background color with alpha transparency. As an example the following CSS would produce a somewhat transparent red background:
background: rgba(255, 0, 0, 0.8);
In older browsers such as Internet Explorer 8 and below, the rgba background is not supported and it's presence may cause the element not to appear at all. The solution to this problem is to have a "fallback color" which will display in browsers that do not support RGBa, it browsers that do, the fallback color will be ignored. The following example has a fallback color of red:
background: rgba(255, 0, 0, 0.8);

Monday, August 18, 2014

How to add a custom web part property to SharePoint

In the case where you need a web part to behave differently based on a variable set at the page level, the use of a custom web part property can come in handy. It allows you to change a custom setting at the web part level, which can then be used in the code to control the web part's behavior.

The following data types can be used as web part properties: string, bool, int, float, enum, System.DateTime, and System.Drawing.KnownColor and SharePoint will display the selection on the form in a relevant way (drop down box used for enum, etc.).

The folloiwng code example, should be added into the web part class (of type Microsoft.SharePoint.WebPartPages.WebPart). It creates a custom property called display, which is of type enum (custom enum called DisplayEnum). It has a default value, and can be accessed in the code via the "_display" variable.

The property then appears under "miscellaneous" on the web part properties pop-up.

Thursday, August 14, 2014

jQuery/JavaScript detect if browser is mobile (uses touch)

The following jQuery code allows you to detect if the browser is running on a touch device (for Apple iOS, Android, and even Windows phones/tablets). Other solutions I have seen often forget to take into account Windows devices, which while uncommon, it is important to not leave them with a bad user experience.
var TouchDevice = ('ontouchstart' in window) || (window.DocumentTouch) || navigator.userAgent.match(/Touch/i) == "Touch";
Once you detect if they use a touch device, you can then run your code based on that. One example is to assign a special CSS class for touch device which can be used to handle hovers differently (ie do something else instead of hover) on touch devices.

jQuery only run selected code on a given browser width

Sometime you have jQuery code which only needs to be run when the user's browser is a given width (or perhaps in a width range). In the example below I only want the code to run where the browser width is equal to or below 768 pixels.
if ($(window).width() <= 768) {
       // Code Here
I have tested this to work on desktop and mobile browsers.

JavaScript redirection examples

There are two common methods for redirecting users in JavaScript (in the current window).

The first method will not affect the browser history (the back button will not take them back to the page you redirect from). This is good for the login page, where you don't want them going back to the login form.
The second method will redirect the current window and will leave the page you are redirecting from in the browser history (the back button will work).
window.location = url;

Tuesday, August 12, 2014

SharePoint 2013 enable blob cache for Image Renditions

On SharePoint 2013 you may encounter the following error message: "The blob cache is not enabled in this web application. Image renditions will not be generated until the blob cache is enabled. For information on turning on the blob cache, please review the product documentation." when viewing the available image rendition sizes.

The blob cache is simply a disk based caching method which may be utilised on images, videos and other files.

To enable the blob cache on your SharePoint server simply open the web.config file, locate the BlobCache tag (using the find dialog) and change the "enabled" attribute from "false" to "true". You may then need to perform an iisreset for the changes to take affect.

Thursday, August 7, 2014

jQuery detect hover on an element

A navigation menu which expands when the user hovers over it, needs to detect when the user has stopped hovering in order to close the expansion. I came across a simple fix using angularJs which is able to detect the mouse hovering (coming and going) and display the menu accordingly.

The above code uses the angualrJs mouse over (ng-mouseover) and mouse leave (ng-mouseleave) directives to call functions which open and close the expanded menu. The mouse leave function checks if the user is still hovered over a given element and will close the expanded menu if appropriate.