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>
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);
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');
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?
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.
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';
?>
Related
I am kinda new to programming, I wanted to make this example run on my php page http://jsfiddle.net/N78hs/2138/ but it just doesnot work for me
I've tried to create a .js file in (root/js) folder and call it on my php page but it didnot work for me.
here you can find head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
and here is the body
<body>
<div id="fullcalendar"></div>
</body>
thank you in advance
I think you did not connect all js and css libraries.
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
you have to include it in head part of your html. or on the bottom of the body tag.
you just need to add you file in head section
<html>
<head><title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="~/js/my.js"></script>
</head>
<body>
<div id="fullcalendar"></div>
</body>
</html>
I have the follow external css / js file in the index.php file
<link rel="stylesheet" href=".css/main.css" type="text/css">
<script src=".js/main.js?"></script>
Problem
When I open the page in browser, all css / js code become inline as below
<style>
/* css code */
</style>
<script>
/* jscode */
</script>
Someone know what "cool" php function is it? I would happy to have it disabled on the host.
please check the link http://toolkit4kinder.com/test/index.php
cat index.php
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/main.css" type="text/css">
</head>
<body>
<div> hello </div>
<script src="./js/main.js"></script>
</body>
</html>
RCA
The inline css / js was generated by the following features on the host:
https://www.modpagespeed.com/doc/filter-js-inline
https://www.modpagespeed.com/doc/filter-css-inline
Solution
create / edit .htaccess in the folder with the following code to disable the feature:
$ cat .htaccess
ModPagespeed Off
I want to include a css file into the head section of a php file ?
Right now I am including css in this way:
<?php include('./includes.header.html'); ?>
<style><?php include('./test.css'); ?> </style>
What it does is it includes the css in the body section not in the head section.
I have no idea to add js file before the end of body tag.
Please tell me a way to include the css file in the head section and js file before the end of the body tag.
Thanks in advance.
According to default structure of a web page add css and js files like this
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
//your other code here
<script src="test.js">
</body>
</html>
php include can be used to add php files but for css you should use this default method.
php include should only be used to include PHP files, not css. Edit the header HTML and add the css normally ie
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
You can programatically add it using PHP anywhere ie
<?php print_r('<link rel="stylesheet" type="text/css" href="test.css">'); ?>
In response to your comment about adding the styles to a specific page header: you could use a conditional with isset and a variable to set section-specific styles to your header like so:
<?php
if (isset($section_specific_styles))
{
echo "<link rel=\"stylesheet\" href=\"css/{$section_specific_styles}.css\">";
}
?>
You would then set the variable $section_specific_styles in the relevant page to only add the stylesheet in that page's header (thus, other pages without the variable set would not add the additional stylesheet.)
--public/javascripts/myscript.js
--views/index.ejs
No matter what I do, or what variation I use (ie declaring including type="text/javascript") it wont find my external js file. I am using node js and I was told I may have to do something with routing, but that doesn't seem to be working either.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' />-->
</head>
<body>
<%include templates/header.ejs %>
<script type="text/javascript" src=".../public/javascripts/myscript.js"> </script>
</body>
</html>
I understand using routing in other .js files but not importing into html.
Also is there a better/neater was of doing this?
you base directory for adding static file, start from public
ex.
your project directory
/var/www/project/
your assets located on
/var/www/project/public/javascripts
then you attach theme as bellow
//app.js
app.use(express.static(path.join(__dirname, 'public')));
and on views you can do as bellow
<script type="text/javascript" src="/javascripts/myscript.js"> </script>
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!