Friday, January 20, 2017

Rotate Image OnClick

An image can be easily rotated using JavaScript or jQuery. I ll share both ways in this post.

HTML

 <img src="Pic.jpg" id="image" onclick="rotate90(this)"> 
 
JavaScript

 <script>
    var angle=90;
 
    function rotate90(ele){
  
     if(angle>360)//reset angle
                angle=90;
 
     ele.style.webkitTransform="rotate("+angle+"deg)";//Mozilla
     ele.style.msTransform ="rotate("+delta+"deg)"; //IE
 
     /*optionally set other vendor specific transformation
       ele.style.MozTransform = rotate("+delta+"deg)";
       ele.style.OTransform = rotate("+delta+"deg)";
    */
 
        angle+=90;
    }
 </script>
 
jQuery
 
 Use jQuery Rotate plugin to do the actual rotation 

 <script>
    var angle=90;
 
    function rotate90(ele){
  
       if(angle>360)//reset angle
                angle=90;
 
       $(this).rotate(angle);
 
        angle+=90;
    }
 </script>
 
Cheers
Samitha

Wednesday, January 11, 2017

asp.net MVC Make DIV redirect

 Suppose you have a DIV element on a page, such that when clicked should behave like a normal Hyperlink. This can be easily achieved using jQuery.

HTML

<div class="logo" data-action ="@Url.Action("ActionName", "ControllerName")" style="cursor: pointer;" >                   
  DivText       
</div>
 
JavaScript

<script>
   $(function() {

     $('.logo').click(function () {
                var url = $(this).attr('data-action');

                if (url !== undefined)
                    window.location.href = url;
            });
});

</script>

Wednesday, December 28, 2016

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

Tuesday, December 20, 2016

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, which is a cross browser compatible solution.

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

Cheers
Samitha

Thursday, December 1, 2016

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

Friday, November 18, 2016

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

Friday, November 11, 2016

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