Vimeo API - Froogaloop. $f is not defined - javascript

used the api to add a button that plays 1 vimeo video on a page.
I added the Froogaloop plugin into my plugins.js file and am calling out to it on my main.js file.
Here's my code
ready = function(player_id) {
var playButton, player;
player = $f(player_id);
playButton = $('#playButton');
return playButton.on('click', function(e) {
e.preventDefault();
player.api('play');
});
};
$f(document.getElementById('player')).addEvent('ready', ready);
The problem I'm having is that any script after this will not run. The error JSHint gives me is '$f' is not defined
I've tried defining ($f = '')this, but it simply breaks the functionality (which makes sense why that would break it). Has anyone run into this issue before? Do you know of a fix?
Also note that the above code block works. It just has to be the very last thing in my main js file or else everything after it would break. It also won't pass JSHint. I get two '$f' is not defined. errors.
Any help would be greatly appreciated.
Thnx!

I was having this problem because I was including my script before including froogaloop.js.
It seems that $f is defined on that js.

If the error is just with JSHint, you can add the following comment to the top of the file to suppress the warning:
/*global $f:false */

You must connect the library
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

As drcord pointed out in his answer to this similar question:
You are either loading jQuery after this code or not at. You need to include jQuery before this script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>

Related

Calling nested div class in Javascript. Revised code not working in WordPress

Need help.
I am creating a div inside body>div>div .
Reference: Creating div in a nested class using javascript
Here's a link to my jsfiddle https://jsfiddle.net/41w8gjec/6/
Here's a link to the site https://bastioul.com/index.php/category/portfolio/ so you can see how the div is nested
Here's the wordpress classes.
class="archive category category-portfolio category-3 custom-background custom-header-image layout-two-column-default no-max-width"
>
class="hfeed"
>
class="site-content"
Here's my actual javascript code
function bastioul() {
var dirty = document.querySelector('.category-portfolio>.hfeed>.site-content');
var grime = dirty.appendChild(document.createElement('div'));
grime.id = "portfolionav";
}
if (window.addEventListener) {
window.addEventListener('load', bastioul, false);
} else {
window.attachEvent('onload', bastioul);
}
No error messages in jsfiddle. I don't know enough about coding as far as php/javascript/jQuery is concerned to go through wordpress js files to see if something is negating my code. Not exactly sure of the root cause of my problem because it works in jsfiddle, and there is no console errors when i inspect page. I tried to research about the problem, but it is a pretty specific problem.
Not exactly sure what else to try.
Okay I solved the issue by editing the functions.php for the wordpress theme I was using.
This is my php code.
wp_register_script( 'portfolionav', get_template_directory_uri() . '/portfolionav.js', array(), true );
wp_enqueue_script('portfolionav');
wp_footer();
note
I had a issue with this code because it automatically selects a library.
I used browsers inspect console error to show me what library was being called, and it was /themes/primer.
I uploaded my javascript to this library.
And now my script is running correctly on my Wordpress site.
I was not aware I had to add script by calling it in my php file when using Wordpress.

Jquery conflict in Wordpress after move into another hosting

i was looking for some solution it but i didnt find anything.
I think its jquery conflict. I have installed smart-slider, and after move my Wordpress into another hosting its just stopped working. My browser shows me: "undefined its not a function", and my code (generated by plugin ofc):
<script>
njQuery(document).ready(function () {
njQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
I was trying to change it into $.('#next.. or jQuery('#next, but it still broke.
Any ideas?
You can change the code to be a simple jQuery. And not the njQuery.
<script>
jQuery(document).ready(function () {
jQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
Otherwise it won't work. Or else, just make sure that the server has a variable or a script file to handle the njQuery too.

Add javascript file from wordpress admin page

I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.

Style.Display = "None" Not working in Google Apps Script HTML Service

I've got a fairly simple javascript function running in my HTML service template that is supposed to set the display of a div to "none." However, whenever I include the following line:
document.getElementById("timesheet").style.display = "none";
I get an error in my browser: "Cannot call method 'f___' of undefined." When I take it out, no errors.
Can someone please tell me if I'm missing something?
I know this is a decade old, but Google Apps Script doesn't know what "document" is by default. Debugging the function that contains this line of code will verify that
AFAIK (at least for editing sidebars), I don't think there's a direct way to edit the DOM like you can in a typical webpage
The best you can do I think is to use the functions provided here
Just use jQuery instead.
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){
$("#whateverYouAreClickingIDHere").click(function () {
$("#timesheet").css('display','none');
});
});
</script>

Javascript Not Working On Page?

I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...

Categories

Resources