Issue including elFinder and JQuery UI - javascript

I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...

Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>​
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});​

have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)

Related

Meteor.js how to get rid of that amount of JS includes?

I'am a beginner in meteor.js, so know I'm trying to optimize meteor app.
I noticed that there are a lot of includes in page.
Anybody knows how to get rid of them?
here it is:
<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.4.2.3%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%223lv5c21c0ikr9qpyaa9%22%2C%22autoupdateVersion%22%3A%22e07242d68a165ae640e730c0dd787691b4268550%22%2C%22autoupdateVersionRefreshable%22%3A%22f4f9f237151a8c4325bd029b5e7eceb5b2797974%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>
<script type="text/javascript" src="/packages/underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c"></script>
<script type="text/javascript" src="/packages/meteor.js?hash=e3f53db3be730057fed1a5f709ecd5fc7cae1229"></script>
<script type="text/javascript" src="/packages/meteor-base.js?hash=a4d07a6b394e56bbe6ccc773c95e7cdb3434960d"></script>
<script type="text/javascript" src="/packages/mobile-experience.js?hash=8ded3e69a3e367f321ab9a2b52e3ecdd2661a365"></script>
<script type="text/javascript" src="/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe"></script>
<script type="text/javascript" src="/packages/modules.js?hash=fff25e49208022bdf509af1c4e5fade57e29f302"></script>
<script type="text/javascript" src="/packages/es5-shim.js?hash=adc3c6270d5697523fe2a72e73428390b7eba83a"></script>
<script type="text/javascript" src="/packages/promise.js?hash=33f3b940f94952cb3a44d500099467511da0b575"></script>
<script type="text/javascript" src="/packages/ecmascript-runtime.js?hash=d0c1e87c070810a617a5853c970ab05284650255"></script>
<script type="text/javascript" src="/packages/babel-compiler.js?hash=a9546d4e245cfe40b406e08d40bf106241f01683"></script>
<script type="text/javascript" src="/packages/ecmascript.js?hash=370a8752194bcf73be7fffa3635715d0fbf7853d"></script>
<script type="text/javascript" src="/packages/base64.js?hash=0053489bb30bb5c0e3545df151f83e41150344b0"></script>
<script type="text/javascript" src="/packages/ejson.js?hash=0f17ced99d522d48cd8f8b2139167fd06babd969"></script>
<script type="text/javascript" src="/packages/id-map.js?hash=c7aea8dfa2bf46ff2ae0aa6c6cf09e36abc61d07"></script>
<script type="text/javascript" src="/packages/ordered-dict.js?hash=bacdd1852075630a01f7de783e5e8e8aa8541cdc"></script>
<script type="text/javascript" src="/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef"></script>
<script type="text/javascript" src="/packages/babel-runtime.js?hash=cd7adc00903a7005bb7fbad73ca0c3986be427d1"></script>
<script type="text/javascript" src="/packages/random.js?hash=31dadb9d3427506dd30dc50f5c898837e69e739b"></script>
<script type="text/javascript" src="/packages/mongo-id.js?hash=345d169d517353f8146292b4abd24061721f8b26"></script>
<script type="text/javascript" src="/packages/diff-sequence.js?hash=15014d7b1e11c05111a386992e684ab1d3cc4158"></script>
<script type="text/javascript" src="/packages/geojson-utils.js?hash=b204c7d4caf119e6883522fb87c6cce060724bf0"></script>
<script type="text/javascript" src="/packages/minimongo.js?hash=66cc6ab213289f154f49d61566dba8ff9dfc33b2"></script>
<script type="text/javascript" src="/packages/check.js?hash=63d7478b74cadc04d378bc2266ea8bd1bf6849d8"></script>
<script type="text/javascript" src="/packages/retry.js?hash=1e409617b538ff3e2b0238b15e45b3380c51a224"></script>
<script type="text/javascript" src="/packages/ddp-common.js?hash=d42359bcace6c66ac90e2782193494253ee68155"></script>
<script type="text/javascript" src="/packages/reload.js?hash=628b069673bffbc7390ba84ece8809c8c88c2eed"></script>
<script type="text/javascript" src="/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379"></script>
<script type="text/javascript" src="/packages/ddp.js?hash=25dc3f428447c81620c91c4245dbc6e4f7d32fb7"></script>
<script type="text/javascript" src="/packages/ddp-server.js?hash=1beefbc7bd033ea687e7ab8fbd5694df072662af"></script>
<script type="text/javascript" src="/packages/allow-deny.js?hash=c9344ef36901e05cbb58a8485e17433dac946bdc"></script>
<script type="text/javascript" src="/packages/mongo.js?hash=c4281c0ff989ebee020f59f5a7b0735053cea5f7"></script>
<script type="text/javascript" src="/packages/blaze-html-templates.js?hash=6e8335ce66460e45f00da73c7497654c5e26e236"></script>
<script type="text/javascript" src="/packages/reactive-var.js?hash=ec712fa3ae588c4a1e7017f0bb4507c725391225"></script>
<script type="text/javascript" src="/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad"></script>
<script type="text/javascript" src="/packages/standard-minifier-css.js?hash=cfe82682f4394d3ffc6335555c1f9f3f73294507"></script>
<script type="text/javascript" src="/packages/standard-minifier-js.js?hash=041bab58c8a89172eaab795deb5d96e38b64ec37"></script>
<script type="text/javascript" src="/packages/shell-server.js?hash=6ff1313e4bf7618e577eb2604a580b2ea9b7631f"></script>
<script type="text/javascript" src="/packages/deps.js?hash=7313f5a2685c6c2c673c78c15c8ce86ff59ab0c9"></script>
<script type="text/javascript" src="/packages/observe-sequence.js?hash=7657a09b18583bf0e90cc7b86aa029572767a87f"></script>
<script type="text/javascript" src="/packages/htmljs.js?hash=1ac878018eee6c53ed1375dc7ee75fc6865666ae"></script>
<script type="text/javascript" src="/packages/blaze.js?hash=9d08dd7dde99958947679827a947134cdf2e4f12"></script>
<script type="text/javascript" src="/packages/ui.js?hash=039c55a98376abd03d9d8cd4100895861b897643"></script>
<script type="text/javascript" src="/packages/spacebars.js?hash=ebf9381e7fc625d41acb0df14995b7614360858a"></script>
<script type="text/javascript" src="/packages/templating-compiler.js?hash=a71883cdec50e95ca135291415990753ed6d57fc"></script>
<script type="text/javascript" src="/packages/templating-runtime.js?hash=c18de19afda6e9f0db7faf3d4382a4c953cabe18"></script>
<script type="text/javascript" src="/packages/templating.js?hash=c2cf38de06efb47f67affb2dff9320e5eef33893"></script>
<script type="text/javascript" src="/packages/iron_core.js?hash=eb27a7eaa0318536b619a36fbd2c9d45cd833bc9"></script>
<script type="text/javascript" src="/packages/iron_dynamic-template.js?hash=7644dc7260de827ef1e361a75159fcc8af9fc074"></script>
<script type="text/javascript" src="/packages/iron_layout.js?hash=b2030df3beb941a1eb0eeaf4d68c7f4c145ec14a"></script>
<script type="text/javascript" src="/packages/iron_url.js?hash=ef0d02430901394d674ecc46d12f8d3c557e31c0"></script>
<script type="text/javascript" src="/packages/iron_middleware-stack.js?hash=e5ffae14128fa7f2aa1e3c04bb343146e1dfec09"></script>
<script type="text/javascript" src="/packages/iron_location.js?hash=1a6ee647a94fae1d34d1b5074ec4dfebfe6f1bd3"></script>
<script type="text/javascript" src="/packages/reactive-dict.js?hash=6e313616fd3cbca06ed28d63ffd0164d2a78d804"></script>
<script type="text/javascript" src="/packages/iron_controller.js?hash=eb63ea93809dcd3a8f40ad258e0997969a4d3ebc"></script>
<script type="text/javascript" src="/packages/iron_router.js?hash=017cbcf91efe3e433391e5dcfa2f6ae06a124b46"></script>
<script type="text/javascript" src="/packages/sacha_spin.js?hash=ddf0981d5d15b5595b1d93642b2710ed3b1c7763"></script>
<script type="text/javascript" src="/packages/stylus.js?hash=dcbbc27dc6329f453854e5b19bd0f8aefa82fb05"></script>
<script type="text/javascript" src="/packages/session.js?hash=821b0746e602b3be69538d299d6866e222121b54"></script>
<script type="text/javascript" src="/packages/twbs_bootstrap.js?hash=2ee228e6c80c1d9a4b1e67e10006f8a5a425ddda"></script>
<script type="text/javascript" src="/packages/ddp-rate-limiter.js?hash=457af847f89d207a6ca630c56f06d2a3af3a414c"></script>
<script type="text/javascript" src="/packages/localstorage.js?hash=0e2106503b232ac80073b6e8ef206e988c5aca5b"></script>
<script type="text/javascript" src="/packages/callback-hook.js?hash=e15ed8aa52e7c647efd9f4854e8a0fe4e40808fc"></script>
<script type="text/javascript" src="/packages/accounts-base.js?hash=dfba72beacc01e72b0f8fb3d7770c95ac774f2b8"></script>
<script type="text/javascript" src="/packages/anti_i18n.js?hash=8960dc7613ff1467b213e4ed2dec27fb491d232b"></script>
<script type="text/javascript" src="/packages/sha.js?hash=04013281f0c21857cac3458d88a0dd86b20109ba"></script>
<script type="text/javascript" src="/packages/srp.js?hash=85fa5b3bc1440273f8fa5125df5443c09f337567"></script>
<script type="text/javascript" src="/packages/accounts-password.js?hash=6d4e41828e1dfcc45ff74267779a4e5ecdcd9eda"></script>
<script type="text/javascript" src="/packages/ian_accounts-ui-bootstrap-3.js?hash=e27c97032efae26b11dd04146509e767d9194a4d"></script>
<script type="text/javascript" src="/packages/webapp.js?hash=3026d4501b6e3076a0aea1f7628466ebbe004a29"></script>
<script type="text/javascript" src="/packages/livedata.js?hash=7cf1831a60b48e304b054aee1ae0f7e38ff35d09"></script>
<script type="text/javascript" src="/packages/hot-code-push.js?hash=2e864a0bdd0d5f686115099f8c48eb6c866b5b14"></script>
<script type="text/javascript" src="/packages/launch-screen.js?hash=2f56943306c7e900ed9f4d894b87f534ebffeaeb"></script>
<script type="text/javascript" src="/packages/autoupdate.js?hash=1fd9cf3472adaa6887170d88ab5ea1ddabf695fa"></script>
<script type="text/javascript" src="/packages/global-imports.js?hash=5b2fa358214a42aa3d898f1904a07f63ced7fb52"></script>
<script type="text/javascript" src="/app/app.js?hash=d41b18152b7ec04d24415a8fbfbc9932f2cbd1bf"></script>
<script type="text/javascript" src="/packages/service-configuration.js?hash=42ac9ae8eb44f3e73762f9cb0003410397021984"></script>
</body>
( page loades 6secs for first time , too long )
Thnak you!
When you will build your production version, Meteor will automatically bundle all scripts into a single file.
You can simulate the effect by using the --production flag, e.g. meteor run --production.
During development, Meteor does not bundle the individual scripts to avoid performing too many operations at each file change.

