Brain Lava http://brainlava.com Thoughts on WordPress & SharePoint Branding Mon, 06 Feb 2012 13:57:04 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Fix for SharePoint 2010 scrolling problems for Chrome, iOS4 & Android http://feedproxy.google.com/~r/BrainLava/~3/mrtxRkCiUAs/ http://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/#comments Mon, 06 Feb 2012 00:37:52 +0000 nicole http://brainlava.com/?p=97 The other day a public facing website that had been built upon the SharePoint 2010 platform was experiencing some scrolling issues. After a date with Google and a few furrowed brows, I crafted a hybrid solution of my own that worked best for my particular scenario.

The Problem

Scrolling did not work when visiting the site using:

  • Google Chrome
  • An iPad or iPhone that was running iOS4
  • Google Android phones

The Solution

I was able to identify that the source of these scrolling issues was due to the manner in which the static placement of the SharePoint 2010 “Ribbon” was implemented. Essentially the default browser scrolling behaviour has been overridden and replaced with a JavaScript solution that has a few problems. While I appreciate the improved authoring experience that the static ribbon provides for content authors, it serves no purpose for anonymous visitors to the site.

Below is what I did to hide the ribbon control, and override the JavaScript scroll bar if you are an anonymous visitor.

Let’s just jump right in, shall we?

Psst…If you don’t care about the “why?” and just want the final solution go ahead and download my updated v4.master.

Step 1: Right above the closing head tag you want to place the following LoginView snippet.

Why? Because we want to override the body.v4master { overflow: hidden; } default SharePoint declaration but only for anonymous users.

     <asp:LoginView id="LoginView" runat="server">
          <AnonymousTemplate>
               <style type="text/css">
                    body.v4master { overflow:auto; }
               </style>
          </AnonymousTemplate>
     </asp:LoginView>

Step 2: Remove that pesky scroll=”no” on the body tag.

Why? Because if we don’t then we will not be able to scroll on IE7.

Look for this:

<body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">

And replace with this:

<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">

Step 3: Hide the Ribbon Control so it only appear when the user has the ability to add or remove personal Web Parts on a Web Part Page.

Why? I do not want the ribbon control to load unless the user is logged in. I tried using the AnonymousTemplate logic above but it created some other issues which will be a follow up post.

Security Trimmed Control, Permissions … What? Yeah I thought the same thing the first time I discovered this control. You can read more about the different built-in permissions available in SharePoint Foundation over here: SPBasePermissions Enumeration. It’s worth your time to take a look.

Look for the id=”s4-ribbonrow” and include the SharePoint:SPSecurityTrimmedControl above it: 

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="AddDelPrivateWebParts">
     <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
          <div id="s4-ribboncont">

Now to close the tag look for the closing #s4-ribbonrow div tag, and add the closing SharePoint:SPSecurityTrimmedControl tag.

                    <Triggers>
                         <asp:PostBackTrigger ControlID="WebPartAdder" />
                    </Triggers>
               </asp:UpdatePanel>
          </div>
     </div>
</SharePoint:SPSecurityTrimmedControl>

Step 4: Only display the the #s4-workspace div if the user is logged in.

Why? Because through JavaScript SharePoint adds an inline height and width to this div that is then referenced in their scrollbar JavaScript code. In my solution I did not need, or want it, for Anonymous visitors.

NOTE: The opening and close #s4-workspace divs will now appear yellow because the MasterPage will not be able to see that they are in fact matching tags. Do not worry though because once the page renders for the visitor, everything will work just fine.

Search for div that has id=”s4-workspace” and replace it with the code below.

<asp:LoginView runat="server">
     <LoggedInTemplate>
          <div id="s4-workspace">
     </LoggedInTemplate>
</asp:LoginView>

Search for the closing #s4-workspace div and replace it with the code below.

<asp:LoginView runat="server">
     <LoggedInTemplate>
          </div>
     </LoggedInTemplate>
</asp:LoginView>

Step 5: Download my updated v4.master with all the changes described above.

Caveats

While this solution worked for my scenario, I obviously can not promise it will work for you. I did notice one issue of a double scroll bar if a content author accessed the the site using IE7. This particular authoring scenario was not a requirement and the client agreed it was an acceptable trade off.

I also wanted to thank the people that took the time to create their own tutorials that helped me with my own solution.

Cheers!

]]> http://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/feed/ 0 http://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/ Summary Link Web Part: Is it worth the code bloat? http://feedproxy.google.com/~r/BrainLava/~3/zGs_D_BrQPA/ http://brainlava.com/summary-link-web-part-is-it-worth-the-code-bloat/#comments Mon, 02 Jan 2012 19:45:06 +0000 nicole http://brainlava.com/?p=55 Sometimes as a SharePoint front-end developer you have to sacrifice the desire for the leanest code possible in order to create a better authoring experience. Take for example the common requirement for authors to add Quick Links to a page. The Summary Link Web Part is perfect for this task but I would often overlook it because it generates unnecessary HTML. Instead, if a stylized list was required, I would create a Reusable Content snippet or a custom style that would appear in the Styles drop down. It kept my code nice and clean and I thought both options were relatively easy to use.

