Javascript plug-in doesnt appear on drupal - javascript

i want to put a soundcloud music player (http://stratus.sc/) on my drupalgardens page. i added an external source javascript library and uploaded a js file on the system as it says on the pluging website. all this tru the administration website of drupalgardens. When i check the sourcecode of my webpage it appears like the pluging is on the header. But it doesnt work, i cant see it. i activated all the jquery functions.
bit of sourcecode on header where the pluging seems there:
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript" src="http://NAMEOFMYSITE/sites/NAMEOFMYSITE/files/js/js_PRNQJr2GPf-FrbaSuV5IDQ1l6Lfby6e79KpPOUTf5kI.js"></script>
link:
http://bit.ly/10nyAHV
Any suggestions?
Note : The player im talking about is NOT the one that can be seen under the rotating banner. the one im talking about its supposed to be globally on the webpage at its seem on the pluging oficcial webpage

For one you're getting this console error: "Uncaught SyntaxError: Unexpected token < "
Not sure how that script is getting added but just removing the script tags may clear it up.
Even if the frame errors mentioned by KG are unrelated, you have to go clean that all up.
Your script should also be loaded after jquery. Since it looks like you have js aggregation turned on, I don't really know how to determine if drupal is loading things correctly. You can just tell your script to load in the footer instead of header if you're unsure. The links below explain how to do that.
Here are some javascript related resources for Drupal. They sometimes expect things to be handled differently.
The plugin is dependent on jQuery. By default, Drupal 7 loads jQuery 1.4. You may need to use the jQuery Update plugin to use 1.5, 1.7 or 1.8
Drupal Community docs about javascript:
http://drupal.org/node/756722
Drupal javascript API:
http://drupal.org/node/751744

I had a similar issue. Some reasons for a not working player are:
For some reason $ is not known (although jQuery is included). I replaced '$' by 'jQuery' and everything worked fine. That means use jquery(document).ready(... instead of $(document).ready(... and jQuery.stratus({.. instead of $.stratus({...
There is a typo on the stratos.sc web site. It should read $.stratus not $stratus (or jQuery.stratus, see previous hint).
Check that the source stratus.js and the initialisation code is included.
Mixture of https and http might be a good guess as reason for problems, but actually it works (I just tried it). If you can't find the problem, try to use a JavaScript debugger and check the error logs first!

Related

How to avoid '#' sign expansion in `vega#3`

In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?

How can I make the Topbar extension work with the newest MediaWiki?

I run a MediaWiki site which uses the Topbar extension. I recently upgraded the installation to the bleeding edge version from MediaWiki's master branch: version 1.28.0-alpha (91e56cc).
Afterwards, the Topbar extension no longer works:
Usually, the topbar div is not inserted at all.
Occasionally, the topbar div appears but the links are nonfunctional.
The latter issue may be a problem with my CSS (I do not know), but the intermittent behavior concerns me. So the first order of business is to make sure the topbar div at least appears every time.
This extension is just a small javascript that is supposed to run when the page loads, to add a chunk of HTML near the top (<div id="mw-writh-topbar" ...>). It does so using a jQuery function.
Unfortunately, I am not really a web developer, so even this simple routine is a bit over my head.
Here's what I do know:
There are no 500 server errors, no overt problem with the PHP.
At some point early in my investigation, the developer console sometimes complained about Uncaught ReferenceError: jQuery is not defined, but I cannot reproduce it anymore now. Research vaguely suggested it could be because the extension does not use the new ResourceLoader mechanism, so I tried to migrate Topbar to use the ResourceLoader mechanism (via maintenance/convertExtensionToRegistration.php, and then wfLoadExtension('Topbar') in LocalSettings.php) but it did not seem to make any difference.
The Topbar hooks seem to be called, because css/Topbar.css gets added to the page. But I have no clue whether js/Topbar.js ever runs, and if so, what happens.
So: how can I debug this?
You need to convert the code to use ResourceLoader - currently the extension adds the code using OutputPage's addScriptFile(), and just assumes jQuery will be available by the time it runs. Starting with MediaWiki 1.26, everything loads asynchronously, so this doesn't work, and thus the need to convert it to the new system.
Instructions for doing so are here:
https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Registering
Two notes:
Since MediaWiki 1.25, extensions are supposed to use the so-called "extension registration" instead of following the above manuals, but this might require more work and expertise.
Ugly hack warning: you can ignore all of this, and simply wrap the code in the JS file using RLQ.push( function(){ /* All of the code here */ } );. This shoves it all into the ResourceLoader's queue, so it will load after jQuery is available. I do not recommend this, but show it here for completeness' sake.

How to add jQuery file to navigation website?

I am working with this demo: http://cssdeck.com/labs/setting-active-states-on-sticky-navigations-while-scrolling/
For some reason when I try to recreate it the Java part making the navigation work isn't coming through on my version here: http://cssdeck.com/labs/ydsxavxy
So far I saved out index.html, style.css, and flip.js and attempted to link the CSS and JS in the index.
How can I get my version working like the demo? How is a Java file included outside of CSSDeck? I am not too familiar with how CSSDeck takes the HTML, CSS, and Java and combines them into one page preview.
The version of jQuery you are loading is not correct.
The example that works uses 1.8, and you are loading 1.4:
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
You can easily know this by looking at your browser console and seeing what errors it's throwing. In your case, the error is as follows:
TypeError: $(...).on is not a function
This usually means your jQuery library is not defined or not supported by the code you're using.

Cannot get jQuery to work on site

Okay, I have been working for quite some time on a website for a friend..
My coding skills are .. questionable, and I've been having quite a few problems.
Currently the jQuery on my site simply stopped working, I could not find the reason, and I have done everything I could to try to get it to work.
( I have followed countless guides all over the internet, for troubleshooting etc. and I still cannot get it to work)
-EDIT-
I have moved all the files to the top of the code.. Yet the problem persists.
Sincerely yours, Malmoc
You are trying to use jQuery code before jQuery.js is loaded.
jQuery.js must load before any dependent code or plugins. Use a browser console and look at errors thrown on page load. "$" is not defined error is a quick indication of loading problem with jQuery
Think of it this way. jQuery library contains a number of functions, including defining "$". If these functions or "$" aren't already available when you call them, they are undefined and errors get thrown and your code won't work
Once you have jQuery script tag before other code, you may still run into complications if you recently added prototype library which also uses "$" alias. This can cause conflicts but there is a workaround using jQuery.noConflict()
Very odd, I suggest you set the source to jQuery to the website here:
http://code.jquery.com/jquery-1.8.2.min.js
Seems to be quicker response time, and in your source code you appear to link jQuery twice, that may be causing some issues.
Your $ is also getting overwritten by another script. Best that you use jQuery.noConflict() for this
http://api.jquery.com/jQuery.noConflict/
And then you can put your code in a closure like this:
(function(){
var $ = jQuery;
// jQuery code using $
})(this);
Looks like you're mixing mootools and jquery. Please resolve your conflict between jquery's $ namespace and mootools' $ namespace.
google "jquery no conflict"

'$ is not defined' in code following jQuery include

I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").

Categories