Jquery function to identify DIVs without text

You can use jQuery filter function to identify all the DIVs without text as displayed below.

$('.heading').filter(function(i,src){
    return $.trim($(src).text()).length == 0;
}).css('cursor', "pointer");

Cheers
Samitha

Detect window height using Javascript

JavaScript can be used to determine the height/width of the screen that is used to be viewing the page. i tried using jQuery height method but it seems some browsers (specifically in IE Compatibility modes) doesn't seem to calculate the height as expected.

Following function can be used to get the actual screen height and width, which is a cross browser compatible solution.

   function getWindowHeight(){
            return window.innerHeight ||
                   document.documentElement.clientHeight ||
                   document.body.clientHeight;
        }

function getWindowWidth() {
            return window.innerWidth ||
                   document.documentElement.clientWidth ||
                   document.body.clientWidth;
        }

Cheers
Samitha

ASP .Net MVC wrap text in DisplayFor

If  the content displayed within a DisplayFor is too long you can wrap the text using following simple trick.

<div style="word-wrap:break-word;">

 @Html.DisplayFor(ModelItem => item.Text)

</div> 

cheers
Samitha

ASP.Net MVC set maximum upload file size

ASP.NET MVC provides some configuration settings that enable to upload larger files. Adding following code snippet to web.config file will increase the maximum file upload size.

 <location path="controller/action">
   <system.web>
     <!-- specified in kilobytes (KB)  -->
    <httpRuntime maxRequestLength="15360" />  <!-- 15MB -->
   </system.web>
  <system.webServer>
     <security>
       <requestFiltering>
         <!-- specified is in bytes (B)  -->
         <requestLimits maxAllowedContentLength="15728640"/>  <!-- 15MB -->
       </requestFiltering>
     </security>
   </system.webServer>
 </location>

Cheer,
Samitha

Multiline Button Text

If you ever wanted to display a long button text in multiple lines  CSS comes to assist you. You can achieve the effect using following style.

#button_id {
    white-space: normal;
    width: 100px;
  height: 80px;
}

Make sure you have set the with and height for the button .

cheers
Samitha

loop through all hyperlink elements using jQuery

If you ever wanted to loop through all the hyperlink elements in a page, jQuery provides .each() function which will provide you the desired result.

e.g
$("a").each(function(){
    //access the element here.
});

This can also be done in a more cleaner way as displayed below.

$("a").attr("href", function(i, hRef) {
  //access the element here.
});

I prefer the second option as will not create additional object when iterating elements.

Cheers,
Samitha

Social Network Sharing using jQuery

I have already posted an article about sharing content in Facebook few weeks back. Here I am going to use free jQery plugin to achieve same objective.


The major reason for switching on to using a jQery plugin is because you need to have a Facebook application developed and that will need to be managed separately. This will become somewhat troublesome as some companies will not like to have Facebook account maintained for different reasons.


There are several jQery plugins available, here I am focusing on jsSocials Social Network Sharing Plugin. Integrating this plugin is really easy for either classic ASP.Net or ASP.Net MVC.

1. To configure the plugin follow the steps in start using page. I prefer use use of CDN instead of downloading the bunch of files.

When data binding the div tag that used to populate the social media icons you can use following technique to dynamically data bind.

  @{ var shareUrl = string.Format("{0}://{1}{2}/{3}/{4}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"),   "Job/Details", @item.field1);}

<div id="shareRoundIcons" data-url="@shareUrl" data-text="@item.field2"> </div>

If you are trying to do this in classic ASP.Net you might try this as follows

 <div id="shareRoundIcons" data-url="<%#Container.DataItem("field1")%>"
data-text="<%#Container.DataItem("field2")%>"></div>

when it comes to configure the plugin in jQuery trying following trick will ensure that all divs are showing the social media icons (even if you are trying it on a grid or table this will work)

<script type="text/javascript" >
  $(function () {

$('[id^=shareRoundIcons]').each(function () {
                $(this).jsSocials({
                    url: $(this).data('url'),
                    text: $(this).data('text'),
                    showLabel: false,
                    showCount: false,
                   shares:  [ "facebook","twitter",  "linkedin"]
                });
            });
});
</script&;gt

2.Some social media uses meta tags to grab the featured image used in sharing.  Make sure the page has og: tags specified.

e.g.
<meta property="og:type" content="website">
<meta property="og:site_name" content="YOUR SITE NAME">
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.abc.com/Job/Details/">
<meta property="og:image" content="http://www.abc.com/Content/Styles/Logo.jpg" />

 More information can be found here.

