I have a specific question.
How do I embed external .js or .css file in a php file extension?
It does not work the way I embed it in html file extension.
You would usually include these inside the <head> tags
<link rel="stylesheet" type="text/css" href="myStyles.css">
<script src="myScript.js"></script>
But if you must use php for whatever reason, you can use
<? include "myScript.php"; ?>
EDIT:
In response to your comment about targeting outputted text, you would simply echo the text between an identifiable tag. Eg:
<span id:="targetThis">
<? echo "Text" ?>
</span>
Now you can target the text in Css using:
#targetThis {
color: red;
}
You can also grab it using JQuery using:
$('#targetThis') then do whatever it is you wanted to do with it...
Eg
$('#targetThis').html('Edited Text');
Related
I have written a PHP page template and would like to link the needed Javascript from an external file. However, when I do this I get a syntax error: Uncaught SyntaxError: Unexpected token < referencing the doctype header <!DOCTYPE html>. If I put the script in the PHP file directly then it works.
Obviously this is making my file messy, so how can I do it without breaking the script? Also, since this script is only needed on this one page I don't want to put it in my footer to load on the whole site.
I have tried to use <script type="text/javascript" src="staff-test.js"></script> in my PHP file to reference the JS file, with no success. The PHP and the JS files are in the same folder, so the src path seems to be correct.
The PHP:
<?php
get_header();
include('staff-test.css');
?>
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="staff-test.js"></script>
<?php
get_footer();
Using this code I get a syntax error. I would like to keep the JS in a separate file, but seems to only work when I put it directly in the PHP file.
Using include('staff-test.css'), you are asking your web server to interpret the CSS file as PHP. This is why you are getting a syntax error.
You want to do instead:
<link rel="stylesheet" type="text/css" href="staff-test.css">
Try this
<?php
get_header();
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.css">
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.js"></script>
<?php
get_footer();
?>
You may need to register the script in your functions file. Check out the WordPress reference for registering a script.
https://developer.wordpress.org/reference/functions/wp_register_script/
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
I hope all are doing well.
How to add respo_style.css before closing </head> in multiple(in my case there is 65 pages) html + PHP page.
is there any best way to add dynamically
<link rel="stylesheet" type="text/css" href="respo_style.css" />
using code?
In my case i have one config.php which is called in every page.
NOTE: Without add or change any other files. Is this possible to add the lines dynamically using jQuery or JavaScript.
Simple things is just add extra additional file in existing without opening each and every files.
I'm sure there are a lot of ways but here's an explanation for the fastest/easiest implementation IMO.
For code that is repetitive, you should store that code in one file and call it using PHP's include_once function. However in order to use PHP in your files, you would need to use use .php extension instead of .HTML (assuming you files are .HTML) for your webpages.
Here's an example:
<head>
<?php include_once("repetitive_code_here.php"); ?>
</head>
If you run ob_start(); at the beginning of your script, then you can call ob_get_contents() to get the page and replace </head> with your stylesheet.
$string = ob_get_contents();
$link = '<link rel="stylesheet" type="text/css" href="respo_style.css" />';
echo str_replace('</head>', $link . '</head>', $string);
ob_end_clean();
or instead of ob_get_contents pass the funtion to ob_start();
function callback($buffer) {
$link = '<link rel="stylesheet" type="text/css" href="respo_style.css" />';
return str_replace('</head>', $link . '</head>', $buffer);
}
ob_start('callback');
but you will need to call ob_end_flush(); at the end.
This will work. I have style.css in all file. so i can include the respo_style.css in style.css using this code #import url("base.css");
You should do something like this:
page.php (write this in all 65 pages)
<?php
require_once('includes/head.php'); //Assuming you put head.php in a folder called "includes" inside the root
?>
//Then the content of the page
And head.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="respo_style.css" />
</head>
I have a part of html code which is repeating on every of my page and i want to reuse it.
There is already a very nice link:
Include another HTML file in a HTML file
I have used jQuery to load the html file (separate html file which i call template).
If that html file is static everything is working fine.
But if my template file includes the elements which are using class (CSS) which is using java script to load - then it's not being loaded. Even if in original html file i am referencing correct css/java scripts in head section.
Any ideas ?
Thanks,
If you wanna include page1.html into an Div with id insert-into-me . page2.html.
Then using Jquery this will work!
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#insert-into-me").load("page1.html");
});
</script>
</head>
<body>
<div id="insert-into-me"></div>
</body>
</html>
Using JSP:
<%#include file="page2.jsp" %>
or
<jsp:include page="..." />
where you want to include in page1
I have How freichat chat script in php and want to integrate with custom php based site with smarty as template engine (View ). How to put that script in smarty template so it works?
Here is code for it...
<script type="text/javascript" language="javascipt"
src="http://server/freichat/client/main.php?id=<?php echo $ses;?>&xhash=<?php echo freichatx_get_hash($ses); ?>">
</script>
<link rel="stylesheet"
href="http://server/freichat/client/jquery/freichat_themes/freichatcss.php"
type="text/css">