I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697
I have stripped out my header section in the index.html and placed it into it's own file named header.html.
I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html:
- Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="wrapper">
<!--=== Header ===-->
<!--=== End Header ===-->
In between header and end header I have tried:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
along with the other examples within the aforementioned links as well as. I have also tried:
<!--#include virtual="insertthisfile.html" -->
which would have been really nice if it worked, as it seems very simple and
<?php include("filename.html"); ?>
but after changing the .html files to .php, my browsers only render plain text.
Any suggestions? What am I doing wrong?
you can make a php file like this. I expect you want the <head> staying the same as well
<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
then you can choose between different main content files depending on the $_GET using a if statement
<?php
$header = file_get_contents('header.html');
if($_GET['page'] == 'home'){
$main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
$main = file_get_contents('contact.html');
}
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
First step : create div for footer and header
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<script type="text/javascript">
$(function () {
$.get("header.html", function (respons) {
var header1 = respons;
$("body").append(header1);
});
});
</script>
</head>
<body>
</body>
</html>
Use simply PHP code:
<?php
// Include file with header
include("./include/header.php");
// This bit always includs to the "center" Call page file via URL
if (isset($_GET['page'])){
$file=$_GET['page'];
$file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
if(file_exists($file2)){
if(substr_count($file,"../")>0){
echo "Warning!";
}elseif($file=="index" or $file=="/index"){
echo "Warning!";
}else{
include $file2;
}
}else{
include "./include/404.php";
}
}else{
include "uvod.php";
}
// Include file with footer
include("./include/footer.php");
?>
Related
I have an issue with AJAX.
I am using Safari version 12.1.
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta rel="icon" href="assets/images/favicon.ico">
<title>Test</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- GoogleFonts -->
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
<!-- Imported JavaScript libraries -->
<script src="assets/js/jquery-3.6.0.js"></script>
<script src="assets/js/jquery.fullpage.js"></script>
<!-- test Javascript files -->
<!--<script src="assets/js/test.js"></script>-->
<script>
$("button").click(function(){
$("#div1").load("ajaxload.html", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
</script>
</body>
</html>
This is the code for the ajaxload.html page
<h1>Portfolio</h1>
<p>Congratulations you have loaded content from an external page</p>
For some reason I keep on getting the error message.
I am trying to implement a Dropzone element to allow my user to easily drag and drop multiple files to upload into my web app. However, I don't really understand or know how to integrate the source code into my current solution. Can someone help me out on this?
Currently, I have a base.html to store all the frontend libraries/dependencies like bootstrap.min.css and jquery.min.js. Based on that understanding, i did a similar import for dropzone.js and dropzone.css. But I can't seemed to get it working.
"base.html" at root folder
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" />
<link rel="stylesheet" type="text/css" href="includes/css/basic.css" />
<link rel="stylesheet" type="text/css" href="includes/css/dropzone.css" />
<script type="text/javascript" src="includes/js/dropzone.js" />
<script>
Dropzone.autoDiscover = false;
window.onload = function () {
var dropzoneOptions = {
dictDefaultMessage: 'Drop Here!',
paramName: "file",
maxFilesize: 2, // MB
addRemoveLinks: true,
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var uploader = document.querySelector('#uploader');
var newDropzone = new Dropzone(uploader, dropzoneOptions);
console.log("Loaded");
};
</script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
{% include 'includes/_navbar.html' %}
<div class="container-fluid">
{% block content %}{% endblock content%}
</div>
</body>
I stored my dropzone.js and dropzone.css in root/includes/js and root/includes/css respectively.
Expecting a dropzone element on my page, but still not appearing.
I am building a CMS system and I found that I can not configure the ckeditor script on my text area, can anyone help me to solve the issue
My code is below:
header.php
<?php ob_start(); // helps to buffer our project ?>
<?php include "../includes/db.php"?>
<?php include "functions.php"?>
<?php ob_start(); ?>
<?php session_start(); ?>
<?php
if (!isset($_SESSION['rl'])){
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
<script>
DecoupledEditor
.create( document.querySelector( '#body' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#body' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
I used 'body' to ensure the code must apply on TEXTAREAS with id 'body'... here's code for text area:
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
You have included Classic editor script in your header.php file and you are trying to access DecoupledEditor.create() method which will throw an error.
Ideally, you should use ClassicEditor.create() method
Use below code for header.php
<?php
ob_start();
include "../includes/db.php";
include "functions.php";
session_start();
if (!isset($_SESSION['rl'])) {
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
I have removed your DecoupledEditor script from header.php
Now initialize ClassicEditor.create() script after your textarea
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
<script>
ClassicEditor
.create(document.querySelector('#body'))
.catch(error => {
console.error(error);
});
</script>
Hope this will help you!!
I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks
Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.
Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};
Original in .html file:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<title></title>
<link href="/leaflet-0.5.1/0.7.3/leaflet.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/L.Control.Zoomslider.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/css/l.geosearch.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/dist/leaflet.draw.css" rel="stylesheet"></link>
<!--
[if lte IE 8]>
<link rel="stylesheet…
-->
</head>
and in FF:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<title></title>
<link href="/leaflet-0.5.1/0.7.3/leaflet.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/L.Control.Zoomslider.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/css/l.geosearch.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/dist/leaflet.draw.css" rel="stylesheet"></link>
<!--
[if lte IE 8]>
<link rel="stylesheet…
-->
<style>
#hook_Block_StickyBannerContainer > div > div > *:…
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://api.adsaway.ru/csp/js/okads.js?270994265"></script>
</head>
Other browsers not added this, only FF?
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Problem in extension "Firefox Service Platform", and after disabled working(no added scripts and styles on head). But this extension is invisible: start FF on "save mode"(with SHIFT key) and disable this extension.