Is there a way to inject/append CSS pasted into a textarea into the head section of the page? I'm making the settings page for an app, and I want to allow themes and the option to change minor things by just adding CSS into a textarea then clicking save.
Other option: Is it posiible to have the textarea display a file called "theme.css" then any changes made will be saved as that file. And to completely change the theme, just copy/paste a new one directly into the text box.
If you use jquery this is how you can do
<script>
$("head").append("<style>body {background:blue;}</style>");
</script>
As another option
you can read theme.css file using fread , show it in textarea and save it to file using fwrite.
Something like that?
<!doctype html>
<html>
<head>
<script type='text/javascript'>
function addStyle(css){
var stl = document.createElement('style');
stl.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(stl);
}
</script>
</head>
<body>
<p>Paragraph To Test<p>
<textarea id="txtarea">p{color:red;}</textarea>
<input type="button" value="Set Style" onclick="addStyle(txtarea.value);">
</body>
</html>
Related
My problem:
I can display content of a php file including(image background) using iframe. When I go to include my php file using
include("modules/form.php");
or
file_get_contents("modules/form.php");
it displays content, but background image becomes invisible. It is a big site. So, is there any alternate of iframe for this purpose? I do not want to use iframe because my ranking in google is becoming down.
You can't archive this using php , till far i know. PHP is a server side script it does not know anything from the client side. You can use jquery , first you will have to create a div and in it set the content of the page.Use the code below
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script type='text/javascript'>
$(document).ready(function (){
$('#divId').load(full url to modules/form.php); // Paste the full url here
});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
Hope this helps you
I'm pretty new to PHP and was wondering if there was a way to overwrite what is displayed in a title tag by using PHP inside the body.
Let me explain why I'm trying to do this. I'm using a forum/cms software that allows me to create PHP pages, but won't let me change anything about the header (including the title tag). I was hoping there was a script that I could place into the body using PHP that would overwrite whatever was displayed into the default title tag.
This is probably a crazy question, and if so I apologize.
Just running out of ideas how to get what I need in the title.
Thanks!
You can't.
if you want to change it add some Java Script code that will execute on the client side and do this for you:
<script>
document.title = "This is the new page title.";
</script>
And with some PHP:
<head><title>some title</title></head>
<body>
<?php if (some condition, etc) { ?>
<script>
document.title = "This is the new page title.";
</script>
<?php } ?>
</body>
<html>
<head>
<title>Hello</title>
</head>
<body>
<?
echo "<script>document.title='Hello, World!';</script>";
?>
</body>
</html>
how to add or embed CKEditor in php page, I downloaded and extracted the zip file into root of the directory and also called on my page
<?php require("ckeditor/ckeditor.php"); ?>
gave the textarea this fields
<textarea class="ckeditor" name="editor1">Write any thing</textarea>
But its not working,
Documentation for installation on PHP is not found CKEditor website.
Does any one knows where we or help me out..for this app.
Easy steps to Integrate ckeditor with php pages
step 1 : download the ckeditor.zip file
step 2 : paste ckeditor.zip file on root directory of the site or
you can paste it where the files are (i did this one )
step 3 : extract the ckeditor.zip file
step 4 : open the desired php page you want to integrate with here page1.php
step 5 : add some javascript first below, this is to call elements of ckeditor and styling and css
without this you will only a blank textarea
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
And if you are using in other sites, then use relative links for that here is one below
<script type="text/javascript" src="somedirectory/ckeditor/ckeditor.js"></script>
step 6 : now!, you need to call the work code of ckeditor on your page page1.php
below is how you call it
<?php
// Make sure you are using a correct path here.
include_once 'ckeditor/ckeditor.php';
$ckeditor = new CKEditor();
$ckeditor->basePath = '/ckeditor/';
$ckeditor->config['filebrowserBrowseUrl'] = '/ckfinder/ckfinder.html';
$ckeditor->config['filebrowserImageBrowseUrl'] = '/ckfinder/ckfinder.html?type=Images';
$ckeditor->config['filebrowserFlashBrowseUrl'] = '/ckfinder/ckfinder.html?type=Flash';
$ckeditor->config['filebrowserUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
$ckeditor->config['filebrowserImageUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
$ckeditor->config['filebrowserFlashUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
$ckeditor->editor('CKEditor1');
?>
step 7 : what ever you name you want, you can name to it ckeditor by changing the step 6 code last line
$ckeditor->editor('mycustomname');
step 8 : Open-up the page1.php, see it, use it, share it and Enjoy because we all love Open Source.
Thanks
If you have downloaded the latest Version 4.3.4 then just follow these steps.
Download the package, unzip and place in your web directory or root folder.
Provide the read write permissions to that folder (preferably Ubuntu machines )
Create view page test.php
Paste the below mentioned code it should work fine.
Load the mentioned js file
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" name="editor"></textarea>
Alternately, it could also be done as:
<?php
include("ckeditor/ckeditor.php");
$CKeditor = new CKeditor();
$CKeditor->BasePath = 'ckeditor/';
$CKeditor->editor('editor1');
?>
Note that the last line is having 'editor1' as name, it could be changed as per your requirement.
no need to require the ckeditor.php, because CKEditor will not processed by PHP...
you need just following the _samples directory and see what they do.
just need to include ckeditor.js by html tag, and do some configuration in javascript.
<?php require("ckeditor/ckeditor.php"); ?>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="somedirectory/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" name="editor1"></textarea>
After reading the Quick Start Guide
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method.
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea name="content" id="editor">
<p>This is some sample content.</p>
</textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
This example is for the specific classic editor. FOr other variants, only CDN will change.
Is it "okay" to have an HTML document embedded inside the body tag of another HTML document?
The reason why I want to do this is so that I can call a javascript body onload -- I cannot do that in the main HTML document because the main HTML code is dynamically generated by a controller (Yii) that controls other pages and I do not want to edit it.
*By the way, I tried it and it seems to work fine now, but I just want to be sure that the page will not break in the future for whatever reason.
<html>
<head>
<body>
<html>
<head>
<script type="text/javascript>
function somefunction(){
}
</script>
</head>
<body onload="javascript:somefunction()">
</body>
</html>
</body>
</html>
If all you want to do is attach an onload event, you're going about it the wrong way.
All you have to do is add a script element that attaches an onload event:
<script type="text/javascript">
function somefunction()
{
...do stuff...
}
document.body.onload = somefunction;
</script>
Alternatively, if you've appended your JS files at the bottom of the page, they will be able to interact with the DOM similarly to how onload works. The reason to use onload is only so that the elements defined within the web page have been added to the DOM by the time a function is executed. If your scripts are after your content, the elements will be in the DOM.
No, that's bad HTML.
Just put your JavaScript at the bottom before </body>.
I am trying to add the jQuery Date Picker into my form, however I am having a problem on showing it. This is what I am using http://jqueryui.com/demos/datepicker/default.html and below is my code structure. For a reason when I click into the textbox, the calendar is not showing.
In header.php there is the jQuery script that I use for several purposes (tested and working) like fancybox and a loading page based on the value of a drop down list.
In single.php I include the main.php that loads a page based on the value of a drop down list (Working), in my case testpage.php that is a jQuery datepicker script that popups when you click on the textbox. But as I said, is not showing up and I don't know why.
Thank you for your solutions.
header.php
<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
single.php
<?php include('main.php'); ?>
main.php
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<form>
<select id="termid" class="selectfield">
<option>Choose</option>
<option value="testpage">Test Page</option>
</select>
<div id="reservationdetails" ></div>
</form>
Try loading the include file that the datepicker is in, near the end of the main file, I have had problems before when trying to load/execute javascript code in the head or somewhere in the upper-body.
I placed the js files into header.php and it is working great.
type='text/javascript' is missing on the script tag where you tell which element is the date picker