CODEWITHSUNDEEP
jquery
Sharif Sajid
Sharif Sajid

Reputation: 11

jquery function not working in mozila firefox, but working in google chrome

i want to blur the content of div, and this function is working properly in google chrome but not in mozila firefox,

this is my code,

<!doctype html>
<html>
<head>

<title>How to create blur effect with jQuery and CSS</title>

<style>
    body{
        text-align: center;
    }

    input{
        margin-top:20px;
        font-size:16px;
        font-weight: bold;
        padding:5px 10px;
    }

    #box{
        margin:50px auto;
        width:500px;
        height:100px;
        color:#fff;
        padding:10px;
        background: #333;
    }

</style>

</head>
<body>


<input type="button" value="Blur Box" class="button"  />
<input type="button" value="Reset Box" class="button2"  />

<div id="box">We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page </div>

<!-- 
    We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page 
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

    //DOM loaded 
    $(document).ready(function() {

        //attach click event to button
        $('.button').click(function(){

            //when button is clicked we call blurElement function
            blurElement("#box", 2);

        });

        //attach click event to button
        $('.button2').click(function(){

            //set box blur to 0
            blurElement("#box", 0);

        });


    });

    //set the css3 blur to an element
    function blurElement(element, size){
        var filterVal = 'blur('+size+'px)';
        $(element)
          .css('filter',filterVal)
          .css('webkitFilter',filterVal)
          .css('mozFilter',filterVal)
          .css('oFilter',filterVal)
          .css('msFilter',filterVal);
    }



</script>

</body>
</html>

Please help me that how to run this code in all browsers (specially mozilla firefox, IE 9+) Thanks in advance.

Upvotes: 0

Views: 923

Answers (2)

user1572796
user1572796

Reputation: 1057

This should get you started you need to use SVG for firefox and will need to write something to change that value on the feGaussianBlur tag. Haven't tested the IE part but I think it is correct.

See it in action: http://jsfiddle.net/nso4e1qu/9/

<input type="button" value="Blur Box" class="button"  />
<input type="button" value="Reset Box" class="button2"  />

<div id="box">We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page </div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 


//DOM loaded 
$(document).ready(function() {

    //attach click event to button
    $('.button').click(function(){

        //when button is clicked we call blurElement function
        blurElement("#box", 2);

    });

    //attach click event to button
    $('.button2').click(function(){

        //set box blur to 0
        blurElement("#box", 0);

    });


});

//set the css3 blur to an element
function blurElement(element, size){
    var filterVal = 'blur('+size+'px)';
    var filterValMoz = 'url(#blur)';
    var filterIE = 'progid:DXImageTransform.Microsoft.Blur(PixelRadius=' + size + ')';
    $(element)
    .css('filter',filterVal)
    .css('-webkit-filter',filterVal)
    .css('-o-filter',filterVal)
    .css('-ms-filter',filterVal)
    .css('filter',filterValMoz);
}

 body{
        text-align: center;
    }

    input{
        margin-top:20px;
        font-size:16px;
        font-weight: bold;
        padding:5px 10px;
    }

    #box{
        margin:50px auto;
        width:500px;
        height:100px;
        color:#fff;
        padding:10px;
        background: #333;
    }

svg {
  position:absolute;
  left:-999px;
}
.blur {
   filter: blur(3px); 
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px);
  -o-filter: blur(3px); 
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');   
}

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92294

Filters are not supported in IE and only supported in FF 35

See

Upvotes: 0

Related Questions