Blur.js
Blur.js copied to clipboard
Published
20 hours ago •
jakiestfu
jakiestfu
"Cannot access image" - because netscape is undefined.
Going off the rough explanation from the readme, I tried my luck and tried to create a small demo. It turned into this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="blur.js"></script>
<style>
body {
background-image: url("http://localhost:8080/cdn/theme/images/bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
width: 100%;
color: white;
}
.block {
height: 250px;
position: absolute;
top: 200px;
left: 100px;
right: 100px;
background: rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div id="app">
<div class="block">ovo</div>
</div>
<script>
jQuery(function($){
$(".block").blurjs({
//source: 'body',
radius: 5,
overlay: 'rgba(255,255,255,0.4)'
});
});
</script>
</body>
</html>
Upon launching, I got the "cannot access image" error. On further reading, it was due to the netscape object not being defined.
What am I doing wrong here - or, what exactly can I do to fix it?
This is a cross domain scripting error I think. Same one I've had with the original canvas script that Blurjs is based on. See here for details: https://github.com/Quasimondo/QuasimondoJS/issues/7
