CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: css

Improving the web performance of an intranet

overloaded-sharepoint-in-browser

All the “small” app parts, web parts, delegate controls, user controls, and other “packages” that “must” be delivered to the users on every page load of the Start Page of your Intranet.

Recently we made an investment to improve the performance of our intranet. We made many changes in different layers: SQL, Network, Browser upgrade and code. Here I want to tell about what code changes we did to improve the web browser performance. Please leave feedback if you find it useful. You can also share your suggestions. We measured the performance before our code changes and after them. We had amazing results. Unfortunately I can not share any numbers, but we improved the Time to First Byte, time to load event firing in the browser, memory consumption in the clients and, perhaps, the most important, we improved the perceived performance of the Intranet, the way how users experience the speed and UI responsiveness. To do this I got many ideas of my project colleagues and branch colleagues. Here is the list of changes we’ve implemented:

– Execute code on demand

Consider this scenario: on a page users can click on a button to download a vcard. Aggregating user information is a costly operation that requires getting data from the User Profile Service, getting the profile image from SharePoint. Don’t ever do this operation on page load. Move the code to the “onclick” action. In other words, work when it is needed. It is like cooking a lot of food, when you are not hungry. It is nothing new, unfortunately there were a couple of the “eager code” places.

– Cache results, investigate what parts can be cached and how fresh data needs to be

All data on your page doesn’t need to be fetched on every page load. In our project We listed all the “parts” of the start page and other often visited pages and went to the business and asked them to evaluate how fresh data should be. Some parts should be as fresh as possible (no cache), whereas it would be tolerated that the information could be dirty (cache up to one week or more).

– Reference javascript and css files from one location

Do you have jQuery in your SharePoint Intranet. How many copies do you have? What we did in our Intranet was that we partially implemented the CDN concept. Even though we don’t distribute our resource files geographically, we have 1-to-1 relation between a file and its absolute URL. In the whole intranet, we have only one jQuery url and only one our intranet.core.js url. We did by creating a dedicated CDN site collection. This alone makes a big difference. To evolve the idea we could provision resources outside SharePoint to remove the authorization overhead. We could also distribute it geographically by having files closer to the end users.

– Unify your framework and your dependencies

In our projects we had a couple of SharePoint-hosted apps developed by different teams. We had different approaches and different framework that solved almost the same problem: AngularJS and KnockoutJS. Eventhough apps are independent pieces of software, they were used within the same page (as app parts). It was too much http traffic. We agreed on Developer Guidelines and chose one framework.

– Do not hide controls on the page with CSS, remove them

On the start page in our intranet we didn’t show the left navigation, but it was still rendered in code behind. Instead hiding it with CSS, we just removed it by an empty ContenPlaceHolder in our Start Page Layout:


<asp:Content ContentPlaceholderId="PlaceHolderLeftNavBar" runat="server"/>

– Optimize jQuery Selectors

We reviewed all the jQuery code and improved the selectors. Optimizing the selectors will improve the overall performance in the browser, especially in older browsers. The worst example is using text selectors, like this one:

jQuery('#NoteBoardContainer*:contains("There are no notes posted yet. You can use notes to comment on a page"):last');

It will sink your IE8 browser.

– Minify javascript and CSS files

Minifying resource files like javascript and css is not hard. My recommendation is to use Web Essentials plugin in Visual Studio. Alternatively you can use the SharePoint Assets Minifier.

– Use the weakest selectors in CSS and in LESS

In our project we are using LESS. With LESS it is easier to write  readable CSS code. But be aware of the output. Do not make the selectors too strong: Use the weakest CSS Selectors. The weakest selectors will make it easier to maintain the CSS and it will minimize the amount of KB the server needs to send to your users’ browsers.

– Ensure javascript and CSS files are cached

JavaScript and CSS files should be cached. You should also avoid 304 responses where the Server answers “Not Modified”, because this has an impact on the performance. Configure the Blob Cache and put your resources into the Style Library.

– Remove all app parts from SharePoint-hosted Apps from the start page

