Corey Roth and Friends Blogs

Group site for developer blogs dealing with (usually) Ionic, .NET, SharePoint, Office 365, Mobile Development, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

September 2008 - Posts

  • Selecting DOM Elements with jQuery (Part 1)

    I promised a few people that I would write a few blog posts on jQuery. Plus I am also going to be speaking at Tulsa Techfest on jQuery so these blog posts will help me prepare for that talk. In this post I am going to focus on selectors in jQuery. Selectors are extremely powerful and really the first thing you need to know when starting with jQuery. Selectors allow you to select any element in the DOM. The problem in the past of trying to select values within the DOM is each browser has its own implementation. You then would have to liter your code with ugly switch statements but now jQuery abstracts out the browser differences without you having to worrying about it. jQuery selectors are similar to css selectors so let's start by reviewing css selectors.

    Selectors in CSS

    In css what does the following type selector do :
       div {color: blue;}

    If you said it makes the text in any div blue you would be right. And I'm sure everyone knows about class selectors so what does this do:
       makered {color:red}

    In this rule the anything that has its class attribute set to make red will have red font. And the last one is ID selectors:
       #reddiv {color:red}

    This rule will set the text to red inside the div that's id attribute is set to reddiv. There are several other types of selectors but for sake of brevity I am going to skip those. For more on these css selectors visit

    Selectors in jQuery

    There are three types of basic selectors: element, id , and class. The following jQuery statement is an element selector that selects all div elements. The elements are called a matched set.

    The dollar sign is just a shortcut for writing JQuery which is the main class for all of this stuff. Now to add css to the matched set we say:
       $("div").css("border","3px solid red");

    This will give all divs in our html document a red border.

    Now let's say we need to do a selection based on the element id:
       $("#somediv").css("border","3px solid red");

    This will give a red border to the div with the id of "somediv". Note: the # is important and must be there.

    The final selector I am going to talk about in this post is the class selector. If we wanted to apply a red border to the following html element:
       <div class="redBorderClass"/>

    We would write the following jQuery selector:
       $(".redBorderClass").css("border","3px solid red");

    Easy stuff uh? It is but we are just scratching the surface on how you can use jQuery to select DOM elements. I'm going to do a part 2 of this post where I dive into some more advanced selectors. The documentation on jQuery is really great so for more info on selectors go here:

    Posted Sep 28 2008, 10:40 PM by KyleKelin with no comments
    Filed under:
  • First Tulsa SharePint Meeting

    Way back when I lived in New York I would attend technology meetups that were held at bars. There were meetups for everything you could think of including .NET, Java, Agile, XP, and SharePoint. Each varied a little in format but the basic idea is to gather people who share a common technology interest at a bar and then add beer. Sometimes the whole group debated while other times the conversations would splinter off into 2 or 3 person conversations.

    So on Thursday October 16th at 6:00pm Corey Roth and I will host the first SharePint (I'm spelling this wrong on purpose. It is sort of a pun) in Tulsa at Crawpappy's. Basically show up to have a beer or two and discuss SharePoint and whatever else is on your mind. We won't have speakers or agendas or topics planned though I do encourage everyone to come with a few conversation ideas. And if you don't know anything about SharePoint come anyway because you might find someone there to discuss Iron Python or Perl with.

    Unfortunately at the moment you will have to furnish the pint in SharePint. I am hoping by the second meeting to get a recruiting company to buy the first two rounds for everyone in exchange for me handing out their business card. So if you are a recruiter or know one that wants to do that let me know.

    So I hope to see all two of my readers there.

    Disclaimer: Neither Corey or I will be driving anyone home. Since public transportation in Tulsa is virtually nonexistent either limit your alcohol consumption or make arrangements to get home without driving.

    Directions to Crawpappy's

    View Larger Map
  • Adding Your Own Search Box to Your Master Page

    Sometimes clients want to tweak the search box that usually appears at the top of a SharePoint page so much I just throw the whole thing out. The delegate control is used for search and just loads a user control so you can just replace that with your own user control. But today I had to do it using SPD. So here is how I did it with "no code".

    1. Create a new web part page called CustomSearch (though the name doesn't matter). The drop the Search Core Results web part on it.
    2. Now on your custom master page, delete the delegate control and move the PlaceHolderSearchArea control to the bottom of the page inside your hidden div. Don't delete it because many page layouts need that control present.
    3. Next on your custom master page where the PlaceHolderSearchArea control was add a dropdown, textbox, and hyperlink. The dropdown box will be for scopes, the textbox is where the user will enter their search term, and the hyperlink will submit the search. Notice the values on the dropdown are just the part of our search string. Obviously you will need to customize this to match the scopes that your users want.

      <SELECT name="scopes" id="scopes" class="ms-sbscopes">
      <option value="cs=This%20Site&">This Site</option>
      <option value="cs=This%20List&" >Faqs</option>
      <option value="cs=This%20List&" >Reference Docs</option>
      <option value="cs=This%20List&" >Policy Docs</option>
      <option value="cs=This%20List&" >Forms</option>
      <option value="s=All%20Sites">All Sites</option>

      <div class="ms-sbcell" style="display:block;float:left;border:1px gray solid; margin:0 2px 0 2px;"><input type="text" id="searchtext" class="ms-sbplain"/></div>
      <a href="#" mce_href="#" onclick="SearchRedirect()" style="padding:0 2px 0 0"><img src="/_layouts/images/gosearch.gif" mce_src="/_layouts/images/gosearch.gif" alt="search"/></a>

    4. Finally we need to add a javascript function to our master page that will build our url that contains our custom search page and then redirect the page to that url.

      function SearchRedirect(){
      var searchtext =  document.getElementById('searchtext').value;
      var control = document.getElementById('scopes');
      var scope = control.options[control.selectedIndex].value;

      window.location= '/TestSite/pages/CustomSearch.aspx/Results.aspx?k='+searchtext+'&'+scope;


  • Changing the Default Text of an Empty Document Library

    "To create a new item, click "New" or "Upload" above. There are no items to show in this view of the document library."

    The above text is displayed when a Document Library is empty. Today I needed to change it. I had done this once before and forget so I'm blogging about it so I can find it next time. The text comes from the core.resx resource file, located in 12\RESOURCES. It's divided up into four resources; just open the resource file in any text editor and search for "noitemsinview_doclibrary", and you'll find the strings. Just replace the strings with your text or delete them all together.

    Here a link explaining with more details.

Powered by Community Server (Non-Commercial Edition), by Telligent Systems