Welcome, Guest. Please login or register.
Did you miss your activation email?
May 26, 2012, 06:48:45 PM

Login with username, password and session length
Search:     Advanced search
Wollen Sie dem WebsiteBaker Team beitreten?
Nähere Informationen finden Sie unter hier und auf unserer neuen Webseite.
155549 Posts in 21714 Topics by 7760 Members
Latest Member: gx-world
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: moveCssToHead($content)  (Read 641 times)
crnogorac081
AddOn Development
*
Offline Offline

Posts: 1706
« on: June 30, 2011, 03:21:36 PM »
Could someone please direct me how this moveCssToHead($content) works ?

I tried but no luck.. How $content must be styled? and is there a way to include JS on simular way ?

Edit: could someone please post example code ?
« Last Edit: June 30, 2011, 03:28:38 PM by crnogorac081 » Logged
Wow, I coded something myself: PM Messanger Modul ,Searchbox with suggestions
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4884
« Reply #1 on: June 30, 2011, 03:53:40 PM »
Hello Ivan,
this new function looks in the content if some css is in there.
If yes, it will be put in the <head> section of the html page.

See:
[WB_ROOT]\framework\frontend.functions.php

Code:
<?php //
 $pattern1 = '/(?:.*?<body.*?)(<link[^>]*?\"text\/css\".*?\/>)(?:.*)/si';
 $pattern2 = '/(?:.*?<body.*?)(<style[^>]*?\"text\/css\"[^>]*?>.*?<\/style>)(?:.*)/si';

The only advantage of this function is, that it ensures that there is no css in body anymore.

Unfortunatley the css will be put right before the closing </head> tag.
This is inconvenient while using with most of jquery scripts, where in most cases you need to have css loaded before the jquery stuff.

Kind regards,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
crnogorac081
AddOn Development
*
Offline Offline

Posts: 1706
« Reply #2 on: June 30, 2011, 04:52:04 PM »
Hi,

here is a quick solution for this, you can load css right after <head> tag:
Code:
function moveCssToHead($content) {
// move css definitions into head section
$pattern1 = '/(?:.*?<body.*?)(<link[^>]*?\"text\/css\".*?\/>)(?:.*)/si';
$pattern2 = '/(?:.*?<body.*?)(<style[^>]*?\"text\/css\"[^>]*?>.*?<\/style>)(?:.*)/si';
$insert1 = array();
$insert2 = array();
if(preg_match_all($pattern1, $content, $matches)) {
$insert1 = $matches[1];
$content = str_replace($insert1, '', $content);
}
if(preg_match_all($pattern2, $content, $matches)) {
$insert2 = $matches[1];
$content = str_replace($insert2, '', $content);
}
$insert = array_merge($insert1, $insert2);
$insert = "\n<head>\n".implode("\n", $insert)."\n<";
$content = preg_replace('/<head>.*?</si', $insert, $content);
return $content;
}

previous code was inserting script before </head></body> and this one after <head>

so now you can load JS above and I think it should work without problems Smiley
Logged
Wow, I coded something myself: PM Messanger Modul ,Searchbox with suggestions
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4884
« Reply #3 on: June 30, 2011, 05:20:14 PM »
Hello Ivan,

thank you.

What I think, it would be much better (core wise) to combine this function
with the register_frontend_m odfiles() Function.
So CSS from Body would be moved directly to the the place where the function call
register_frontend_m odfiles("css");
is put in the index.php of the template.

Kind regards,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
crnogorac081
AddOn Development
*
Offline Offline

Posts: 1706
« Reply #4 on: June 30, 2011, 06:10:21 PM »
Another modification,