There can be exceptions, but we encountered that client web parts (app parts) from SharePoint-hosted apps had a huge impact on the performance. The combination of a couple of app parts on often visited pages (like the start page on the intranet) led to long page load times. These are the reasons why you should not have SharePoint Hosted App Parts on your start page:

  1. App Parts are iframes. They are loaded simultaneously if you add client web parts (app parts) in a usual way. They hold up the whole page. Users cannot interact with the intranet page until all the content in all app parts has been loaded. This can be partially improved if you introduce a delay in the app part loading, by developing an own engine. See my blog post where I mention such a concept: AppLoader Concept for SharePoint apps.
  2. The content from a SharePoint AppWeb is not fully cached. If you examine the http traffic from the apps you’ll see a lot of 304 responses, meaning the browser requests when the server answers that there is no newer version. This has an impact on the performance. See more in Alik Levin’s blog: ASP.NET Performance: Get Rid of HTTP 401 and HTTP 304. In a SharePoint-hosted app you don’t have any control what so ever to adjust the the cache settings. This is not the case in the Provider-hosted apps.
  3. SharePoint-hosted apps can only use javascript. The code is executed on the client. Older browsers like IE9 or IE8 render the pages slower. The Start Page that is slower than the rest of the Intranet is not something that will engage your users.
  4. App Parts are iframes that do not know about their dimensions. App parts often need to update the height and the width  of the parent iframe. This causes irritating flickering. Perhaps OK on some pages, but I’d say totally unacceptable on the start page of your brand new intranet..

What did we do instead of App Parts on the Start Page? We converted them into Script Editor Web Parts, the app parts were only one-time parts, they only were used on the start page.

Do not get me wrong. What we did was not abandoning apps as a model, we just removed wrong apps, apps that cannot be reused, the SharePoint-hosted apps that had big performance issues. I am looking forward creating right apps, that are written with performance, reusability, scalability and good design in mind.

 

Updating hover style in IE8 Developer Tools

In our project we still have to support Internet Explorer 8. The CSS issues in IE8 are most difficult to debug and solve. You can not add a new rule in Developer Tools or toggle the state of an element to hover as in moder web browser dev tools.

One solution that I’ve come up to today, is to add a style with javascript or jQuery, open the script pane in IE8 Dev Tools and add this line:

$('<style>.ms-srch-item:hover {filter:none !important;}</style>')
   .appendTo($('body'))

This will fill update the hover effect of the .ms-srch-item directly.

ie8-devtools-001

 

That’s it, just a little tip.

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

.warning {
  background-color: red;
}

It is often enough, you don’t need those:

html .warning
div .warning
div.warning, div &gt; .warning
body p#myP.blue strong.warning

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

.contoso-html #s4-workspace { }

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

<link rel="stylesheet" href="./responsive.css" type="text/css">

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

@media all and (max-width: 1016px) {
    .art-sheet {
        width: 100%;
    }
    div.art-header {
        width: 100%;
    }
}

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

@media all and (max-width: 675px) {
  div.art-content-layout-row {
      display: block;
  }
  div.art-content-layout div.art-layout-cell {
      display: block;
  }
  div.art-content-layout-row {
      display: block;
  }
}

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

<div id="responsive-menu" onclick="toggleMenu()">☰</div>

I also added this css style and hid this div for bigger resolutions:

#responsive-menu {
  position: absolute;
  right: 5px;
  top: 15px;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
@media all and (max-width: 399px) {
  #responsive-menu {
    display: block;
  }
}

Here is the tiny javascript click event listener:

(function() {
  var menuOpen = false
      , menu
      , langSwitcher;

  window.toggleMenu = function() {
    menu = menu || document.getElementsByTagName("center")[0];
    menu.style.display = menuOpen ? "none" : "block";
    menuOpen = !menuOpen;
  }
})();

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
  2. In the page markup I added this line inside the head element:
<link rel="apple-touch-icon" href="apple-touch-icon.png">

That’s it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.

<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Prevent text size adjustment on orientation change. -->
<style>html { -webkit-text-size-adjust: 100%; }</style>

Styling suiteBar and IE8

suitebar-001

Today I want to share little css tip for styling the suiteBar in SharePoint 2013 and making it work even in IE8. I needed to apply a green color to the suiteBar (#005128). It worked in all browsers except IE8:

suitebar-002

The reason why is a special css rule (in corev15.css) that only IE8 understands:

.ms-core-needIEFilter #suiteBarLeft {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0072c6,endColorstr=#ff0072c6);
}

I found this answer in an blog post written by Trace Armstrong: SharePoint 2013 – Branding the Top Bar and the Importance of Browser Testing. You could override this css rule with your colors, just dig into the msdn documentation.