3. Make sure you have included the Open Graph XML namespace extension to your HTML declaration.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

See the entire discussion in this stack overflow post.

Cheers,
Samitha

Visual Studio enable Edit and continue

Visual Studio provides built-in support for editing code behind files at run time.  But I was surprised to realize that this actually works when the setting (which can be found in Tools -> Options -> Debugging -> Edit and Continue > Enable Edit and Continue )  is turned off (unchecked).

Cheers,
Samitha

Asp.net Share page content in Facebook

Modern web pages includes sharing content in various social media networks so that your friends can see your pages of interest.

This can be achieved in using

1. Third party websites.
There are plenty of websites that provide sharing functionality by just copying some code to your site.
 http://addthis.com/
 http://www.sharethis.com/
2. using Javascript
This involves creating an application in Facebook integrating some JavaScript to initialize the sharing dialog. Following article gives you a detailed description of the implementation.

Cheers,
Samitha

keep page footer at the bottom

Page footer can be kept at the bottom of the page using CSS or jQuery. I prefer the jQuery solution over CSS as it is much simpler and cleaner.

Following code snippet will ensure that page footer is always kept at bottom of the page. This will also work even if the page has dynamic content added when the page is being rendered. Make sure the footer id is specified as footer.


<script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
</script>

cheers
Samitha

Jquery UI dialog remove blue halo around the close dialog button

Jquery UI Dialog tend to display a blue halo around the close dialog button as shown below.

This can be resolved by using the follwing css code snippet.

.ui-button:focus { 
     outline:none !important ;
}

Cheers,
Samitha

asp.net controls for Mobile devices

When it comes to Mobile application development, one concern for developer is to choose the UI components to provide best user interaction.

There are plenty of such components to choose from and you can select any of them that best fits your requirement.

1. Telerik controls
2. jqueryUi controls
3. jQuery Mobile controls

Cheers,
Samitha

Bootsrap file Input

Different browsers render the  HTML file upload control different ways. This can be resolved by replacing the file upload control with a cross-browser compatible control.

Even though there are plenty of controls to choose from, I personally like the Bootstrap file input control that can be integrated in simple steps into any project.



Regards,
Samitha

check form validation using jQuery

If you are using the jQuery Validate plugin for your form validations, you can force validation before the form is submitted and perhaps display an alert if validation is successful.

e.g.
 &lt input type="submit" value="Submit"  onclick="if ($('#your_form_id').valid()){alert('Thankyou for your application');}" / >

Cheers,
Samitha

Specify file input height for all browsers

Even you have specified  <input type="file" > using the style attribute it does not get applied in as expected in chrome browser. You can resolve that issue by setting file control width as follows.

 input[type="file"]{
        height:35px;
        width:100%;
  }

    input[type="file"]::-webkit-file-upload-button{
        height:35px;
  }

cheers,
Samitha

Increase size of glyphicons

If you are using bootstrap glyphicons, you may have noticed that sometimes the icon looks to small for a web page.

This can be fixed simply by increasing the font sizer for icons as displayed below.

/*change all icons*/
.glyphicon {
    font-size: 35px;
}


/*change specific icon*/
.glyphicon.glyphicon-print {
    font-size: 35px;
}


Regards,
Samitha

Missing close button icon in jQuery UI Dialog

When the jQuery UI dialog is implemented there are few things you need to be aware of.

1. Missing image sprites

Resolution:
Verify jQuery UI base theme is referenced.

2.Using bootstrap along with jQuery

Resolution:
Make sure you reference bootstrap.js before the jquery-ui js as shown below.



Regards,
Samitha

Create responsive table

There are several ways to make a table responsive. Here I am showing some of the ways that can be achieved.

1. Using bootstrap
Bootstrap comes with built-in class .table-responsive that makes the table scroll horizontally on small devices.

e.g.
<table class="table-responsive " >

</table>

2. Using media query
You can use media query to behave table look and feel differently on mobile devices. The following code sample took from a article posted in css-tricks.com

