I need to import whole css files available in a specific folder (css)
Is there a method to do it without importing file by file?
need to import assets/css/* ?
<link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/>
<title>Untitled Document</title>
<style>
#area {
max-width: 600px;
}
</style>
</head>
Edit: Late answer it seems and you have accepted an answer. Had I known, I would not have submitted this. I was busy testing and formulating it.
As I stated in a comment, you can use PHP's glob() function to achieve this, along with a foreach loop. Here is what you can do:
foreach (glob("*.css") as $css) {
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"$css\">\n";
}
Which in HTML source will produce something similar to:
<link type="text/css" rel="stylesheet" href="css_1.css">
<link type="text/css" rel="stylesheet" href="css_2.css">
<link type="text/css" rel="stylesheet" href="css_3.css">
Depending on where your files are located, you may need to change the path to those files.
I.e.:
foreach (glob("path/to/css/folder/*.css")
Placing the PHP for it inside <head></head>
For example:
<!DOCTYPE html>
<head>
<?php
foreach (glob("*.css") as $css) {
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"$css\">\n";
}
?>
</head>
<body>
<div id="css_1">Style 1</div>
<br>
<div id="css_2">Style 2</div>
<br>
<div id="css_3">Style 3</div>
</body>
</html>
I think there is no way you can import css files from a folder by doing assets/css/*. But you can concatenate files from css folder into one file and then minify this css file and import it.
You can use build tools like gulp to accomplish this thing. Check this out https://www.npmjs.com/package/gulp-minify-css
No. For one thing, the client would have no idea what to request (it can request only one file per http request, whose name it needs to know). You can do it in four ways:
Concatenate all of your CSS files into one file, then link to that file.
Have a script that will concatenate all CSS files into one response, then link to that script
Have a loop in your template going over all the CSS files, which will issue one <link> element per file.
If you only have several CSS files than do not change, you can just write them all out by hand.
Related
How do I create an external file for my side menu?
<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
C++
C#
Go
Java
JavaScript
PHP
Python
Ruby
Swift
Currently I have these kind of links in every file and the code is just getting too much. Is there a way to create an external file for the menu items?
I tried this but the problem is class="active". I want to highlight a menu item when my menu item is in index.php
I Know how to achieve this when my menu is in each individual HTML file but how do I do that when it's in external PHP file ?
Index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css">
<link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
<h1> Others</h1>
MS Excel
MS PowerPoint
MS Word
WordPress
</div>
</body>
</html>
Main file
<?php include('index.html'); ?>
You should NOT use javascript to include your menu .
you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
or you can use pre processors like Gulp :
##include('./template/header.html')
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
or Pug or Grunt and ......
About your problem in comments . lets say you are in your main folder and you have this 3 files :
index.php
header.html
homepage.html
footer.html
index.php should be like this :
<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>
and then in your browsers you should open index.php .
** don't use index.html and index.php in the same time .
if it didn't work . you should get error in your index.php file .
when your code works . i suggest you to use readfile() instead of include . if your another files are just html and not have any php codes in it .
As pointed out by Abolfazl Ghaemi :
You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
The Gulp/Grunt solution is fine but I'll stick with the <?php include(); ?> solution for your problem.
Does the hosting machine speak PHP ?
If browsers can read HTML just fine to give you a webpage, they can't read PHP. Instead, PHP need to be executed by something on the hosting machine and you will need a PHP interpreter for that like Apache.
If you didn't already, I strongly recommend you to install it or even a full AMP stack.
PHP in HTML files won't work
You need to make sure your file using PHP instructions are .php files. Otherwise, the code in your <?php ?> tag (the PHP code) won't be interpreted at all.
Make sure your main file is a .php file.
Are you calling the correct file ?
Also, you need to be sure the file name you are including is correct. The content as shown in your question is
Main file
<?php include('index.html'); ?>
but your file is actually index.php not index.html.
HTML is prettier with CSS
If you want to "highlight" the item with active class, you will need CSS. You can quickly add CSS in your file with a <style> tag. See the example below.
<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
I'm trying to understand why I can't load captureMouvement.js whereas I can load verifieFormulaire.js. Both of them are stored in the same file as my PHP file. I need to use PHP because I really want that page being dynamic.
I'm also running this site on localhost.
Fact : I could call the script when the page was a HTML file.
I've tried to call the script that is already stored on another server. It did not worked. I also tried to move down to , it did not worked either.
I also tried to call the script using ;?> but this failed too
<head>
<title>Projet</title>
<link href="projet.css" type="text/css" rel="stylesheet" title="projet.css" />
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '<script src ="projetweb/captureMouvement.js"></script>';?>
</head>
This should call captureMouvement.js, either from local file or from tp-ssh1.dep-informatique.u-psud.fr.
I opened google chrome, so I could check for javascript console. I got this error message : net::ERR_ABORTED 404 (Not Found)
However, I did not get this error for verifieFormulaire.js
Please, help me.
If the .js files are in the same directory as the HTML page (it doesn't matter if it's a PHP page on your server; it's an HTML page from the browser's perspective), then using no path is correct. So remove the extra script tags and the path on them, and there's no need to use PHP to output a static string:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '</script>';?>
Those changes give you this:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
If that works for verifieFormulaire.js but not for captureMouvement.js, then there are really only a few possible reasons:
There's a problem with the permissions on captureMouvement.js; make sure they match verifieFormulaire.js.
There's a typo in the name (perhaps you're using a case-sensitive file system and the filename is capturemouvement.js or in some other way subtly different).
captureMouvement.js isn't in the same directory.
captureMouvement.js is getting loaded, but failing to parse/run because of a syntax error. Check your web console for errors. (No, you said you get a 404 for it.)
hello genius programmers. can you help me to combine this all css files into one file
<link type='text/css' rel='stylesheet' href='css/header.css' />
<link type='text/css' rel='stylesheet' href='css/body.css' />
<link type='text/css' rel='stylesheet' href='css/sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/footer.css' />
i want to combine all css file into one.
ex:
<link type='text/css' rel='stylesheet' href='css/all.css' />
You can do that easily in PHP. And a very formal method of doing and including is that. Most of them are following up this method alone.
Create a PHP file called styling.php and you can include all the css files over to that PHP file and then you can include it into your file.
styling.php
Under this file you can have the following code.
<link type='text/css' rel='stylesheet' href='css/header.css' />
<link type='text/css' rel='stylesheet' href='css/body.css' />
<link type='text/css' rel='stylesheet' href='css/sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/footer.css' />
And in the PHP file you can call like this with the help of include()
include() - The include statement includes and evaluates the specified file.
Files are included based on the file path given or, if none is given, the include_path specified. If the file isn't found in the include_path, include will finally check in the calling script's own directory and the current working directory before failing. The include construct will emit a warning if it cannot find a file; this is different behavior from require, which will emit a fatal error.
If a path is defined — whether absolute (starting with a drive letter or \ on Windows, or / on Unix/Linux systems) or relative to the current directory (starting with . or ..) — the include_path will be ignored altogether. For example, if a filename begins with ../, the parser will look in the parent directory to find the requested file.
include() will only produce a warning (E_WARNING) and the script will continue
<html>
<head>
<?php include('styling.php'); ?>
</head>
<body>
</body>
</html>
And when you view the pagesource it will display all the links separately.
Some More for clear understanding of include()
Solution One:
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
Solution Two
Assume we have a standard footer file called "footer.php", that looks like this:
<?php
echo "<p>Copyright © 1999-" . date("Y") . " W3Schools.com</p>";
?>
To include the footer file in a page, use the include statement:
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
Hope so you can understand better with my explanations.
A rough 'n' ready way in which you could combine all the stylesheets into one would be to create a php script like below and use that in the html when you load the stylehseet.
<?php
/* all.php */
header( 'Content-Type: text/css' );
$css=array( '/css/header.css', '/css/body.css', '/css/sidebar.css', '/css/footer.css' );
$output=array();
foreach( $css as $file ){
$output[]=file_exists( $file ) ? file_get_contents( $file ) : '/* error: '.$file.' cannot be found */';
}
echo implode( PHP_EOL, $output );
?>
In the html, include the php file rather than a .css file
<link rel='stylesheet' href='/css/all.php' />
In JavaScript there are some solutions to automatically run these kind of tasks. You can install Gulp or any other tasks runner and specifically for CSS concatenation these package gulp-concat-css.
Install:
$ npm install --save-dev gulp-concat-css
Once it is installed you can add a task on your gulpfile.js:
var gulp = require('gulp'),
concatCss = require('gulp-concat-css');
gulp.task('default', function() {
return gulp.src('css/**/*.css')
.pipe(concatCss('css/all.css'))
.pipe(gulp.dest('dist/'));
});
Execute:
$ gulp
Than your html will look like these:
<link type="text/css" rel="stylesheet" href="/dist/css/all.css" />
I have downloaded 2 packages from the internet. One is used for making the items of a list, show in pages, and the other one is a jPlayer for .mp3 files.
The next page/previous page buttons for the pages of the list, have the same name with the next song/previous song buttons of the mp3 player. They are both called jp-next and jp-previous.
These are the files the List-Paging:
<link rel="stylesheet" href="http://shiro-desu.com/scr/itemsperpage/style.css">
<script type="text/javascript" src="http://shiro-desu.com/scr/itemsperpage/jquery-1.8.2.min.js"></script>
<script src="http://shiro-desu.com/scr/itemsperpage/jPages.js"></script>
These are the files the jPlayer:
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jplayer.playlist.min.js"></script>
<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
The way i see it, changing some names in the List-Paging files will do the trick.
Problem is that i have absolutely no experience with javascipt,jQuery, i kindly request for help on this matter.
The only problem is that next page/previous page background, is affected by the background of the next song/previous song.
I have uploaded a sample on jsfiddle to show you the problem.
--> http://jsfiddle.net/5svd5mnh/
One way of avoiding this problem is to use :
<?php echo'<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css"
rel="stylesheet" type="text/css" />'; ?>
in your page, in the <body> part only when you actually use the jPlayer.
So that the 2 .css files will never be imported at the same time.
This however means that you won't be able to use a jPlayer and a List-Paging in the same .html page.
I have a group of CSS imports as like:
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
PS: I don't want to write any code belongs to web server specific.
Javascript imports: no.
CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
Go with LazyLoad! https://github.com/rgrove/lazyload/
It's a very small js (less than 1kb) that takes care of resource loading for you.
Download the package and save on your js folder. Then you would probably want to do this:
<script src="js/lazyload-min.js"></script>
Then for javascript files:
<script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {
alert('all js files have been loaded');
});
</script>
Css:
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
You can Import CSS like this:
Create a new CSS cssImports.css and add there lines
#import url('/css/reset.css');
#import url('/css/visualize.css');
#import url('/css/datatables.css');
and relate it in your homepage as:
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.
for css:
<style>
#import url('/css/styles.css');
</style>
for js you could try something like
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
Yes just copy all the code and place in into a new file in the order than you would like it to run.
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
I'm not recommend do that because performance issue, but if you want the way, you can do that:
For CSS yes its possible, in cssImports.css you can put:
#import url(/css/reset.css);
#import url(/css/visualize.css);
#import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
for (i = 0; i < jsLinks.length; i++)
{
var jsE = document.createElement('script');
var url = jsLinks[i];
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
}
I didn't test my code, But I hope my idea is explained well.
Best
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
This is now possible as follows with HTML Imports which are in W3C draft
<link rel="import" href="import.html">
import.html
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers