Custom JavaScript in 'MediaWiki:Common.js' is not working - javascript

I fresh installed MediaWiki on my own server (latest version)
I tried adding some JavaScript code to MediaWiki:Common.js
In localsettings.php, $wgAllowUserJs is set to true
I also tried adding the JavaScript to User:Admin/vector.js and User:Admin/common.js
I cleared cache/cookies, used different browsers, JavaScript enabled, tried different computers
The JavaScript code does not work at all. I viewed source and it's not there.
<!-- BEGIN Tynt Script -->
<script type="text/javascript">
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('cAe5WESDOr4BZUacwqm_6r');Tynt.i={"ap":"Read more:"};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- END Tynt Script -->

Do not include <script> and </script> on the *.js page - it will be included as a separate JS file, not inline in the HTML page.
Note that you don't need $wgAllowUserJs for javascript pages in the MediaWiki namespace, only for ones in the User namespace. (There is a separate setting called $wgUseSiteJs for enabling scripts in the MediaWiki namespace, but it is on by default).

Related

$ is not defined with jQuery

When I use the jQuery.js, it says that $ is not defined. Following is my code, and I have tried the solutions, like adding the tag for jQuery first in HTML, change the logic of my code. However none of them work for me.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/wow/wow.min.js"></script><script>new WOW().init();</script>
<srcipt src="js/manific-popup/jquery.magnific-popup.min.js"></srcipt>
<script src="js/custom.js"></script>
custom.js
$(function(){
$("#work").magnificPopup({
delegate: 'a',
type: 'image'
});
});
Checklist for $ is not defined:
Open the console and check if Jquery file is loaded. The file may not be available due to slow connection, proxy setting, firewall setting etc.
Make sure that the Jquery file is not edited (not applicable when using CDN).
Make sure that you don't include Jquery twice. You may have use a custom version of bootstrap or other plugins that contains another version of Jquery inside their codes.
Make sure that your JS code is not above the Jquery implementation.If you have JS codes which runs as soon as loading (Not after DOM ready etc.), You have to move Jquery implementation in top of your document.
Make sure you have not typed type="text/javascirpt" instead of type="text/javascript". (Not applicable in your case)
View page source and make sure that jquery implementation is not removed by server side codes like response.clear
Make sure your default scripting language is javascript. Otherwise you have to redefine script language by type="text/javascript"
$ is not defined can be solved by downloading the full jquery file and not the minified version.
Use this version and make sure that you have added it in your html.

Javascript for Responsive Menu in Wordpress