What I needed though, was just a plain color, so I didn’t want to dig into that old progid-definitions. There is actually a simpler solution on social.msdn.microsoft.com. A guy called avshinnikov just overrides the “filter” rule by setting it to none. If you apply it only with id selector (#suiteBarLeft) then you have to put “!important” after that.

Fortunately I allready had my own css class on html tag which is a sort of a “namespace” for my selectors:

.takana-html #suiteBarLeft {
   background-color: #005128;
   filter: none;
}

The class .takana-html can have any name, of course, and it can be a class on a closer parent element to the suiteBar. The only goal for that is to make your css rules more important in your design in a natural way (and avoiding the “!important”). Eventhough many people use this principle without thinking about it, I’ve not found any info regarding this principle. I only heard Jeremy Foster and Michael Palermo talking about it and referring to it as “css namespaces” in a video course: Developing in HTML5 with JavaScript and CSS3 Jump Start. Of course, the name isn’t unique, there is another thing called css namespaces. But the concept is really good.

Cool presentation about web performance optimization

Simplify js and css development with Web Essentials (Visual Studio Extension)

If you develop much javascript and css, this is the exension to Visual Studio you just can’t live without: Web Essentials (It is even released for VS2012).

You can do many things with it. Here are two examples for simple but very useful functions:

1. Show which browsers support a css attribute:

2. Collapse javascript functions and create #region areas like in C# code:

There is much more, like less and coffeescript parsing. Just check the documentation. And it is fully appliable in SharePoint development.

Less and Coffeescript

Now using less and coffeescript (update: and typescript) can be really easy even in SharePoint. Whenever you save a .less file or .coffeescript, it will create a corresponding file with .css or .js file extensions in the same folder. So you can write your styles in less and scripts in coffeescript and reference the auto-generated css and js files.

UPDATE: For some reason the css is not generated when I run Visual Studio 2012 on Server 2008 with Web Essentials, but it works fine on my Windows 8 machine. To play around with less, you can use this demo site (creds to @irishbuzz on so).

 

Next: Typescript and SharePoint

Enable Save in IE9 mode

Wouldn’t it be nice to use html5 and css3 in SharePoint? No problems, there is actually v5 master out there, created by Kyle Schaefer. Or just use h5ml5 and css3 right away in your webparts and pages. But there is a big problem. It doesn’t work in IE9–. One of the issues (even listed by Kyle) is that “save” doesn’t work in modal dialogs where Rich Text Editor is used. Especialy it is for modal dialogs.

The problem is not IE9, neither html5 and css3. After some digging in javascript code which is shipped with SharePoint I found out that the problem is some legacy javascript code which is not supported by IE9 but in IE8– (and compatibility mode).

When we set IE9 mode in IE9 Dev Tools (F12) and go to Tasks list and try to create a task, we’ll get an error:

It is RTE_GetEditorIFrame from init.js:

function RTE_GetEditorIFrame(strBaseElementID)
{ULSopi:;
	var ifmEditor=null;
	var doc=document;
	if ((null !=doc.frames) && (doc.frames.length==0) && (doc.parentWindow.parent !=null))
	{
		doc=doc.parentWindow.parent.document;
	}
	if ((null !=doc.frames) && (doc.frames.length > 0))
	{
		var ifmContainer=doc.getElementById(RTE_GetEditorIFrameID(strBaseElementID));
		if (ifmContainer !=null)
		{
			ifmEditor=doc.frames(RTE_GetEditorIFrameID(strBaseElementID));
		}
	}
	return ifmEditor;
}

So it is document.frames(“…”), not the usual document.frames[“…”]. What is that VB-style about?

Okay, the reason why this error isn’t raised in other browsers is just because this weird code isn’t run (Try to set break point there in Chrome or Firefox). And that’s why you never see Rich Text Editor toolbar in EditForm.aspx in Chrome and Firefox. To prove this, try to remove the Rich Text Column in your list. Then you can use “Save” button again, with IE9 mode!

Now we know the reason. How can we solve it. To do so we must find out where javascript defines whether to run or not Rich Text Editor toolbar.

First RTE_GetEditorIframe is invoked by RTE_ConvertTextAreaToRichEdit which is invoked by an inline script directly from NewForm.aspx:

