Responsive Youtube Background v.2 - javascript

Vaughn D. Taylor created this amazing codepen to use Youtube as a (repsonsive) background video. Everything works perfect but I do get a Error in the console of Chrome. I was wondering if anyone knows why this is and/or has a solution! (It doesn't effect the JS because it does work but maybe it just nice to have this fixed)
Uncaught TypeError: Cannot set property 'width' of null
at Y.h.setSize (www-widgetapi.js:83)
at vidRescale (all.js:2)
at all.js:2
at dispatch (jquery.min.js:3)
at r.handle (jquery.min.js:3)
I'm loading in jQuery 2.2.4 before the body closing tag, all.js is my JS file with the JS code that I got from the codepen. It is loaded after the jQuery.
Responsive Youtube Background 4.2:
https://codepen.io/vaughndtaylor/pen/QNYRdb

Related

Visual Composer / Jquery Animations not working Debug Error

I have visual composer installed on a wordpress site. For some reason when i isert and image or any element and apply the animation from inside visual composer, the page goes blank and nothing shows, no animations, nothing.
After contacting the plugin developer they said another plugin is conflicting but i have just 1 other plugin installed, jetpack. I have uinstalled that and the problem persists.
Using the debug tool i get the following errors. any ideas?
Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery.min.js?ver=3.1.1:4)
at waypoints.min.js?ver=5.0.1:8
at waypoints.min.js?ver=5.0.1:8
at waypoints.min.js?ver=5.0.1:8
at waypoints.min.js?ver=5.0.1:8
Uncaught TypeError: f.getClientRects is not a function
at r.fn.init.offset (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js?ver=3.1.1:4:20376)
at t.refresh (http://####/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:2072)
at t. (http://#####/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:6130)
at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js?ver=3.1.1:2:2865)
at refresh (http:#####/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:6100)
at Function.n.(anonymous function) [as waypoints] (http://###wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:7638)
at r.fn.init.init (http://####/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:4817)
at r.fn.init.n.fn.(anonymous function) [as waypoint] (http://######/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=5.0.1:8:5712)
at function.window.vc_waypoints.window.vc_waypoints (http://####/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=5.0.1:1:7243)
By default, the latest version of WordPress uses jQuery version 1.12.4 but your site seems to be calling jQuery 3.1.1 via Google's CDN. It's possible that Visual Composer isn't compatible with jQuery 3 yet.
If this is the only plugin on the site, then it's likely the theme calling this jQuery version. And if it's properly coded, you should be able to find a wp_register_script or wp_enqueue_script function that is overriding the jQuery version. If you replace that with wp_enqueue_script( 'jquery' );, you'll load up WordPress' jQuery which may solve the issue.
Three notes:
The theme may have replaced jQuery by using wp_deregister_script. You'll need to comment that out too.
Changing the jQuery version may break javascript coming from your theme if that js needs jQuery version 3 so look for issues on that end as well.
When you update your theme, it will revert this change. So you should consider doing this through a child theme to preserve your changes across updates.

JS error when creating Youtube background

I am trying to create a youtube video background with the help of Jquery. I referred to https://github.com/rochestb/jQuery.YoutubeBackground and create a page for the same. I was able to successfully play the video in the background but when the page loads I get a JS error
"JavaScript exception: Error calling selector function:TypeError: Cannot read property 'msie' of undefined"
Below is the link for my page.
http://creativated.com/thetest/index.html
Please help me find the rootcause.
Regards
Creativated Dev
Your museutils.js script uses deprecated method .browser()
You still can add it as plugin jQuery browser plugin

Slick slider console error

I am currently getting this console error from slick slider:
Uncaught TypeError: b.$list.prop is not a function
I am using this slider on three different sites -all implemented the same exact way. It was working on one of the sites until one day it just went blank. The error I get is on slick.min.js Has anyone else run into this problem? Does anyone know what this error is? Thanks in advance!
UPDATE: Here's a dev site that has the issue: http://dev.semananews.beta.lionheartdms.com/ With #Radiance suggestion, I loaded slick.min.js at the end and it now displays the image but the slider doesn't work still. I now get this console error
Uncaught TypeError: a.type is not a function
Check if you have added the external js files correctly. According to me the error is occurring because the compiler is not able to find the function which you are using
Did you check your jQuery version? Slick requires jQuery 1.7 to function properly. (https://github.com/kenwheeler/slick#dependencies)

Nivo Slider not working with wordpress

All of a sudden the nivo slider on one of our clients websites is not showing up at all: www.bedehouse.org
I have tried all sorts but cannot see why its stopped all of a sudden? We have not done any updates to wordpress or any of its plugins recently.
I can see using chromes "inpect element" feature that there is an error: "Uncaught TypeError: $(...).nivoSlider is not a function" but have no idea what it means.
Any helps or pointers in the right direction would be massively helpful.
You're loading two versions of jQuery. One is the copy WordPress is loading and the second is another.
Both are different versions (WP is loading 1.8.3 and you're loading 1.8.2). WordPress loads jQuery in noconflict mode and does not allow the use of the $ shortcut.
Remove the jQuery 1.8.2 call that you made and change all instances of $ to jQuery and try it.

edgePreload.js conflicting with jQuery.ScrollTo

I am using Edge animate for a header on my webpage. I am trying to incorporate the slide effect from page to page utilizing the jQuery.ScrollTo plugin courtesy of Ariel Flesler. The problem is that when I include the
<script type="text/javascript" charset="utf-8" src="spolightest_edgePreload.js"></script>
the slide effect stops working. I have narrowed it down to this file so I know that this is causing the problem. Any one ever deal with this problem? Does anyone know a better way to accomplish the slide effect in a webpage. It is quite a large amount of javascript to include here, so here is my site that I am trying to make this work on. You can view the script there.
www.premierentertainmentevents.com
I've tried to call the javascript files in different order, including the hosted jquery library from google, include the jqueryscroll.js in the edge preload file..
I'm at a loss. Something is conflicting with something else and I have no idea what.
Any ideas are greatly appreciated. Thank you
One thing I can see from your page is that the scripts include order isn't correct right now.
You are including jquery after the adobe edge's includes, so that in the console I can see the errors:
Uncaught ReferenceError: jQuery is not defined /spolightest_edge.js:2
Uncaught ReferenceError: jQuery is not defined spolightest_edgeActions.js:8
I know you tried different things, but please include jquery above anything else so maybe I can see if other errors occur.

Categories

Resources