Is it possible to create headerfile of javascript and css scripts ?

Question

I have no much idea about web programming, I am looking for some way to create header file for javascript and css whether its possible ?

here is scenario, assume I have 100s of javascript and css if I have to create html or php script everytime I have to put these line

<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
...
...
<script type="text/javascript" src="../src/jquery.100.js"></script>

<link rel="stylesheet" type="text/css" href="../jquery.1.css" />
<link rel="stylesheet" type="text/css" href="../jquery.2.css" />
...
...
 <link rel="stylesheet" type="text/css" href="../jquery.100.css" />

I want to create only one file which contains all javascript and css, and their path and then want to include it in html like this, I expect something kind of C

   include 'all_java_css'
   <html>
         <body>
           <p> all included</p>
        </body>
  </html>

If you have hundreds of separate files, you should be working on a way to combine and compress them server-side. — Pointy
– Pointy, Commented Mar 12, 2014 at 14:01
You already answered your own question. You basically make a file containing the code from your first block (containing all those <script> tags, as well as <style type="text/css"> tags [do NOT use <link rel="..."> tags please]. And then inside your PHP file you do a <html><head><?php include('that_file_file');?></head><body>...</body></hmtl> — Tularis
– Tularis, Commented Mar 12, 2014 at 14:05

Albzi · Accepted Answer · 2014-03-12 14:28:58Z

3

Use include() php function for this purpose, what you will have to do is.

Make a php file and put the scripts file into this file, and include that php file in your file where you need to include js files,

Suppose you made a php file example.php with js files.

example.php

<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>

home.php

//with this line you are including all above js files into home.php
inlcude(example.php);

edited Mar 12, 2014 at 14:28

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

answered Mar 12, 2014 at 14:05

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3304642 Over a year ago

if in case I am not using php then ? only html

almo Over a year ago

inlcude(exmaple.php); is PHP. But in this case you will still have to include your 100 files seperatly just it looks better because it is done in a seperate file.

Albzi Over a year ago

It's meant to be example.php, not exmaple.php. I've fixed it for the confusion (on @JohannesN's reply).

Albzi · Accepted Answer · 2014-03-12 14:19:58Z

1

First of all, if you can try and put as many of them files into one, that would be better. Instead of calling 100 of each, you could only call a few, making run times faster.

Also, add all this scripts to a .html or .php file for example:

<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>

and save it as header.html.

Then in your main file, you can do this:

<html>
    <head>
        <?php include('header.html'); ?>
    </head>
    <body>
        ...   
    </body>
</html>

You need to make sure that your main file is 1) a .php extension and 2) can actually run PHP.

Second of all, you need to make sure header.html is in the same directory as index.php or whatever the php file is.

If not, you can always use

<?php include('inc/header/all_java_css.html');?>

If you do not have PHP, you can do this: In the head:

<head>
    <meta name="add">
</head>

Then using jQuery:

$('meta[name="add"').load('all_java_css.html');

edited Mar 12, 2014 at 14:19

answered Mar 12, 2014 at 14:07

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

5 Comments

user3304642 Over a year ago

Should I include css in same all_java_css.html ?

Albzi Over a year ago

All css and javascript.

user3304642 Over a year ago

confused because in above comment tularis told that don't include link rel="">

Albzi Over a year ago

I'm not web savvy enough to know why that is. Maybe ask him? @Peter

Albzi Over a year ago

Thanbks, glad I could help @Peter

Community · Accepted Answer · 2017-05-23 10:25:03Z

0

CSS files can be imported from a single CSS file like this:

@import "newstyles1.css";
@import "newstyles2.css";
@import "newstyles3.css";

JS is a bit more tricky, but maybe this can help? How to include js file in another js file?

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Mar 12, 2014 at 14:11

Johan

1,0268 silver badges13 bronze badges

Comments

Mattos · Accepted Answer · 2014-03-12 14:11:29Z

0

You could compile both .js and .css files...

Javascript - Closure tools

https://developers.google.com/closure/compiler/

CSS - LESS.org

http://lesscss.org/

By compiling both types you could import 2 files do your page.

answered Mar 12, 2014 at 14:11

Mattos

4472 silver badges8 bronze badges

Comments

Senthilkumar Govindasamy · Accepted Answer · 2014-03-12 14:16:20Z

i think this is better way for you, because if you put more js file in header then make some error, so you will put js file in footer

header.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="../jquery.1.css" />
<link rel="stylesheet" type="text/css" href="../jquery.2.css" />
...
...
 <link rel="stylesheet" type="text/css" href="../jquery.100.css" />
</head>
<body>

footer.php

<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
...
...
<script type="text/javascript" src="../src/jquery.100.js"></script>
</body>
</html>

main.php

   <?php
    include 'header.php';
    ?>
// do code for content
<?php
    include 'fotter.php';
    ?>

Collectives™ on Stack Overflow

Is it possible to create headerfile of javascript and css scripts ?

5 Answers 5

3 Comments

5 Comments

Comments

Javascript - Closure tools

CSS - LESS.org

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

Comments

Javascript - Closure tools

CSS - LESS.org

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related