if (browseris.ie5up 
  && (browseris.win32 || browseris.win64bit) 
    && !IsAccessibilityFeatureEnabled()){
    RTE_ConvertTextAreaToRichEdit("ctl00_m_g_0a9abd43_19a2_461e_b46f_6a1ae22a7ff1_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_TextField"
      , true, false, "", "1044", null, true, null, null, null
        ,"Compatible", "\u002ft001",null,null,null,null);
    }
else{
  document.write(" <br /><span class=\"ms-formdescription\"><a href='javascript:HelpWindowKey(\"nsrichtext\")'>Klikk her for hjelp med å legge til grunnleggende HTML-formatering.</a></span> <br />");
};

So there it is where the fishy code is invoked. Okay how can we intervene here to enable Save button? All solutions are based on disabling the bad code which is used to “convert” textarea to RichEdit.

1. Solution number one override RTE_ConvertTextAreaToRichEdit, just in style:

function RTE_ConvertTextAreaToRichEdit() {};

2. Solution number two: override IsAccessibilityFeatureEnabled, or this one:

function SetIsAccessibilityFeatureEnabled(f)
{ULSA13:;
	if (f)
		document.cookie="WSS_AccessibilityFeature=true;path=/;";
	else
		document.cookie="WSS_AccessibilityFeature=false;path=/;";
	var hiddenAnchor=document.getElementById("HiddenAnchor");
	var event;
	if (browseris.ie)
		event={ "srcElement" : hiddenAnchor , "fakeEvent" : 1, "enableStatus" : f};
	else
		event={ "target" : hiddenAnchor , "fakeEvent" : 1, "enableStatus" : f};
	if (hiddenAnchor==null || hiddenAnchor.onclick==null)
		return;
	hiddenAnchor.onclick(event);	
}

So to fool Accessibility, just set your own cookie: document.cookie=”WSS_AccessibilityFeature=true;path=/;”. But: don’t do that. It is really bad idea. Many features will stop working.

3. Solution number three is to override browseris. browseris is a browser which holds the information about the browser, simple. Here is how it is defined in init.js:

