To call all js files in just one line on my header I am currently using
function alljs(jsfile) {
var src = document.createElement("script");
src.setAttribute("type", "text/javascript");
src.setAttribute("src", jsfile);
document.getElementsByTagName("head")[0].appendChild(src);
}
alljs("path/to/my/jsfile1.js");
alljs("path/to/my/jsfile2.js");
alljs("path/to/my/jsfile3.js");
then all I have to do is put this on my header:
<script type="text/javascript" src="my/path/all.js" ></script>
but recently I have to include jquery files in my system
I notice that calling a jquery file by adding
alljs("path/to/my/jqueryfile1.js");
to my all.js file doesn't work...
I have to do a second line of <script> on my header just to call the jquery file...
My question is: is there a similar way to call all jquery files in just one file?
Related
In yii2 I have put all my js code in 1 file using yii2-assets-auto-compress plugin, including jQuery lib. Loading this file is async to speed up page load. But, if there are forms on the page, yii adds yiiActiveForm() at the end of </body>. So, the error is jQuery is not defined.
How to manage this problem? Firstly, I can make call yiiActiveForm() manually from script.js, but how to turn it off automatically load at the end of the body? Generally, that's not convenient, because there might be other scripts that append js code. Maybe someone knows how append js code with this yii2-assets-auto-compress plugin?
<script src="/assets/js-compress/script.js?" async="async"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#w0').yiiActiveForm([],[]);
});
</script>
</body>
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
You should either load Jquery outside your compressed scripts inside the head.
Or load the script inside the <head> of the document means inside the layout file either using script tags
<script type="text/javascript" src="/path/to/compressed.js" async="async"></script>
or using
<?php $this->registerJsFile('/path/to/compressed.js',['aync'=>'aync'])?>
if you are using AssetManager to load the script file
Then load it like this
public $js = [
['js/compressed.js','async'=>'async','position' => yii\web\View::POS_HEAD],
];
Also, you should configure the asset manager to not load the core script jquery so that it does not load jquery twice.
'assetManager' => [
'bundles' => [
'yii\web\JqueryAsset' => [
'sourcePath' => null,
'js'=>[]
],
],
],
HERE is a good read.
I have a js file called menu.js in the following path on my webhost
public_html/oc-content/themes/bender_black/js
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
This code is a responsive menu, I want it to be reciprocated on all my pages. I therefore tried to call it from my header.php file which is located in
public_html/oc-content/themes/bender_black
Here is part of what I put in header.php
<head>
<script type="text/javascript" src="js/menu.js"></script>
</head>
The menu is supposed to release a drop-down on smaller screens however nothing happens. Am I calling the js properly?
How can I fix this?
Script tags placed in the browser are loaded by the browser. You therefore need to provide a DocumentRoot relative path to the js file
<script type="text/javascript" src="oc-content/themes/bender_black/js/menu.js"></script>
It needs absolute path like:
<script type="text/javascript" src="http://mywebsite.com/oc-content/themes/bender_black/js/menu.js"></script>
But in Osclass case, you can register javascripts by internal PHP functions, which look like this:
Register the script:
osc_register_script('menu', osc_current_web_theme_url('js/menu.js'), 'jquery');
Enqueue:
osc_enqueue_script('menu');
If it uses jQuery, make sure you call the file after jQuery has been called.
Iam using load() for loading external html file.
$("#header_section").load("header.html");
$("#sidemenu_section").load("side_menu.html");
Here, HTML file is loaded and css also loaded but script file is not loading in the page
<script src="js/utility.js"></script>
I tried to declare the above script file inside the head and inside the body. Both are not working.
Check your relative path to the utility.js file and make sure to load juery.js library before load utility.js file.
and finally try this,
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utility.js"></script>
to load the utility.js file.
I think you forget to add jquery.min.js file. use below code.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/utility.js"></script>
</head>
jQuery may only execute your code with the type attribute set to "text/javascript", per this bug filed a long time ago:
http://bugs.jquery.com/ticket/3733
Try this ...
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
In that case, the scripts are stripped and not evaluated/run.
Actually I was trying to get the concept of the module pattern. Here I have simple code which I used to type directly on the page. It was fine until I tried to separate the actual code from the HTML file and kept only a single line of code on the main HTML file:
<body>
<script type='text/javascript' src='module.js'>
// module.JS file was here ....
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
</body>
File module.JS
var module = (function() {
return {
show:function(keyCode){
document.body.innerHTML+=(String.fromCharCode(keyCode));
}
};
})();
You'll need to have two <script> elements for this.
Use one to "import" your external module and another for the script you want to embed directly on the page:
<script type='text/javascript' src='module.js'></script>
<script type='text/javascript'>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
For more information, you can check out this MDN documentation page. Here is an excerpt talking about the src attribute (emphasis added):
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. Script elements with an src attribute specified should not have a script embedded within its tags.
A script block referring to an external JavaScript source should be separate and any script inside of it does not get executed. So you need two separate script blocks one for the external JavaScript file and the other for your script.
<script src='module.js'></script>
<script>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
Folks,
I am new to wordpress. I am converting a html template to wordpress.
THE script is this:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
And the javascript functions are:
<script>
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
var obj = window;//$(window);
console.log(obj.length);
console.log("selector" in obj);
</script>
<script>
function toCell(px,py,ok) {
$("#tab1").find('tr').eq(py).find('td').eq(px).addClass((ok)?'testok':'testko');
};
$(window).load(function() {
$("#div1").html($("#div1").html()+' '+nice.version);
$("#div2").html($("#div2").html()+' '+navigator.userAgent);
toCell(1,1,nice.detected.ismozilla);
toCell(2,1,(nice.detected.prefixstyle=='-webkit-'));
toCell(3,1,nice.detected.isie);
toCell(3,2,nice.detected.isie10);
toCell(3,3,nice.detected.isie9);
toCell(3,4,nice.detected.isie8);
toCell(3,5,nice.detected.isie7);
toCell(3,6,nice.detected.isieold);
toCell(4,1,nice.detected.isopera);
toCell(5,1,nice.detected.isios);
toCell(5,2,nice.detected.isios4);
toCell(0,8,nice.detected.cantouch);
toCell(3,8,nice.detected.hasmstouch);
toCell(1,10,nice.detected.hastransform);
toCell(1,11,nice.detected.hastranslate3d);
toCell(2,10,nice.detected.hastransition);
toCell(2,11,!!nice.detected.transitionend);
toCell(3,10,nice.hasanimationframe);
toCell(3,11,nice.hascancelanimationframe);
toCell(1,12,nice.detected.hasmousecapture);
toCell(2,12,((nice.detected.cursorgrabvalue!='')&&(nice.detected.cursorgrabvalue.substr(0,3)!='url')));
});
</script>
I know about registering, enqueuing but how will it can be transformed into wordpress theme.
Explain
Technically you can include JavaScript files in the <head> just like you would on a normal website. but registering and enqueuing is the preferred mechanism for WordPress.
You could also put your <script> directly in the header.php which would make it available on all pages. However, I would strongly suggest you make it an external script.
Depending on how you enqueue the the file, it will be added to your site header or footer with wp_head() and wp_footer() respectively.