Jquery conflict issue

I am using many js file in my header file as shown below
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
I am getting error as below.
$(...).live is not a function in
$("#reset").live('click',function(){
findproject (line 925)
SyntaxError: syntax error
<script type="text/javascript">//<![CDATA
$(...).validate is not a function
So, what the issue. I am not getting exact way. validation functality is not working
You need to put core jquery lib at the top as this is required to resolve dependencies of other jquery library-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
Also .live() is not available with this version, you should use .on()
Instead of using .live() use .on() because .live() is deprecated since Jquery 1.7 and removed after Jquery 1.9+ versions and try reordering your Jquery file as shown :-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Use on instead of live:
$("#reset").on('click', function () {
// ...
});
Firstly, you need to include jquery.js first in the page, as other script will rely on it:
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"></script> <!-- < First -->
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
Secondly, live has been removed from the latest versions of jQuery. You need to use the delegated version of on() instead.

simple midi.js Player example

I have been looking all over, but I can not seem to find a simple Player example for midi.js http://mudcu.be/midi-js/ .
The Player example is so complex I cannot get it to work in my page....What am I missing?
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
<script type="text/javascript">
MIDI.Player.loadFile("start.mid",MIDI.Player.start);
MIDI.Player.start();
</script>
You missed some imports. For a midi player, you should use the script tags from the demo-MIDIPlayer.html file.
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- jasmid package -->
<script src="./inc/jasmid/stream.js"></script>
<script src="./inc/jasmid/midifile.js"></script>
<script src="./inc/jasmid/replayer.js"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
Also, you need to load the plugin, before you can start playing a file.
window.onload = function () {
MIDI.loadPlugin({
callback: function() {
MIDI.Player.loadFile("start.mid", MIDI.Player.start);
}
});
}

Packing all CSS/JS links into an included PHP file?

After years of using spaghetti code to write my PHP projects, I have opted to switch over to using Code Igniter just to get some experience with a MVC Framework (Yeah, I know its dying but Laravel/Composer blew brain).
I have a site theme I purchased years back and decided to use it while experimenting with creating Views. The particular theme has a massive amount of JS links though due to not being optimized but rather just showing all features.
Is there any issues with just placing all of the Header content into a PHP file and then including it into the the actual View file?
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/spinner/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/uniform.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autosize.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/chosen.jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="js/plugins/tables/datatable.js"></script>
<script type="text/javascript" src="js/plugins/tables/tablesort.min.js"></script>
<script type="text/javascript" src="js/plugins/tables/resizable.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>
<script type="text/javascript" src="js/plugins/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.elfinder.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/charts/chart.js"></script>
This is possible for your local files. Of course you need two php files - one for your css and one for your JS.
Here is an example
<?PHP
header("content-type: application/javascript");
$all_your_js_ressources = array(
'libs/foo.js',
'libs/bar.js',
'modules/foo.module.js',
'modules/bar.module.js',
'plugins/foo.plugin.js',
'plugins/bar.plugin.js',
'main.js'
);
foreach ($all_your_js_ressources as $filename) {
readfile( $filename );echo "\r\n";
}
?>

Adding multiple js files in the header

I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try

Categories