We have a couple of pages that require special care, jquery-ui will be called from external scripts which are going to "somehow" be added to the head section of an article.
I've attempted with jumi, however it isn't the best choice(including a js in stead of php would render it in html body), the only way I could add a javascript file was by including a php file which would echo a , but as one would imagine, this isn't elegant nor efficient in terms of performance.
Another attempt was, in stead of echoing a script, I've tried using:
<?php
$document = &JFactory::getDocument();
$document->addScript( "path/to/jsfile.js" );
?>
but it didn't work as I've expected, it seems that joomla creates the head section before this php script has the chance of being executed.
I've also gave easy header a go, however, it seems that it will include the files in all articles, which I do not wish since it will have a pretty big impact in terms of bandwidth and possible javascript issues down the road.
I'm farily new to joomla so anything that would provide some flexibility is good as an answer.
If something isn't unclear, please ask, I will try to answer the best I can.
Please note that I'm using joomla 1.7 and php5.
Jumi uses the onAfterRender event (looking at the 2.0.6 plugin) - by this time I think the <head> tag has already been written out, in-fact the whole document is already rendered.
You could try getting the document body and then searching for the closing tag </head> and inserting the script link before it. Something like this:
$myJS = "<script type='text/javascript' src='http://mysever.com/my.js'>"
$content = JResponse::getBody(); // gets the html in it's ready to send to browser form
$hdPos = strpos($content, '</head>');
$hdPos += 7; //move position to include the <head> tag
$bodyLen = strlen($content);
$content = substr($content, 0, $hdPos) . $myJS . substr($content, $hdPos, $bodyLen);
JResponse::setBody($content);
NB: This is untested and I don't use Jumi these days but it should be close.
You didn't have to go through all this!
Go to: extensions -> template manager -> templates tab (its on "styles" by default) -> go to your template and click on "edit HTML". You'll be able to add your code directly in the header, and it will be loaded in all the pages.
A bit more elegant way is to define a function that does what you want in the header - and call it from the body of the specific article you want.
Related
I've read this article, which talks about loading a web page's critical CSS first, and then asynchronously loading other CSS assets once the page has rendered.
Is it possible to use PHP to work out what must be placed in the critical asset file? To my mind, elements like input, textarea, form, table etc, can be loaded later. It's the div, ul, ol, p, hx etc that usually make up the biggest part of the "above the fold" css. Maybe always load these first?
Apart from the most important elements, I'd think the properties that make up the shape of the website are the things that must be loaded first, then the backgrounds and other "paint".
Any good ideas to start with? I'd like to generate and automatically cache the results for website pages automatically and got that all set up. I want to take it a step further with the client-side loading performance, but without too much hassle and extra time during development, while making websites for clients. The framework should do the hard work.
I thought about some smart regexes that would sort it out, but what seems so hard, is the "prioritization"..
Stealing the example from your link. You would put your main styles (div, wrappers, p, images, or any styles for above the fold) in the head to load with the normal way. Once the page loads and runs the script it fires the script to load your css files.
<?php
$cssArray = array('file1.css', 'file2.css', 'file3.css');
?>
<script>
/*!
Modified for brevity from https://github.com/filamentgroup/loadCSS
loadCSS: load a CSS file asynchronously.
[c]2014 #scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS(href){
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head')[0];
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
ref.parentNode.insertBefore(ss, ref);
setTimeout( function(){
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
},0);
}
<?php
foreach($cssArray as $css) {
print 'loadCss("' . $css . '");'
}
?>
</script>
<noscript>
<!-- Let's not assume anything -->
<?php
foreach($cssArray as $css) {
print '<link rel="stylesheet" href="' . $css . '">'
}
?>
</noscript>
From experience, and best practice, all css calls should be located in your <head> and all script calls should be right before your </body>. All files will load asynchronously to a certain number based on your web server configuration file, normally around 5. Once those files, or one is free, it starts the next file(s)
Automation
This is a whole new host of problems.
Now you will have to load the file and have a set point to stop looking for tags, classes, or id's to check for (using an html parser).
Then you have to load and read your css files to pull out the classes that were found in the previous step.
Output the file to your filesystem in multiple files.
one for first load
others for the javascript method or load at bottom of page
Check the files on creation time, or modified, and remake as needed or call in if they are available
To me this option is two time consuming and can cause problems, and possibly load time decline, if not done properly or you have to process large files. Since most of this work will be done on the server, you wait to get the first byte of data will be longer then just serving them the traditional way.
Can anyone tell me what is the difference between including the js script file in the following two ways,
I made this inside system plugin in joomla and included the js file inside "onAfterInitialise" function.
1)
<script type="text/javascript" src="<?php echo JURI::base(); ?>/plugins/system/test/script/script.js"></script>
This works fine and including the js file correctly, But when I logged-in from the backend the font size from userlisting and listing from other extensions gets enlarged.This is not the issue in my js script.
2)
$document->addScript(JURI::root(). "plugins/system/test/script/script.js");
This works fine without any issues.
Can anyone explain what goes behind this.
Using the second method is simply using Joomla coding standards and adds your script in between the <head> tags.
There isn't much difference except for where the script gets imported on the page.
JURI::base() and JURI::root() are both the same. They both define the root folder for your Joomla site. If you are unsure which one to use, I would recommend using method 2, as it's always good to get used to Joomla coding standards.
You can see the source of addScript() :) Basicly, if you use first method, your srcipt will be added in the same place you wrote the code. Second method will add link to a inner table in $document and will be 'rendered' at the
<head></head>
section at the end of page processing.
I have a quick question here. Let say I have a view file myView.ctp in cakePHP and inside my view I have some javascript (which I have there for a reason). I know I can tell cake to put my javascript code into the header section of my page by using the scriptStart() and scriptEnd() blocks like:
<?php $html->scriptStart(array('inline' => false)); ?>
// My script code goes here...
<?php $html->scriptEnd(); ?>
The array('inline' => false) is what actually tells cake to put my script in the header. Now my question is this: How do I achieve the same thing for css codes (WITHOUT putting my css codes into an external file)? This techniques seem to only work for javascript codes.
Thank you
Ran into this article when I was looking to do the same thing. Turns out there is now (as of Cake 2.1) a slightly more modern way of accomplishing this using view blocks. To wit:
$styleTag = $this->Html->tag('style', $yourCSS);
// adds your stuff to the "css" block which is injected via "fetch" in
// the head section from the view's layout
$this->append('css', $styleTag);
P.S. Would be nice if there was a HtmlHelper::tag() equivalent for style blocks instead of merely the content, just for cleanliness. Oh well.
$css = $this->Html->tag('style', '/* my css */');
$view =& ClassRegistry::getObject('view');
$view->addScript($css);
The addScript() function on the view will append your script to the $scripts_for_layout var.
Edit: Comment reiterated something important I missed so I revised the answer.
We need to display the content of one single TYPO3 page in Habari.
It would suffice to retrieve the HTML, as styling (CSS) is done separatly.
However, we only want the HTML of the content elements - not the whole, fully rendered page.
How could we achieve that?
Does TYPO3 (or one of its plugins) provide a facility for that?
This can be done via a custom Typoscript template-record in the Typo3 backend that just outputs the content without any further HTML and or tags.
Putting something like this in the 'setup':
page = PAGE
page.config.disableAllHeaderCode = 1
page.10 < styles.content.get
Then make sure in the template-record it say's that it's a root-template, and that it clears constants and setup before this template. And put this record on the top most page (aka root).
Also make sure that you included the static template of CSS Styled Content. This can be done when editing the template-record inside Typo3.
You could do this in Habari using something like this:
$url = "http://your-typo3-url/";
$output = RemoteRequest::get_contents( $url );
$output will then be the HTML contents of the page. You can then use a combination of strpos() and substr() to pull the relevant HTML content you want, eg just the <body>
You can do this in one of your theme template files, the theme's theme.php file itself or even within a plugin.
You can then use Habari's native caching to cache the content too so you don't have to retrieve the Typo3 page with every page view.
BTW, You could use typo3_webservice fro that. It uses XMLRPC protocol, and quite easy to implement with PHP.
http://typo3.org/extensions/repository/view/typo3_webservice/current/
If jquery is added in globally used header.php across the site then How to stop to load jquery library only for those pages of site which doesn't need actually? If we can't use more than one header.
purpose of question is to not to penalize those page with slow loading which actually don't need.
Your site shouldn't need more than one global-header, if you opt to even use headers to begin with. If it does, just include jQuery on all pages. It's a small cached file, it won't hurt the browsing experience.
By using the google-hosted version, it may be the case that many of your uses already have it cached before they even reach your site.
I have been guilty of pounding my fist into the nail while asking everyone else to move the hammer that's in the way...
Why not tackle the problem from the other end and use jQuery to optimize the first load?
If you have big pages that are already taking a while to download, why not section off the less-performant areas and use $().load() to fill those in?
The page will load quicker (better user experience) and you don't have to be adding any additional processing to pages that don't need it.
Cheers,
-jc
assuming you are loading the jQuery file from a correctly-configured webserver (or from google's CDN), it will be cached and not re-downloaded on each page. Assuming a visitor will hit at least one page on your site that needs jQuery then you really won't gain anything by trying to remove it from loading on pages that don't use any javascript features from the library.
First, use the compressed jquery for production. It's much smaller. Second, IIRC, once jquery is downloaded with the first page, it will be cached and won't need to be retrieved from your server for each subsequent request.
Otherwise, if you really need to explicitly load jquery only on those pages that need it, you would have to have some way for the body of your page to tell header.php that it doesn't need to load jquery. If header.php is loaded before "body.php" then that's pretty hard to do without some fancy output buffering or such.
If you're using a templating system like Smarty you could have a conditional in the master page template to check a $loadjquery flag that you set in body.php before sending the whole page off to be rendered. But that's complicated too.
Your question is very general, some specific would be great, maybe even a link to the site. Personally if you are using a CMS I would try to make some sort of "flag" for that page, or if you are simply loading a page and then loading the header from that page, insert a variable before you load the header and use that as your flag for loading jQuery.
An example:
If a user wants to see www.mysite.com then the following file would be loaded: www.mysite.com/index.php with the following code:
<?php $needJQuery = true;
include('header.php');
echo 'content will go here';
include('footer.php'); ?>
header.php would include something such as this:
<?php if ($needJQuery) { ?>
<script src="/jquery/jquery-min-3.2.1.js" />
etc. for all the content that you need above/below.
<?php } ?>
For the pages that don't need jQuery loaded, you would either leave $needJQuery undefined or you would do as follows:
<?php $needJQuery = false; ?>
Hope this helps,
As stated earlier, modify the header file so it'll check for the presence of flag variable and only output the jquery headers if needed.
If you don't have the ability to modify the header file, you could load it with output buffering turned on and filter the output before it heads out to the client:
<?php
ob_start();
include('header.php');
$header = ob_get_flush();
$cleanheader = some_operation_that_removes_the_jquery_script_tags($header);
echo $cleanheader
?>