<style>
 
 @media
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
   display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
   position: absolute;
   top: -9999px;
   left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
   /* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee;
   position: relative;
   padding-left: 50%;
  }

  td:before {
   /* Now like a table header */
   position: absolute;
   /* Top/left values mimic padding */
   top: 6px;
   left: 6px;
   width: 45%;
   padding-right: 10px;
   white-space: nowrap;
  }

  /*
  Label the data
  */
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Porn Name"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }
 }

 /* Smartphones (portrait and landscape) ----------- */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
  body {
   padding: 0;
   margin: 0;
   width: 320px; }
  }

 /* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
   width: 495px;
  }
 }

 </style>

I personally like the second option as it will make more smoother look in mobile devices.

Cheers,
Samitha

LINQ Error "There is already an open DataReader associated with this Connection which must be closed first"

When working with link queries I recently got this error message, which states "There is already an open DataReader associated with this Connection which must be closed first" .

This error is caused by an already open connection to the database that is not closed. Adding a .ToList at the end of the LINQ query will resolve this issue.
e.g

 var vacancies = db.Vacancies.Where(v => v.User.Username == userName )
                                                .Take(5)..ToList();



Cheers,
Samitha

 

Google Autocomplete for Addresses and Search

If your application includes an address text field that user should be specified, Google Autocomplete for Addresses and Search  can help users supply the details. This is very easy to integrate and efficient.


Read here for more information.

Cheers,
Samitha

Hide elements when pritning the web page

When it comes to print a given web page, there may be things that we do not wish to appear in the print preview or when the page is actually printed. There are few ways to solve this issue.

1. Write print specific page and redirect to that page on print.
2. Use CSS to hide elements on print.

Here I am going to show how we are going to achieve this using CSS.

1. Write a class for non printing items in your CSS file (such as. .no-print)
2. The class definition would be similar to shown below.

/*use media query to style page when printing*/
@media print
{
    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }


/*removes href values when printing */
    a[href]:after {
    content: none !important;
  }
}

3. Refer the class in the elements that needs to be hidden

e.g.

• Hyper link and image

<a href="http://domain.com/link" target="_blank" class="no-print">
                                            <img  class="no-print"     src="~/Content/Styles/_Default/image.png" height="20" width="20">
                                        </a>

• Button 
  <input type="button" value=Apply" class=" no-print" />

Cheers,
Samitha

Bootstrap layout generator

Since twitter introduced BootStrap, there has been plenty of resources that aid in building bootstrap layouts. Now the developers simply can try one of free online layout builders and generate the layout online.
This article discusses some of the available online bootstrap layout generators and I found layoutit to be very use full.

Cheers,
Samitha

ASP.Net keep textbox passoword on postbacks

As a security measure , text inputted to a password textbox is cleared on post backs. If any of you come across a situation where it needs to be keep password visible on post backs, it would be not as straightforward as you might have think.

Achieving this objective involves following steps.

1. Textbox definition (in the .aspx page)


2. PageLoad code behind
 txtAdminPWD.Attributes("type") = "password"

 If ViewState("Password") IsNot Nothing Then
            txtAdminPWD.Attributes.Add("value", ViewState("Password").ToString())
 End If

3.  Password stored to the textbox in the value and in view state (can be inside a method to populate the password )
ViewState("Password") = Decrypt(cUser.AdminPWD).ToString()
                txtAdminPWD.Attributes.Add("value", Decrypt(cUser.AdminPWD).ToString())

4.Use the javascript PageLoad to restore password textbox value
function pageLoad() {
                setTimeout(function () {
                   $("input#ctl00_cphMainContent_txtAdminPWD").val($("input#ctl00_cphMainContent_txtAdminPWD").val());
                }, 10);
{

5. Clearing the password
txtAdminPWD.Text = ""
txtAdminPWD.Attributes.Add("value", txtAdminPWD.Text)


Cheers
Samitha

Asp.net MVC 4 bootstrap integration

When it comes to integration of the popular Bootstrap with Asp.Net MVC,. there are  plenty of tutorial that guide you on step-by-step instructions on installation. I found following article pretty easy to follow and install bootstrap without much hassle.

1. Using the NUGET Package manager
2. Without using the NUGET package manager

Cheers,
Samitha.

Disable all Element inside a div or table

If you ever wanted to disable all the elements inside a table or div. jQuery provides an easy way of doing it.


$("#tableName").find("input,button,textarea,select").attr("disabled", "disabled");

 You can also try the jQuery BlockUIplugin for Page or element level blocking.

Cheers,
Samitha

asp.net textbox yellowing in Chrome

I came across this issue when working with textboxes (auto fill on)   and tested on chrome browser. The textboxes are rendered with a yellowish background color.

This can be resolved in two ways.

1. Using CSS
 input:-webkit-autofill
    {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

2.Using jQuery
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

Detailed discussion can be found here.

Cheers,
Samitha