function Browseris () {ULSA13:;
	var agt=navigator.userAgent.toLowerCase();
	this.osver=1.0;
	if (agt)
	{
		var stOSVer=agt.substring(agt.indexOf("windows ")+11);
		this.osver=parseFloat(stOSVer);
	}
	this.major=parseInt(navigator.appVersion);
	this.nav=((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
	this.nav6=this.nav && (this.major==5);
	this.nav6up=this.nav && (this.major >=5);
	this.nav7up=false;
	if (this.nav6up)
	{
		var navIdx=agt.indexOf("netscape/");
		if (navIdx >=0 )
			this.nav7up=parseInt(agt.substring(navIdx+9)) >=7;
	}
	this.ie=(agt.indexOf("msie")!=-1);
	this.aol=this.ie && agt.indexOf(" aol ")!=-1;
	if (this.ie)
		{
		var stIEVer=agt.substring(agt.indexOf("msie ")+5);
		this.iever=parseInt(stIEVer);
		this.verIEFull=parseFloat(stIEVer);
		}
	else
		this.iever=0;
	this.ie4up=this.ie && (this.major >=4);
	this.ie5up=this.ie && (this.iever >=5);
	this.ie55up=this.ie && (this.verIEFull >=5.5);
	this.ie6up=this.ie && (this.iever >=6);
	this.ie7down=this.ie && (this.iever =7);
	this.ie8standard=this.ie && document.documentMode && (document.documentMode==8);
	this.winnt=((agt.indexOf("winnt")!=-1)||(agt.indexOf("windows nt")!=-1));
	this.win32=((this.major >=4) && (navigator.platform=="Win32")) ||
		(agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1);
	this.win64bit=(agt.indexOf("win64")!=-1);
		this.win=this.winnt || this.win32 || this.win64bit;
	this.mac=(agt.indexOf("mac")!=-1);
	this.w3c=this.nav6up;
	this.safari=(agt.indexOf("webkit")!=-1);
	this.safari125up=false;
	this.safari3up=false;
	if (this.safari && this.major >=5)
	{
		var navIdx=agt.indexOf("webkit/");
		if (navIdx >=0)
			this.safari125up=parseInt(agt.substring(navIdx+7)) >=125;
		var verIdx=agt.indexOf("version/");
		if (verIdx >=0)
	            this.safari3up=parseInt(agt.substring(verIdx+8)) >=3;
	}
	this.firefox=this.nav && (agt.indexOf("firefox") !=-1);
	this.firefox3up=false;
	this.firefox36up=false;
	if (this.firefox && this.major >=5)
	{
	    var ffVerIdx=agt.indexOf("firefox/");
	    if (ffVerIdx >=0)
	    {
		var firefoxVStr=agt.substring(ffVerIdx+8);
	        this.firefox3up=parseInt(firefoxVStr) >=3;
		this.firefox36up=parseFloat(firefoxVStr) >=3.6;
	    }
	}
}
var browseris=new Browseris();
var bis=browseris;

So to fool this, just set:

 var browseris = {};

But you have to do it after init.js, so wrap into ExecuteOrDelayUntilScriptLoaded:

ExecuteOrDelayUntilScriptLoaded(function() { 
  var browseris = {}; 
}, "init.js");

After that you can press Save button. You’ll lose the Rich Text Editor, but you’ll have the nice features from CSS3.

DISCLAIMER: It is just an exploration lab. There is no warranty that it will work across the whole site. Don’t ever do such things things at home!

css3 fixers

If you just want to use css3 in your design and still use team functionality, take a look on pie.htc, jQuery.corner or iecss3.

 

Update 2015-09-16 Other Related Issues

Recently me and my colleague had to fix this issue again in SharePoint 2010. What we found was failing select elements (Choice field or Lookup field) in forms. There are some js functions that do not run in other web browsers rather than in IE in IE9 mode. All fail because of the inability of getting custom html element attributes.


//This is an override of FilterChoice (in core.js)
//We override this line: var strOpts=ctrl.choices; -> var strOpts=ctrl.getAttribute("choices");
//The reason is that this does not work in IE9 mode
//Don't forget this workaround. It might lead to other problems
function FilterChoice_new(opt, ctrl, strVal, filterVal) {
   var i;
   var cOpt=0;
   var bSelected=false;
   var strHtml="";
   var strId=opt.id;
   var strName=opt.name;
   var strMatch="";
   var strMatchVal="";
   var strOpts=ctrl.getAttribute("choices"); //THIS ONE
   var rgopt=strOpts.split("|");
   var x=AbsLeft(ctrl);
   var y=AbsTop(ctrl)+ctrl.offsetHeight;
   var elmWorkspace=document.getElementById("s4-workspace");
   if(elmWorkspace)
                                y -=AbsTop(elmWorkspace);
   var strHidden=ctrl.optHid;
   var iMac=rgopt.length - 1;
   var iMatch=-1;
   var unlimitedLength=false;
   var strSelectedLower="";
   if (opt !=null && opt.selectedIndex >=0)
   {
      bSelected=true;
      strSelectedLower=opt.options[opt.selectedIndex].innerText;
   }
   for (i=0; i < rgopt.length; i=i+2)
   {
      var strOpt=rgopt[i];
      while (i < iMac - 1 && rgopt[i+1].length==0)
      {
         strOpt=strOpt+"|";
         i++;
         if (i < iMac - 1)
         {
                                      strOpt=strOpt+rgopt[i+1];
         }
         i++;
      }
      var strValue=rgopt[i+1];
      var strLowerOpt=strOpt.toLocaleLowerCase();
      var strLowerVal=strVal.toLocaleLowerCase();
      if (filterVal.length !=0)
                                   bSelected=true;
      if (strLowerOpt.indexOf(strLowerVal)==0)
      {
         var strLowerFilterVal=filterVal.toLocaleLowerCase();
         if ((strLowerFilterVal.length !=0) && (strLowerOpt.indexOf(strLowerFilterVal)==0) && (strMatch.length==0))
                                      bSelected=false;
         if (strLowerOpt.length > 20)
         {
                                      unlimitedLength=true;
         }
         if (!bSelected || strLowerOpt==strSelectedLower)
         {
            strHtml+="<option selected value=\""+strValue+"\">"+STSHtmlEncode(strOpt)+"</option>";
            bSelected=true;
            strMatch=strOpt;
            strMatchVal=strValue;
            iMatch=i;
         }
         else
         {
            strHtml+="<option value=\""+strValue+"\">"+STSHtmlEncode(strOpt)+"</option>";
         }
         cOpt++;
      }
   }
   var strHandler=" ondblclick=\"HandleOptDblClick()\" onkeydown=\"HandleOptKeyDown()\"";
   var strOptHtml="";
   if (unlimitedLength)
   {
      strOptHtml="<select tabIndex=\"-1\" ctrl=\""+ctrl.id+"\" name=\""+strName+"\" id=\""+strId+"\""+strHandler;
   }
   else
   {
      strOptHtml="<select class=\"ms-lookuptypeindropdown\" tabIndex=\"-1\" ctrl=\""+ctrl.id+"\" name=\""+strName+"\" id=\""+strId+"\""+strHandler;
   }
   if (cOpt==0)
   {
      strOptHtml+=" style=\"display:none;position:absolute;z-index:2;left:" + x 
        + "px;top:" + y + "px\" onfocusout=\"OptLoseFocus(this)\"></select>";
   }
   else
   {
      strOptHtml+=" style=\"position:absolute;z-index:2;left:"+x+"px;top:"+y+" size=\""
        +(cOpt <=8 ? cOpt : 8)+"\""+ (cOpt==1 ? "multiple=\"true\"" : "")
        + " onfocusout=\"OptLoseFocus(this)\">"+  strHtml + "</select>";
   }
   opt.outerHTML=strOptHtml;
   var hid=document.getElementById(strHidden);
   if (iMatch !=0 || rgopt[1] !="0" )
      hid.value=strMatchVal;
   else
      hid.value="0";
   if (iMatch !=0 || rgopt[1] !="0" )
      return strMatch;
   else return "";
}
function SetCtrlMatch_new(ctrl, opt) {
  //ctrl.getAttribute("optHid") instead of ctrl.optHid
  var hid=document.getElementById(ctrl.getAttribute("optHid"));
  hid.value=opt.options[opt.selectedIndex].value;
  if (hid.value !=0)
    ctrl.match=opt.options[opt.selectedIndex].innerText;
  else
    ctrl.match="";
}

function HandleOptDblClick_new() {
  var opt=event.srcElement;
  //opt.getAttribute("ctrl") instead of opt.ctrl
  var ctrl=document.getElementById(opt.getAttribute("ctrl"));
  _SetCtrlFromOpt(ctrl, opt);
  SetCtrlMatch(ctrl, opt);
  opt.style.display="none";
}

function _SetCtrlFromOpt_new(ctrl, opt) {
  var hidId = ctrl.getAttribute("optHid");
  if (!hidId) { return; }
  //ctrl.getAttribute("optHid") instead of ctrl.optHid
  var hid=document.getElementById(ctrl.getAttribute("optHid"));
  hid.value=opt.options[opt.selectedIndex].value;
  if (opt.options[opt.selectedIndex].value==0)
  {
    ctrl.value=opt.options[opt.selectedIndex].innerText;
    ctrl.match="";
  }
  else
  {
    ctrl.value=opt.options[opt.selectedIndex].innerText;
    ctrl.match=ctrl.value;
  }
}

function HandleOptKeyDown_new() {
  var opt=event.srcElement;
  //opt.getAttribute("ctrl") instead of opt.ctrl
  var ctrl=document.getElementById(opt.getAttribute("ctrl"));
  var key=event.keyCode;
  switch (key)
  {
  case 13:
  case 9:
    _SetCtrlFromOpt(ctrl, opt)
    event.returnValue=false;
    opt.style.display="none";
    return;
  default:
    break;
  }
  return;
}

ExecuteOrDelayUntilScriptLoaded(function() {
  FilterChoice = FilterChoice_new;
  SetCtrlMatch = SetCtrlMatch_new;
  HandleOptDblClick = HandleOptDblClick_new;
  _SetCtrlFromOpt = _SetCtrlFromOpt_new;
  HandleOptKeyDown = HandleOptKeyDown_new;
}, "core.js");


 

Erik Swensson’s book about Sharepoint Branding

Erik Swensson'b book about Sharepoint 2010 brandingToday Erik Swensson’s book Practical SharePoint 2010 Branding and Customization came to our company. I am looking forward to read it. It’s about time to see alternatives to Randy’s starters.

Vertically align input text in IE

Well, input and IE aren’t friends, are they? I found a solution: not defining input height. The only shortcoming of this solution is…, well the solution itself, sometimes you need to define the input height.

However, don’t set height, just define, font-size for text inside and padding, and it will be aligned:

input {
  font-size:20pt;
  padding: 10px;
}

Do you know some better ways to do it, Tell me.

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint