I am creating a new Joomla template and have run into a problem with linking to external .js files.
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/main.css">
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/FLpresentation.css">
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery-2.1.4.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLpresentation.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLajax.js"></script>
The Above code is included in the head tag and the CSS is working fine when I install my template into joomla. Everything looks how it should but all of my Jquery and Javascript code doesn't function. The only code that does is within tags on the index.php file.
Can anyone tell me what I am doing wrong? I have defined the files and folders in the templateDetails.xml and everything other than js is working fine despite me using the exact same method to link the CSS. Help me, I'm confused.
100% JS conflicts. Just check the console! You include the Jquery libary, but Joomla already comes with Jquery. Check the console for errors, check if you have Jquery in output HTML more than 1 time and migrate your code.
Also wrap your code like this:
(function($) {
$(document).ready(function(){
// START HERE FOR ON_DOCUMENT_READY
alert(1);
});
})(jQuery);
This reserve the $ for your Jquery code.
Use the JHtml::script method like in the example below:
$url = Juri::base();// pick the url for my joomla website
JHtml::script($url . 'components/com_revista/prefixfree.min.js');//here i'm using one file in my server, but you could put the url for your script like
"JHtml::script('http://urlforscriptsource/script.js');"
The code below add JQuery framework on your joomla extension:
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
JHtml::_('jquery.ui', array('sortable'))
;
Ps: Is better use JQuery() instead of $() in yours JQuery codes, this will avoid conflicts!
Related
I'm building a Wordpress site and for some reason I'm getting a 404 error for the style.css, although I've referenced the file in the header.php.
I'm not sure what I've done wrong and I'm struggling to figure it out. Any explanation or suggestions would be appreciated.
Below is the console error
EDIT - This is a picture my style.css which is in the directory of the theme
And here is how I've referenced the css file in the header.php -
<?php
/**
* The template for displaying the header
*
* #subpackage the-bespoke-harvest
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCo3e_2xea4jd7wMQ2c0IkQKRQ3NH3aZmY&libraries=geometry"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<section class="section-scroller">
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
</section>
Note - The other linked files in the head such as the google maps script & pingback are working fine.
You have not specify a valid path for css.
Replace this line with this wp code structure.
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
to
<link href="<?php echo get_template_directory_uri();?>/patterns/public/css/style.css" rel="stylesheet" type="text/css" />
I would recommend enqueueing your scrips and styles. https://developer.wordpress.org/reference/functions/wp_enqueue_style/
This best illustrates how you would do it:
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
You can still prioritise styles/scripts as well as version them.
(I’ll write the code once I get to a computer)
I've seen your problem and I suggest you go with this.
First, open that file in your browser.
Then check what path does this code return.
<?php
echo get_template_directory_uri();
?>
Then merge that together.
Suppose this code return.
localhost/wordpress
And your path style path is
C:/xampp/htdocs/wordpress/wp-content/theme/mytheme/something/style.css
Then remove c:/xampp/htdocs/wordpress
And create something like this
<?php
echo get_template_directory_uri();?>/wp-content/theme/mytheme/something/style.css
?>
This is the solution whenever you got some errors like this.
Thanks.
I develop a chat widget using php (chat.php) and want to add it into another php page (blank.php). chat.php requires script that I put in Javascript files outside.
So in blank.php, I included js files that chat.php needed.
<!DOCTYPE html>
<html lang="en">
<head>
<!--code-->
</head>
<body>
<div id='includedContent'></div>
<!--dependency for chat.php-->
<link type="text/css" href="http://localhost/chatbox/gplus/chat.css" rel="stylesheet" />
<link type="text/css" href="http://localhost/chatbox/gplus/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/chatbox/gplus/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/chat.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/moment.min.js"></script>
<!--end-->
<!--include chat.php-->
<script>
$("#includedContent").load("http://localhost/chatbox/gplus/chat.php");
</script>
<!--end-->
</body>
</html>
chat.php is loaded but the Javascript does not load for chat.php.
I also tried to use this and it works
<!--include chat.php-->
<?php
$chat = file_get_contents('http://localhost/chatbox/gplus/chat.php');
echo $chat;
//or by using - include './chat.php';
?>
<!--end-->
But I wonder if there is a solution using javascript so I can include chat.php into blank.php, and chat.php can execute the js script included in blank.php. I put the script in blank.php to avoid script conflict between widget and hosting page.
Thank you.
I think what you need to use is include statement in PHP. See this LINK.
Basic example on how to use:
For vars.php:
<?php
$color = 'green';
$fruit = 'apple';
?>
Included in test.php:
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
I want to use next PHP script to serve combined, pre-gzipped and minified JS and CSS files. source code is available here: https://code.google.com/p/compress/
There is a WAMP localhost with wordpress installed.
And what I have done:
added three files (jsmin.php, cssmin.php, compress.php) in child-theme's
folder;
added directory 'min' in child-theme folder;
created file 'compress_timestamp.php'
added code below into header.php (tried functions.php then tried first line
of header.php)
require_once('compress_timestamp.php'); //load timestamp created by compress.php module sets field $compress_stamp=unix_timestamp
if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false)
$gz='gz';
else
$gz=null;
echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL;
// the following scripts were combined into css_schedule
// echo '<link rel="stylesheet" type="text/css" href="CSS/menu.css" />',PHP_EOL;
// echo '<link rel="stylesheet" type="text/css" href="CSS/ThreeColumnFixed.css" />',PHP_EOL;
// echo '<link rel="stylesheet" type="text/css" href="CSS/sprite.css" />',PHP_EOL;
// echo '<link rel="stylesheet" type="text/css" href="CSS/iCal.css" />',PHP_EOL;
changed lines accordingly to child-theme and parent folders:
echo '<link rel="stylesheet" type="text/css" href="style.css" />',PHP_EOL;
echo '<link rel="stylesheet" type="text/css" href="../twentyfourteen/style.css"
What was missed and what is the right way to make it work?
And finally when all is done how to launch that script remotely on XAMP (VPS)?
There is a really good WordPress plugin, called JCH Optimize, that minify css and javascript. Its very easy to install. It has both a free and paid version that comes with a ton more features that can be used to speed up your wordpress site. They also support Joomla.
The support for it is really good too.
I'm tearing my hair out to find why Chosen plugin (http://harvesthq.github.io/chosen/) doesn't want to work. I have tried different things, such as calling the chosen plugin directly in jQuery, rather than in JavaScript as below, but none of it works. I believe I have called the libraries correct, and the stylesheets, yet none of the functionalities of the plugin are applied to the select boxes. It's probably a simple mistake that I've made somewhere.
This is my markup, it first calls the stylesheets. echo $page_htmlhead calls javascript libraries such as latest jQuery from Google API.
<head>
<!--[if lt IE 9]>
<script src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/html5shiv.js"></script>
<![endif]-->
<title>flyeuro.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Europe's favourite virtual airline!">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/img/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.css" />
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$(".chosen-select").chosen()
});
</script>
// ...rest of <head> code
</head>
Inside $page_htmlhead...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I finally then display the options for the user on a form...
<select class="chosen-select" name="depicao" data-placeholder="Departure Airport">
<option value="">All</option>
<?php
foreach ($airports as $airport)
{
echo '<option value="'.$airport->icao.'">'.$airport->icao.' - '.$airport->name.'</option>';
}
?>
</select>
This question already has answers here:
How to include all css kept in a directory?
(9 answers)
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 4 years ago.
When I want to include any new CSS file or any new JS file, I put it in the header as this
css file
<link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/index.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/footer.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/signup.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/contactUs.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/option.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/question.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/profile.css" />
js file
<script src=<?php echo URL . "public/Js/profile.js" ?>></script>
<script src=<?php echo URL . "public/Js/cell.js" ?>></script>
<script src=<?php echo URL . "public/Js/place.js" ?>></script>
<script src=<?php echo URL . "public/Js/ontology.js" ?>></script>
<script src=<?php echo URL . "public/Js/informativeObject.js" ?>></script>
<script src=<?php echo URL . "public/Js/question.js" ?>></script>
I want something like
<header>
include all css
include all js
</header>
Minify is a PHP library that will combine all your CSS / JS files into one. Does that help at all?
For CSS, you could use #import:
HTML with CSS:
<style type="text/css">
#import url('index.css');
#import url('footer.css');
</style>
Standalone CSS:
#import url('index.css');
#import url('footer.css');
Browsers include JavaScript as a #include AFAIK so there's no better way than including them all through <script> tags or by using Wintermute's example of a JS minifier.
Edit: JSMin by Crockford is a CLI utility that you can use if you want to work with it offline.
Assuming you've got an array of files (using the local filesystem path)
print "<style type='text/css'>\n";
showall($css);
print "</style>";
function showall($filelist)
{
foreach ($filelist as $fname) {
print file_get_contents($fname) . "\n";
}
}