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"> &lt;</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