How to load loader image before the pdf file is shown?

StackOverflow https://stackoverflow.com/questions/19318660

Question

I am having <a> tag. href of that tag is pdf file. I want to load that pdf file after 10 seconds till then i want to show loader. I did google and I got one jQuery BlockUI plugin. It works when i am not passing anything in href i.e. #.

HTML

<head>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
   <script src="jquery.blockUI.js"></script>
</head>
<body>
   <a class="question" href="Application_Form.pdf" id="demo2">Testing</a>
</body>

JavaScript

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo2').click(function() { 
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 

        setTimeout($.unblockUI, 10000); 
    }); 
});
</script>

How to do this.

I did Google very much but I am not getting how to do it.

Please can any one help me out to solve this issue. Thanks in advance..

Was it helpful?

Solution

Friend you only missed to wrap your jQuery magic inside $(document).ready(function(){ }); You can try this in your jQuery code:

$(document).ready(function(){
$('#demo2').click(function() { 
    $.blockUI({ css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } }); 

    setTimeout(function() { 
        $.unblockUI({ 
            onUnblock: function(){ alert('hi'); // Show your pdf file here
            } 
        }); 
    }, 2000); 
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top