Mick Redman: content

Showing posts with label content. Show all posts

Wednesday, 6 April 2016

jQuery plugin to insert external content

This jQuery plugin takes 2 parameters:

The location of an external website
The element within that location which contains content you would like to insert in yours

Thursday, 1 August 2013

HTML5 contenteditable save, re-save and save again

The HTML5 contenteditable attribute is really useful, but when you've got my typing skills, you'd really like to keep saving as you go. In the example below I'm writing to a text file for simplicity. I've got a few things going on.

If the text file exists or has data in there, I use it. Otherwise, the editable paragraph holds a default string.
I use a form submit to kick off a jQuery event.
The jQuery function calls a PHP script to write the contents of my editable paragraph to the file.

This way I can keep pressing the submit button as I go, which will just update the text file with the current editable paragraph contents.

Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editable jQuery save</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<p id="content" contenteditable="true">
<?php
$text = file_get_contents('test.txt');
if(!empty($text))
{
echo $text;
}
else
{
echo 'Put some text here.';
}
?>
</p>
<form>
<input type="submit" />
</form>
<script>
(function()
{
$('form').submit(function()
{
$.post('set.php',
{
content:$('#content').text()
}, function(data)
{
if(data)
{
console.log(data)
}
});
return false;
});
})();
</script>
</body>
</html>

And set.php

<?php
if(isset($_POST['content']))
{
file_put_contents('test.txt', $_POST['content']);
}
else
{
echo 'write was not successful';
}
?>

Friday, 17 June 2011

External web content in your page through the PHP Simple HTML DOM Parser

The excellent PHP Simple HTML DOM Parser, provides the opportunity to bring external content into your web pages.

Here is an example of taking the top news story from the BBC website.

See demo.

<?php
include'simple_html_dom.php';
$html = file_get_html('http://www.bbc.co.uk/news/uk/');
foreach($html->find('#top-story') as $e)
{
echo $e->innertext . '<br />';
}
?>

Wednesday, 18 August 2010

Making the title overlap the content container

There are times when you would like the content to be contained in a box. Sometimes you would like the header to overlap the top of that box. Here is how to do it. The crucial lines here are position:relative; top:40px; within the h1 CSS reference.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>