HRWebGuru

Thursday 2 April 2015

Disable right click menu in html page using jquery

Disable Right click from webpages

<script type="text/javascript" language="javascript">
        $(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        }); 
    </script>

Disable Right click to Images only.

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
  alert('Right Click Not Allowed !!!');
    }
  }, false);

Monday 9 February 2015

Write Particular CSS Style for IE 10 Browser

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.proBox .proBox-content h2{font-size:13px !important;}
}

Tuesday 20 January 2015

Opacity css browser compatibility

div{

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

filter: alpha(opacity=60);

-khtml-opacity: 0.6;

opacity: 0.6;

}

Monday 19 January 2015

How to Replace text using attribute selector in css

/*Replace text using css*/

li a[title="Previous page"] {visibility:hidden}
li a[title="Previous page"]:after{content:"< Previous";visibility:visible}

HTML

<a href="#" title="Previous page"> <</a>

Monday 12 January 2015

CSS3 transition of background-image for Firefox not working solution

CSS:
Add this on style or css file
.hr-box
{
width: 400px;
height: 150px;
position: relative;
border: 1px solid green;
}

.hr-box:before, .hr-box:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}
.hr-box:before {
background-image: url(hr-img1.jpg);
z-index: 1;
transition: opacity 2s;
}

.hr-box:after {
background-image: url(hr-img2.jpg);
}

.hr-box:hover:before {
opacity: 0;
}

HTML:
Add this on body tag
<div class="hr-box"></div>

Webtechpie.com

Tuesday 16 December 2014

Filter Grayscale Browser Compatibility


img.grayscale {


    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */


    filter: gray; /* IE6-9 */


    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */


}

Tuesday 17 December 2013

Simple Email Validation

If you are sure that the users of your web page are using HTML5 compatible browsers you can use the following neater example for the same purpose:

<!DOCTYPE html>

<html>
    <body>
        <form>
            <input type="email" pattern="^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$">
            <input type="submit">
        </form>
    </body>
</html>