See SharePoint through eyes of mobile device from desktop
When doing a mobile solution for SharePoint it helps to be able to get a quick view at what its going to look like without having to get that emulator working or uploading it to the cloud so then you can test it from your iPhone's internet.
SharePoint 2010 reads the User Agent being sent from the browser to determine whether it is a mobile device or not, all you need to do is adjust the User Agent being sent to mimic a mobile device.
There are two methods that I have found work;
Safari Developer Tools
- Get Safari if you don't already have it
- Go to the Advanced tab in Preferences/Options and check the Show Develop menu in menu bar check box
- Select Develop > User Agent from the menu and select iPhone or iPod Touch
- Alternatively you can enter an alternate User Agent String by selecting Other... and entering string
User Agent Switcher - FireFox Extension
- Get and install User Agent Switcher add-on for FireFox by Chris Pederick
- A set of User Agents already come with extension, you can also add additional User Agents
I personally recommend the User Agent Switcher extension for FireFox.
User Agent Strings
Here are some popular User Agent Strings that I have found and seem to work ok, let me know if they work for you ok. Also be interested to find out any more that you use! More can be found at Zytrax.com and WURFL.
iPhone 4.1
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
iPhone 4.3
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5
Windows 7
Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0)
SharePoint left nav fix to style selected link ancestors using JQuery
I came across this problem when trying to style left navigation on a Page Layout I had for the sub page on an Intranet.
The Problem
The problem was that with a multi-leveled left navigation; when I click on a second or third level link, SharePoint would kindly add the class 'selected' to the link I have click so I could use CSS to style BUT did not do it for any of the parent/ancestor links. With no 'selected' class on the ancestor links there is no way of styling them, this is a problem when trying to show the user a visual representation of where they are/come from in the left nav hierarchy.
The Fix (JQuery)
1 2 | // Left navigation fix to add class to selected li ancestors $("#LeftNav li.selected").parents("li").addClass("selected"); |
All need is this one line of JQuery; what it does is, finds all of the links (li) that have 'selected' class, and then adds the same class to only it's parent links (li) and there we have it! I now have 'selected' class on all parents of currently selected link for styling.
Categories
Archives
Blogroll
About
Luke Evans is a Designer specialising in UX Design, UI Design, Usability, Graphic / Web Design, Custom SharePoint 2010 Design & Branding, Web 2.0 & Social Media / Innovation. He currently resides at a custom software development company as their Senior SharePoint Designer working with various tier one companies.
