CODEWITHSUNDEEP
javascriptjqueryhtmlloader
Anand Jaju
Anand Jaju

Reputation: 458

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

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..

Upvotes: 0

Views: 401

Answers (1)

user2838698
user2838698

Reputation:

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); 
});
});

Upvotes: 1

Related Questions