Code:
function moveCssToHead($content) {
// move css definitions into head section
$pattern1 = '/(?:.*?<body.*?)(<link[^>]*?\"text\/css\".*?\/>)(?:.*)/si';
$pattern2 = '/(?:.*?<body.*?)(<style[^>]*?\"text\/css\"[^>]*?>.*?<\/style>)(?:.*)/si';
$insert1 = array();
$insert2 = array();
if(preg_match_all($pattern1, $content, $matches)) {
$insert1 = $matches[1];
$content = str_replace($insert1, '', $content);
}
if(preg_match_all($pattern2, $content, $matches)) {
$insert2 = $matches[1];
$content = str_replace($insert2, '', $content);
}
$insert = array_merge($insert1, $insert2);
// $insert = "\n<head>\n".implode("\n", $insert)."\n<";
// $content = preg_replace('/<head>.*?</si', $insert, $content);
$insert = "<link $1 />\n".implode("\n", $insert)."\n";
$content = preg_replace('/<link (.+?) \/>(.*?)/si', $insert, $content,1);
return $content;
}

Now, it the css is not loaded after <head> tag, but after first <link .... /> tag. It is ussually the css of the template Smiley
Logged
Wow, I coded something myself: PM Messanger Modul ,Searchbox with suggestions
Luisehahne
Board Member
Development Team
*****
Offline Offline

Posts: 3147



WWW
« Reply #5 on: June 30, 2011, 08:43:06 PM »
In many modules you have following code:

Code:
// check if backend.css file needs to be included into the <body></body> of modify.php
if(!method_exists($admin, 'register_backend_modfiles') && file_exists(WB_PATH ."/modules/droplets/backend.css")) {
echo '<style type="text/css">';
include(WB_PATH .'/modules/droplets/backend.css');
echo "n</style>n";
}


and the style block will be set within the body tag. In my point of view not all styleblock combination are proofed.

Please create a Ticket on project side.

Dietmar
Logged
We are human beings - and nobody is perfect at all.
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4884
« Reply #6 on: June 30, 2011, 08:50:25 PM »
Quote from: crnogorac081 on June 30, 2011, 06:10:21 PM
Now, it the css is not loaded after <head> tag, but after first <link .... /> tag. It is ussually the css of the template Smiley
I like this one more.
Nice, Ivan.

Some day we should have a more sophisticated css/js inclusion as we do today.

In best case the moveCssToHead() function repair some inconsistencies with the W3C Validator.


BTW.
I am using OpF Dashboard to gain full control of js/css files.
Works like a charm.

Regards,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
DarkViper
Development Team
*****
Offline Offline

Posts: 1253
« Reply #7 on: June 30, 2011, 09:22:26 PM »
Quote from: Stefek on June 30, 2011, 08:50:25 PM
Some day we should have a more sophisticated css/js inclusion as we do today.
is planned for 2.9.1 or 2.9.2 (needs little mods in modules)

Quote from: Stefek on June 30, 2011, 08:50:25 PM
In best case the moveCssToHead() function repair some inconsistencies with the W3C Validator.
for this reason only the function is made.
Logged
Anleitungen lesen und selber nachdenken ist anstrengend...  Da lass ich doch lieber andere für mich denken...

In 1984:  Nineteen Eighty-Four is a unrealistic utopia!!
In 2012:  Nineteen Eighty-Four is a little piece only of our reality!!
crnogorac081
AddOn Development
*
Offline Offline

Posts: 1706
« Reply #8 on: June 30, 2011, 11:17:28 PM »
Quote from: Luisehahne on June 30, 2011, 08:43:06 PM
In many modules you have following code:

Code:
// check if backend.css file needs to be included into the <body></body> of modify.php
if(!method_exists($admin, 'register_backend_modfiles') && file_exists(WB_PATH ."/modules/droplets/backend.css")) {
echo '<style type="text/css">';
include(WB_PATH .'/modules/droplets/backend.css');
echo "n</style>n";
}


but does this work for frontend ?

and the style block will be set within the body tag. In my point of view not all styleblock combination are proofed.

Please create a Ticket on project side.

Dietmar
Logged
Wow, I coded something myself: PM Messanger Modul ,Searchbox with suggestions
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!
Impressum & Datenschutz | powered by WebsiteBaker. ©2004–2010 by Website Baker Org e.V. , all rights reserved | Legal Notice & Privacy Policy