I have a website with 50 pages. I have a header.html I include on every page. In the header I link to my external CSS, and the same counts for the footer, except the links here are to external JS.
But a few of my sites I need to use a specific CSS and JS, that I did not implement yet. If I include that in the header, it means that all my pages are loading an external CSS or JS file, which I dont think is so good?
Is there a way I can only call a script on a few pages, without setting it in my header.html or footer.html?
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="resources/library/bootstrap/bootstrap.min.css" rel="stylesheet"> <!-- ok -->
<link href="assets/css/core/theme.css" rel="stylesheet"> <!-- ok -->
<link href="resources/library/bootstrap/bootstrap-reset.css" rel="stylesheet"> <!-- ok -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!--external css-->
<link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" href="resources/library/flexslider/css/flexslider.css"/> <!-- ok -->
<link href="resources/library/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" href="assets/css/core/animate.css"> <!-- ok -->
<link rel="stylesheet" href="resources/library/owlcarousel/css/owl.carousel.css"> <!-- ok -->
<link rel="stylesheet" href="resources/library/owlcarousel/css/owl.theme.css"> <!-- ok -->
<link href="resources/library/superfish/css/superfish.css" rel="stylesheet" media="screen"> <!-- ok -->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> -->
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="assets/css/core/component.css"> <!-- ok -->
<link href="assets/css/core/style.css" rel="stylesheet"> <!-- ok -->
<link href="assets/css/core/style-responsive.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" type="text/css" href="resources/library/parallax-slider/css/parallax-slider.css" /> <!-- ok -->
<script type="text/javascript" src="resources/library/parallax-slider/js/modernizr.custom.28468.js"></script> <!-- ok -->
</head>
index.php
<body>
<p> A lot of content</p>
<?php include 'resources/includes/footer.html';?>
footer.html
<div>
<div>
<p> A lot of content</p>
</div>
</div>
**<!-- ********* The Magnific popup script I only use on 2 sites: *********-->**
<script src="js/module/jquery.magnific-popup.js"></script>
<!-- Scripts for all sites -->
<script src="resources/library/bootstrap/jquery-1.8.3.min.js"></script> <!-- ok -->
<script src="resources/library/bootstrap/bootstrap.min.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/superfish/js/hover-dropdown.js"></script> <!-- ok -->
<script defer src="resources/library/flexslider/js/jquery.flexslider.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/bxslider/jquery.bxslider.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/parallax-slider/js/jquery.parallax-1.1.3.js"></script> <!-- ok -->
<script type="text/javascript">
$('.image-caption a').tooltip();
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist-three').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
};
// Run the show!
filterList.init();
});
$( document ).ready(function() {
$('.magnefig').each(function(){
$(this).magnificPopup({
type:'image',
removalDelay: 300,
mainClass: 'mfp-fade'
})
});
});
</script>
</body>
</html>
Example:
These two links I need on 1 side. Where should those to links be placed?
<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->
There is a simple way in core php use include in your custom pages to add header and footer. To add extra css add in content pages
index.php without extra css
include('header.php');
<div>
content goes here
</div>
include('footer.php');
about.php with extra css
include('header.php');
<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->
<div>
content goes here
</div>
include('footer.php');
Related
I have designed a page using bootstrap 4. But it is not appearing according to my design. Below the code of CSS and JS files that I used. Also shared the excepted appearance and wrong appearance.
<!-- Link CSS // -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<!-- Link JS -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<!--<script src="../js/jquery-3.3.1.js"></script>-->
<script src="../js/bootstrap-datetimepicker.js"></script>
<!--<script src="../js/bootstrap-multiselect.js"></script>-->
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-select.js"></script>
<script src="../js/ajax.js"></script>
<!-- multiselect based on dropbox -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Graph Chart -->
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
Below the excepted Appearance
enter image description here
the Wrong appearance
enter image description here
Probably it's because the order of the CSS elements.
The latest you reference on the HTML document is the one who has more priority.
Try to first load the bootstrap base CSS and then the others:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
Please help, ajax is not working..
I tried the tutorial from here,
Ajax box PHP
it works well, but when the code is installed in a different page, I just don't want to work.
here is codes
<!DOCTYPE html>
<html lang="en">
<head>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<script src="typeahead.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/font- awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/fullcalendar.min.css"/>
<link rel="stylesheet" href="asset/datepicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="asset/css/plugins/datatables.bootstrap.min.css"/>
<link href="asset/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="asset/select2/select2.min.css">
<!-- end: Css -->
<script type="text/javascript" src="asset/js/jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="shortcut icon" href="asset/img/logomi.png">
</head>
<body>
<div id="content">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
</div>
please help... thanks..
Please try by including the js and other bootstrap files first. And then try to execute the jquery and ajax code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Now it will works. Also make sure that all the js related files are included properly. While running the page in browser, type f12 and check the ajax call is generated or not.Hope it works.
I have a file called Head.inc which my index uses for the design of the page. which looks like this:
Name-----Marks----Age----Subject
Bob-------67------13------Maths
James-----89------15------English
But i need the files to be sorted by the subject:
----------Maths--------
Name----Marks----Age
Bob-------67------13
---------English------
Name----Marks----Age
James------84----15
This is my header.inc file:
<title>Contacts</title>
<!-- custom style -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- tynymce -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" charset="utf8" src="js/custom.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
I have some big problems including my header in subfolder. I have a folder structure like this:
[![Folder structure][1]][1]
I would like to include my header in the innovatian-project.php. As I see it, I have to go back three folders to get to the root:
AU -> Courses -> Document Root
I have tried with the following:
<?php include '../../../resources/includes/header.php'?>
<?php include(__DIR__.'/resources/includes/header.php'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'].'/header.php'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'].'/resources/includes/header.php'); ?>
<?php include('../../resources/includes/header.php'); ?>
But none of this is working. I have tried so many things, that I cannot even remember anymore. Does anybody have an idea on what I can do? The path to the innovation-project is here:
<?php include 'resources/includes/header.php' ?>
<body id="services">
<?php include 'resources/includes/navbar.php' ?>
<!-- start intro section -->
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="intro-content">
<h1>Mine kompetencer <strong>strongest </strong></h1>
<h2>areas, where I can add the most value to a company </h2>
Mine kompetencer er baseret på
</div>
</div>
</div>
</div>
</section>
<!-- end intro section -->
UPDATE
When I use the following code, the header, nav and footer is called. But the CSS is not called:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_da/resources/includes/header.php' ?>
<body id="services">
<?php include $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_da/resources/includes/navbar.php' ?>
<!-- start intro section -->
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="intro-content">
<h1>Mine kompetencer <strong>strongest </strong></h1>
<h2>areas, where I can add the most value to a company </h2>
Mine kompetencer er baseret på
</div>
</div>
</div>
</div>
</section>
<!-- end intro section -->
<?php include $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_da/resources/includes/footer.php' ?>
UPDATE 2 WHERE I CALL THE CSS IN header.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/supersized.css">
<link rel="stylesheet" href="css/nivo-theme.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<!-- Main Stylsheets -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Theme Color Stylesheet -->
<link rel="stylesheet" href="css/theme_color.css">
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php include_once("analyticstracking.php") ?>
</head>
<?php include($_SERVER['DOCUMENT_ROOT'].'/resources/includes/header.php'); ?>
See your php.ini about
allow_url_include
What is in your router file?
You have to go up 2 folders.
<?php include('../../resources/includes/header.php'); ?>
UPDATE
Change these lines in header.php: <link rel="stylesheet" href="css/bootstrap.min.css">
like <link rel="stylesheet" href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/Portfolio_da/css/bootstrap.min.css">
I'm learning PHP / HTML / CSS. Today I want use Bootsrap.
I use a basic HTML5 template called index.php In this file I want include a footer like this:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ressources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="ressources/css/style.css">
<script type='text/javascript' src="ressources/script/jquery.js"></script>
<script type='text/javascript' src="ressources/bootstrap/js/bootstrap.js"></script>
<title>Index</title>
</head>
<body>
<div id="wrap">
<p>test</p>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
But I dont see my footer in my page. I just put an "Hello World" in my footer.php