0

So as the title suggests, I'm trying to run blur.js on my WordPress theme. I have enqueued the script in functions.php:

    function load_oves_methods(){
    wp_enqueue_script( 'blur', get_stylesheet_directory_uri() . '/js/blur.js', array('jquery') );
    wp_enqueue_script( 'flexcroll', get_stylesheet_directory_uri() . '/js/flexcroll.js', array('jquery') );
}

add_action( 'wp_enqueue_scripts', 'load_oves_methods' );

jQuery is loaded before this. In the header.php file, I am calling the blur.js function as such:

<script>
jQuery(document).ready(function($){
    jQuery(".head").blurjs({
        source:'body',
        radius:5,
        overlay:'',
        offset:{
            x:0,
            y:0
        },
        optClass:'',
        cache:false,
        cacheKeyPrefix:'blurjs-',
        draggable:false
    });
});
</script>

The script is called after wp_head();.

And the files in question are most assuredly on the server, in my themes /js folder. The error I get in the console is: "Failed to load resource: the server responded with a status of 404 (Not Found)"

Previously I was calling said script via a tag in the header, and it was able to find the file, but it kept tossing errors in blur.js, and saying that it could not find the variable "jQUery", despite jQuery UI scripts working just fine on my theme.

EDIT: Both scripts now have the array('jquery') dependency added to them, but still no dice. I have checked the file source via my browser and triple-checked all folder destinations - everything checks out as a-ok. My jQUery UI scripts work just fine, by the way, but neither blur.js or flexcroll.js work. Disabling plugins didn't have an effect, either. I checked file permissions as well, and those are set properly.

Improve this question
1
  • If the path is correct and the file is there, check for file permissions. You will get that error if file permissions are wrong. I often have this issue, if I am developing local and then moving to another server.
    – gdaniel
    Sep 30, 2015 at 15:32

2 Answers 2

Reset to default
1
  • First triple check your file and path names for spelling mistakes.
  • Then check the permissions of the .js file
  • Then take the URL from your source and open it in your browser first without the ?ver=3.8.1. Do you get a 404 in your browser as well?

Then you say you call your script after the head. How exactly? Manually written into a template file?

Also I noticed this in your script that you bind jquery to $ but then call the selector with jQuery again

jQuery(document).ready(function($){
    jQuery(".head").blurjs({

You can replace the jQuery in the 2nd line with $. I am not that into jQuery but this might solve your problem with the error you said you head earlier.

Also both of your scripts do not have jQuery as dependency, your enabling script uses jQuery so put array( 'jquery') as dependency into your wp_enqeue_script call and check of jquery gets loaded inside the head. I would do this even if other scripts are loading jQuery anyway.

// Any chance you have a Adblocker installed, I had something like this once and after hours I figured out that Adblock was blocking a script that had something to to with social icons and I had the antisocial filter lists enabled ^^

Improve this answer
2
  • The file/path names are 100% correct, the file opened in my browser and matched the contents of the one on my harddisk; the URL worked without ?ver=3.8.1. Fixed the binding, but still no results. I checked permissions and allowed 'execute', although they already had 'read' given as a permission. Tried adding 'array('jquery')' to my enqueue scripts, but to no avail. Still a 404 error. When I mean call script, I mean I execute the .bindjs function. My apologies for the ill wording.
    – CyanCorsair
    Feb 25, 2014 at 10:51
  • See my edit. So the URL works without the ?ver.. and how about with it? Still working? You have tried another browser? How about sharing your site with us?
    – NextGenThemes
    Feb 25, 2014 at 17:55
0

Blur.js works by taking the background image, replicating it, blurring it, and overlaying the result into the div you specify. This works fine with images, because a copy is created and the blur effect is applied to the copy.

I think you are trying to use a video background and putting a blurred div on top?

The 404 error is because the blur.js cannot find the original image to copy; it's a video and not a still image. It can therefore not make a copy to blur and put in the div, and so your nominated div stays empty.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.