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
Related
I'm pretty new to JQuery and I may be missing a few things about it.
I have created a .php file which contains the header of my website. I included it into my main .php file. The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php".
I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".
Hope you'll be able to help me about what I'm missing.
The main homepage in which I load the JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>DSI Welcome</title>
<link rel="stylesheet" href="../css/homepage.css" />
</head>
<body>
<header>
<?php include 'header.php';?>
</header>
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/homepage_script.js"></script>
</html>
The "header.php" file which I include into the main "homepage.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Header</title>
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<header>
<div class="userbox_rectangle_full_header"> </div>
</header>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/header_animation.js"></script>
</html>
Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php":
$(document).ready(function() {
$('#homepage_work_space').on('click', function(){
alert('hi');
});
});
Thank you in advance !
There is some points in your code thats better to know .
Your html structure is wrong! simple html5 structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Your JQuery Main File -->
</head>
<body>
Content of the document......
</body>
</html>
Define your main jquery file in head of your body.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!
It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.
here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ...
file index.php:
<html>
<head>
<script src="../js/jquery-3.3.1.js"/>
<script src="../js/jquery_color_animation.js"/>
<script src="../js/script/homepage_script.js"/>
</head>
<body>
<?php include 'header.php'; ?>
<!-- further content goes here -->
</body>
</html>
file header.php:
<div class="userbox_rectangle_full_header">
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>
file homepage_script.js:
$(document).ready(function() {
$('.work_space').on('click', function(){
alert('hi');
});
});
I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc.
Sorry for the basic question. I'm new to coding and I've already googled "how to run code from node modules" "how to use code from node modules" etc. for a few hours without any real progress.
Basically, I want to create a editable div with the text editor (https://github.com/yabwe/medium-editor) and I already manually downloaded and followed the directions to inserting the code inside the editor (can be found on the GitHub page).
Here is my code for the editable div in its entirety:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="post.css">
<script src="other.js"></script>
<link rel="stylesheet" href="css/medium-editor.css">
<link rel="stylesheet" href="css/themes/default.css">
<script src="js/medium-editor.js"></script>
<div contenteditable="true" class= ".editable" id="posteditor"> <p> test words</p></div>
</body>
Javascript (other.js -referenced in html code):
var elements = document.querySelectorAll('.editable'),
editor = new MediumEditor('.editable');
I also copy and pasted the files from the downloaded file into a new file folder holding the HTML/CSS/Javascript code for the editable div (not sure if this even makes a difference).
Thank you so much for helping a new coder.
EDIT: Figured it out! My paths were in the wrong order and I wasn't referencing some of the necessary code in the
You need some simple html css js basics knowledge to start dealing with such code
here are some tips:
*put link tag in the head
*put script tags in before the ending of the body
try now to run this code and double tap the word you want to edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="editable"><h4>hi I am editable</h4></div>
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<script>var editor = new MediumEditor('.editable');</script>
</body>
</html>
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^
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';
?>
Supposed I have a html page like this:
Before:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
</head>
<body>
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</body>
</html>
After:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</head>
<body>
</body>
</html>
Just curious if it could be done via Regex replacement?
Thanks a lot.
PS: Or did anybody know how google pagespeed apache2 extension does move the css to head?
You could write a little application that parses through the html file, filters the style tags out, deletes them from the tags and creates a style tag in the head and saves the html file again.
But lets face it, when we are talking here about one or two html files, then you will spend much more time on developing that app than just clean up your mess by hand.
I am working on same task in my one project, I have made a javascript regex which selects all inline styles, you can use this in your project.
/<(style)[^>]*?>(?:.|\n)*?</\s*\1\s*>/igm
You can test this regex at: http://www.regexr.com