Well, I was not entirely correct on that last assumption. Sure they might be easy if the author has a basic understanding of HTML, but without that knowledge these methods can become frustrating. At some point the author will perform an unexpected keystroke in the rich text editor, causing something to go awry. Maybe it’s an odd line break or a tag that will not seem to close. At that point they can delete what they have done and start again, or look at the HTML and see if they can track down the issue. For an author that only wants to have the page published as soon as possible, both options could be time consuming and less than desirable.

This is where the Summary Link Web Part comes into play. I find myself leveraging this particular web part much more often, spending the time to ensure that all the built in styles work with the overall design of the site.  This gives the author many more options to add stylized links to the page without having to fiddle with any code. They simply fill out the fields in the add new link dialog and click OK. They can also easily group and reorder links without having to deal with the mess that can happen when you copy and paste in a rich text editor.

Does the bloated mark-up still bother me? Sure it does, but when I train authors and see how much easier it is for them to use this web part compared to watching them struggle with code snippets, I feel the trade off is acceptable.

Interested in seeing what the Summary Link Web Part can do? Check out Microsoft’s “Use and configure a Summary Link Web Part or a Summary Link field control” article for a step by step explanation on how to use its functions.

]]> http://brainlava.com/summary-link-web-part-is-it-worth-the-code-bloat/feed/ 0 http://brainlava.com/summary-link-web-part-is-it-worth-the-code-bloat/ Google Analytics: Mobile Screen Resolutions http://feedproxy.google.com/~r/BrainLava/~3/30wxGVrBRLc/ http://brainlava.com/google-analytics-mobile-screen-resolutions/#comments Thu, 29 Dec 2011 06:58:59 +0000 nicole http://brainlava.com/?p=41 I mentioned in my previous post that I had a plan to work on a mobile site for Brain Lava. Well, the next day I created some alternate CSS using the CSS3 media queries. It was working fine both in portrait and landscape mode for my iPhone but when I tested it against a friend’s Android I was surprised that it was not picking up the mobile view of the site when in landscape mode. To troubleshoot the issue, and potentially avoid the same issue with other devices, I wanted to know the screen resolutions for the mobile devices that were visiting my site so I headed over to Google Analytics.

After a bit of time wading through the Google Analytics interface, I was abashed to admit that I could not find the stats for screen resolutions anywhere. So, the next day I asked my workmates for some help and after a bit of time clicking around Pete was able to help me track down how to display the screen resolutions for mobile. I thought I would share it in case someone else found locating this information a bit frustrating.

Step 1

In the left hand panel of the Google Analytics Dashboard select the “Devices” section located under “AUDIENCE > Mobile”

 

Step 2

Click on the “Select” drop down beside the Secondary dimension label. Expand the “Technology” heading and select “Screen Resolution”


Step 3

Well there is no Step 3 to be honest except to maybe go and treat yourself to something nice for working so hard.

]]> http://brainlava.com/google-analytics-mobile-screen-resolutions/feed/ 0 http://brainlava.com/google-analytics-mobile-screen-resolutions/ Welcome to Brain Lava! http://feedproxy.google.com/~r/BrainLava/~3/wxCU9k-peeo/ http://brainlava.com/welcome-to-brain-lava/#comments Tue, 13 Dec 2011 04:45:56 +0000 nicole http://brainlava.com/admin/?p=1 I will admit it, this site has been a very long time coming. Brain Lava is a domain that I registered many moons ago with the idea that I wanted it to be a place where I could share my technical thoughts. Over the years, however, I never seemed to find the time to create a design for the site and, so it sat, collecting virtual dust with an incredibly lame “Coming Soon” page. I did have a great logo though, created by my talented husband, and artist, Gary Pullin.

Well last weekend I decided to do something about it. I gave myself a deadline last Saturday to design and implement a site by this Sunday. Well it’s Sunday night and I am pretty excited to say that I met my goal! Despite the holiday parties, decorating the apartment, christmas shopping and several get together’s with friends, I was able to carve out enough time to complete the mini project.

I have a few things that I am still hoping to iron out, images I want to combine, and a mobile site to create. Overall though I am happy to finally have Brain Lava up and running. A friend once said it’s OK if the beginning is not perfect…at least it is a beginning.

]]> http://brainlava.com/welcome-to-brain-lava/feed/ 0 http://brainlava.com/welcome-to-brain-lava/