sorry if this is a basic question but I'm having trouble figuring out how to use a Javascript/jQuery script in my website. (If this is well documented and I just don't know the right terms, please share what to look for - I've had no luck yet online with what I know.)
I'd already designed a site with static pages, it just didn't have a blog. So I put Wordpress in for one of the pages, and figured out how to add in the HTML/CSS design for my existing site's menu using the header.php and footer.php files. However, my jQuery script that's supposed to load when the page is resized in order to change the menu design is not working.
I pasted the <script type="text/javascript" src="jquery.min.js"></script> code in the <head> part of the file, adjusted the body tag to <body onresize="myFunction()" <?php body_class(); ?>>, and added the "myFunction" script to the footer.php file, above the </body> tag. Above function myFunction() { I also have window.onload=myFunction(); which isn't working either - so no matter what size the page is loaded at or what size it's changed to the menu is unresponsive.
When I tried adding an enqueue code block to the functions.php file it broke the page entirely, giving a 500 error.
Any advice would be hugely appreciated!
Check that the path you specify to the jQuery library is correct. In your script tag src="jquery.min.js is a relative path. This means that the file jquery.min.js is in the same directory as your html/php/template according to your src path.
I would recommend using a CDN. You won't have a relative path, need to load your jquery files, and you'll benefit from browser caching if other pages/sites have loaded the same files.
3x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
When you add resources such as scrips and style sheets to WordPress you should enqueue them using the functions wp_enqueue_script() and wp_enqueue_style().
Doing this ensures that your scirpt/style is only included once, allows you to declare dependancies, and (in the case of scripts) allows you to add it to the footer should you require/desire.
You can find more information on these functions in the Codex -
wp_enqueue_script()
wp_enqueue_style()
In conjunction with these functions, you should use the wp_enqueue_scripts action, ensuring that your scripts styles get enqueued at the correct time.
So for example, you should place something similar to this in your functions.php file. Because jQuery already exists within WP, you don't even need to specify a location, you just tell WP that you want to enqueue it -
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
function my_enqueue_jquery(){
wp_enqueue_script( 'jquery' );
}

Optimize CSS Delivery with head.js for Google Page Speed fail

My page templates have a assets javascript array with assets list of css, js to use in that page, eg.:
<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>
with head.js (loaded asynchronously), load assets list of page:
// head.core code - v1.0.2
// head.css3 code - v1.0.0
// head.load code - v1.0.3
head.load(assets);
now, Google Page Speed on mobile tab (not on desktop) says Optimize CSS Delivery of my.css
but my.css is loaded asynchronously from head.js loaded asynchronously.
What am I doing wrong?
Optimize CSS delivery need not necessarily mean to load them asynchronously alone. It could also mean that CSS may be bloated and it has class that may not be used to render Above the fold or not on this given page itself.
When developer using tool minify their CSS, this happens where in all CSS across pages are bundled together and is bloated!
One way to handle is use CSS inline that required to render the Above the fold and move rest of the CSS to bottom of the page. If not you can try to use Google Apache or Ngnix page speed plugin. https://developers.google.com/speed/pagespeed/module/

Including html fragments as modules

I'm trying to organize my website in a modular way using a server side include system. The idea is that every module will have it's own css and own javascript and will only be loaded once included on the page - so any page not having the module wont load that modules css/js either.
I've done it like this:
header.html
-----------
<!-- header start -->
<link rel="stylesheet" href="css/header.css">
<header class="module-header">
<div class="links">
links...
</div>
</header>
<script src="js/header.js"></script>
<!-- header end -->
footer.html
-----------
<!-- footer start -->
<link rel="stylesheet" href="css/footer.css">
<header class="module-footer">
<div class="links">
links...
</div>
</header>
<script src="js/footer.js"></script>
<!-- footer end -->
and then on the index.html:
<!DOCTYPE html>
<head>
<title>Modular page</title>
</head>
<body>
<!--#include virtual="html/header.html" -->
<!--#include virtual="html/footer.html" -->
</body>
</html>
This works fine, and since the scripts are loaded after each module the content is guaranteed to exist before running the scripts. Css is loaded just before and makes sure it will have a nice layout.
However - I've run into some issues with my solution:
In case I were to include a module several times, like for example a product.html, which will be repeated say 20 times - I would have the css and js files included also 20 times. Not good.
Generally I've seen css being included in the head tag, and js in the end of the body. Will having them all coming as the document is being built up induce any issues?
Those includes can be exchanged with any include, php, asp or jsp... this is using apaches SSI.
Is the whole idea going in the wrong direction? I'd imagine this for development setup, but having some kind of smart nodejs rhino script that loads the page - finds the loaded scripts and css, concats and minifies and adds as single includes for production.
To overcome issue of including js or css for times, you should include that files in top of the file in which you gonna include and not inside that included file. Means your product.css/js should be removed from that and should be placed in your index.html or header .html for once
including same js for times may stop your javascript so make sure that they are not conflicting each other
Use a javascript module system. Javascript AMD modules requirejs to load javascript increamently is a very good option. requirejs.org is a very good place to start.
For your context use
//inside header.html
require(['header.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
footer
//inside footer.html
require(['footer.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
Now comes the problem of CSS loading in a modular way. Requirejs CSS plugin is also available.
Now once you start using this kind of system, the script loading happens asynchronously using javascript. So the scripts arrive a little late in the screen. Even the css arrives a little late. So if you are writing global event handler like window.onload= func(){}, these are going to fail as most of your javascript would not have loaded yet. If you are doing styling on top of CSS which was dynamically loaded that too requires to be done after CSS loading completes. Using !DomReader in requirejs is a good option. Someday I will write a blog which will discuss these in depth.
The smartness of minifying is there in requirejs as well. requirejs optimizer

Can i use javascript to prevent Loading the same script over and over?

Writing an application for a custom gallery, and all the script files are put in a resource folder inside each gallery folder-
is it possible to have a variable enabled that would prevent the page from loading its local JavaScript files but instead load from the main page's resource folder? trying to avoid having to hard-code it as well.
esentially all i really want is for my script files to be able to have a variable starting path- IE
(script src="(path)load.js" type="text/javascript")(/script)
where path is either blank "" or main main site- "http://www.site.com/resources/"
some of the files are CSS files so im not sure the class method would work well-
also- is there a way to refer to the root of a site? similar to using ../ but just to get the root html path.
More Info-----
The layout i have is that each gallery made is a separate folder- (for example, photography, painting, drawings, etc- would all be separate folders). They each would contain their own resources withing their folder. this is so i can just upload 1 gallery to a site and everything would be packaged nicely. But- if im running multiple gallery on one site- as with a portfolio site, each page is loading its own set of resources, which is probably not a great idea.
The resources are - thumbnails, images, xml( which are all specific to individual gallery) but then they also each have a couple javascript files for functions, a css file, and a few images that make the gallery maneuverable(arrows and the like).
I just want to be able to have the scripts which are loaded in the header- load from the root site resource folder if there are multiple gallerys
you can put all the code under a single class name e.g. Mydata.yourvariable
and then check ..
if (Mydata) { //your script has already been loaded }
it's similar to what jQuery does with $
Check out Javascript file dependencies - Selective load resource files & prevent duplicates Also check out this http://toscawidgets.org/documentation/ToscaWidgets/require_once.html
Perhaps you could try something like this:
in index.html (or another html file) you do:
<html>
<head>
<!-- use this if you need custom location, omit for the default one -->
<script type="text/javascript">
var GALLERY_PATH = "/gallery/";
</script>
<!-- ------------------- -->
<script type="text" src="/gallery/gallery.js"></script>
</head>
<body>
...
</body>
</html>
gallery.js:
var GALLERY_PATH = GALLERY_PATH || "http://mysite.com/default-gallery-location/";
document.write('<script type="text/javascript" src="' + GALLERY_PATH + '/js/_gallery.js"></script>')
document.write('<link rel="stylesheet" type="text/css" href="' + GALLERY_PATH + '/css/gallery.css">');
...
This way you easily include all files you need with the 1-liner and all files are loaded once. Hope it helps, of course if I understood the problem correctly ;)
If you found too much hard to handle it with javascript, you can do from server. That depends if the problem is the double call, or the Kb download resource used.
On the last case you can simply enable some cache driver to your web server, like Varnish or MemCache. Once you put a cache you have not to worry about double file loading anymore.
If you want to avoid lot of loads from the same javascript script, you can add a local counter then put 1 when it has loaded once. You will edit the initial call function to test if it's currently loaded, then avoid.
If you have lot of js files, and just wanna avoid calling the same resource twice of more, use session cookie to store the counter.

Categories

Resources