Using Joomla's baseurl to import javascript - javascript

I am trying to use Joomla's basurl to link to my javascript files like this:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/js/music.js"></script>
My code highlighting though seems out of whack and I am wondering if anyone knows how I should be writing this please?
if I use it in the css link everything looks fine there:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/music/css/nav.css" type="text/css" />
Many thanks!

From looking at your include css and include js code it seems like your template is called music.
Therefore, you need to have your template's name as part of the path. Instead of /templates/js/ use /templates/music/js/
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/music/js/music.js"></script>

Related

How to link a JS file to a PHP Page Template?

I have written a PHP page template and would like to link the needed Javascript from an external file. However, when I do this I get a syntax error: Uncaught SyntaxError: Unexpected token < referencing the doctype header <!DOCTYPE html>. If I put the script in the PHP file directly then it works.
Obviously this is making my file messy, so how can I do it without breaking the script? Also, since this script is only needed on this one page I don't want to put it in my footer to load on the whole site.
I have tried to use <script type="text/javascript" src="staff-test.js"></script> in my PHP file to reference the JS file, with no success. The PHP and the JS files are in the same folder, so the src path seems to be correct.
The PHP:
<?php
get_header();
include('staff-test.css');
?>
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="staff-test.js"></script>
<?php
get_footer();
Using this code I get a syntax error. I would like to keep the JS in a separate file, but seems to only work when I put it directly in the PHP file.
Using include('staff-test.css'), you are asking your web server to interpret the CSS file as PHP. This is why you are getting a syntax error.
You want to do instead:
<link rel="stylesheet" type="text/css" href="staff-test.css">
Try this
<?php
get_header();
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.css">
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.js"></script>
<?php
get_footer();
?>
You may need to register the script in your functions file. Check out the WordPress reference for registering a script.
https://developer.wordpress.org/reference/functions/wp_register_script/

How to add lines before each and every </head> in multiple HTML Page site?

I hope all are doing well.
How to add respo_style.css before closing </head> in multiple(in my case there is 65 pages) html + PHP page.
is there any best way to add dynamically
<link rel="stylesheet" type="text/css" href="respo_style.css" />
using code?
In my case i have one config.php which is called in every page.
NOTE: Without add or change any other files. Is this possible to add the lines dynamically using jQuery or JavaScript.
Simple things is just add extra additional file in existing without opening each and every files.
I'm sure there are a lot of ways but here's an explanation for the fastest/easiest implementation IMO.
For code that is repetitive, you should store that code in one file and call it using PHP's include_once function. However in order to use PHP in your files, you would need to use use .php extension instead of .HTML (assuming you files are .HTML) for your webpages.
Here's an example:
<head>
<?php include_once("repetitive_code_here.php"); ?>
</head>
If you run ob_start(); at the beginning of your script, then you can call ob_get_contents() to get the page and replace </head> with your stylesheet.
$string = ob_get_contents();
$link = '<link rel="stylesheet" type="text/css" href="respo_style.css" />';
echo str_replace('</head>', $link . '</head>', $string);
ob_end_clean();
or instead of ob_get_contents pass the funtion to ob_start();
function callback($buffer) {
$link = '<link rel="stylesheet" type="text/css" href="respo_style.css" />';
return str_replace('</head>', $link . '</head>', $buffer);
}
ob_start('callback');
but you will need to call ob_end_flush(); at the end.
This will work. I have style.css in all file. so i can include the respo_style.css in style.css using this code #import url("base.css");
You should do something like this:
page.php (write this in all 65 pages)
<?php
require_once('includes/head.php'); //Assuming you put head.php in a folder called "includes" inside the root
?>
//Then the content of the page
And head.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="respo_style.css" />
</head>

Link Javascript in codeigniter

I am using php web framework codeignter, I would want to access my link on Javascript, I've tried
<script type="text/javascript" src="<?php echo "assets/main.js;?>"></script>.
Autoload url helper is enabled but it doesn't load my Javascript.
Thanks!
simple and clean way is here:
create a helper class:
create a utility_helper.php class in helper folder and only put the below code in the utility_helper.php
code to put: (with <?php ...below code here... ?>)
function asset_url(){
return base_url().'assets/';
}
open your autoload.php and make sure you include utility in autoload['helper'] array:
$autoload['helper'] = array('url','utility','file','form','etc...');
important:
now create assets folder at the same location where you have your system and application
folders.. and put your all css and js files and folder in assets folder
now you can link your css and js in view like below:
<script src="<?php echo asset_url(); ?>js/jquery.js"></script>
<link href="<?php echo asset_url(); ?>css/style.css"/>
<link rel="icon" href="<?php echo asset_url(); ?>img/favicon.ico" type="image/x-icon"/>
GOOD LUCK :)

How to put freichat script in as smarty template file

I have How freichat chat script in php and want to integrate with custom php based site with smarty as template engine (View ). How to put that script in smarty template so it works?
Here is code for it...
<script type="text/javascript" language="javascipt"
src="http://server/freichat/client/main.php?id=<?php echo $ses;?>&xhash=<?php echo freichatx_get_hash($ses); ?>">
</script>
<link rel="stylesheet"
href="http://server/freichat/client/jquery/freichat_themes/freichatcss.php"
type="text/css">

Multiple jQuery Instances and jQuery plugins generate Errors

I am using two jQuery plugins in my site color box popup plugin and coda content slider
1- http://colorpowered.com/colorbox/
2- http://www.ndoherty.biz/demos/coda-slider/2.0/
It seems that both conflict with each other. I have added the required JS file in this order
<!-- jQuery library -->
<script src="<?php bloginfo('template_url'); ?>/colorbox/jquery-1.5.1.js"></script>
<!-- Coda Slider -->
<link type="text/css" href="<?php bloginfo('template_url');?>/coda/codastyle.css" rel="stylesheet" />
<script type="text/javascript" src="<?php bloginfo('template_url');?>/coda /js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/coda/js/jquery.coda-slider-2.0.js"></script>
<!-- jQuery Colorbox Popup -->
<link media="screen" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/colorbox/colorbox.css" />
<script src="<?php bloginfo('template_url'); ?>/colorbox/jquery.colorbox.js"></script>
Independently both plugins work fine. But when used together I get different errors in Firebug. This is the error I am getting right now
jQuery.easing[jQuery.easing.def] is not a function
[Break On This Error] return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
These plugins definitely conflict each other.
Is there any solution to this ? Can use multiple jQuery instances?
The coda slider plugin is a bit old (jQuery 1.3.2), with an external jquery.easing.js that...well, frankly screws up more recent jQuery versions.
I think by far the easiest solution here is to go with another plugin for your coda slider effect, there are several options out there, for example: http://jqueryfordesigners.com/coda-slider-effect/ (demo here)
...or, if you're not tied to that effect specifically, there are lots of other sliders out there.
OK I have solved my problem , I just moved <?php wp_head(); ?> at start of <head> tag in in Wordpress header.php and it worked .. strange but it worked for me :)

Categories

Resources