Friday, August 19, 2016

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



Wednesday, August 10, 2016

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

Tuesday, August 2, 2016

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

Wednesday, July 27, 2016

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

Friday, July 22, 2016

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

Monday, July 18, 2016

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


Thursday, July 14, 2016

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