CodeMirror is an on the fly syntax highlighting engine, written in Javascript. Like CodePress (the syntax highlighter used in the latest version of wordpress for editing plugins), it can highlight many different languages (PHP, JS, HTML, CSS to name a few). This tutorial will show you how to implement CodeMirror on your site, there is a great article written by the author of this library here on how it works under the hood.
Installation
Download the latest version from the CodeMirror website. As of today, it is version 0.62. After you unzip it you will see 3 directories – js, css and contrib. contrib holds parsers that other people have written such as the lua, python and PHP. css holds the color schemes for syntax highlighting and js contains the necessary scripts for CodeMirror to run.
Basic Usage
If we have a textarea with an id of code that we wanted to turn into a CodeMirror editor with a MirrorFrame(more on this later) then we would use the code below. Note that we need to specify where the parserfiles and stylesheets for the particular type of syntax (in this case javascript) are located.
var textarea = document.getElementById('code');
…
Recently, a client of mine wanted a single web form, residing on the localhost to submit the form contents to a database in the localhost, and as well as to a web server simultaneously. Although this sounds like an unnecessary duplication of data, my client wanted some of the form data to be stored on the localhost for the intranet applications to use. Achieving this functionality would have been a piece of cake, if we were not handicapped by the unavailability of cross-domain AJAX. For those of us familiar with AJAX, we know that we cannot send an AJAX request to a remote server due to security reasons – atleast not in a reliable, hack-less way.
So, instead of looking for a pure AJAX solution, I decided to implement this functionality by using a combination of AJAX (for the localhost) and a traditional PHP POST request (for the web server). The trick here is to execute the AJAX call before the form is submitted – by catching the form submission event using JavaScript. Once the AJAX call is successful, we allow the default form submission to take place. In case there is an error with our AJAX call, we should…
W3.org is overhauling its website in order to make it more user-friendly and quiet people who used to wonder (including me) why the administrator body of web have such dull, flat, unorganized and old fashioned website?
The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.
The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.
The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.
We traditionally think that jQuery’s selector engine can only select elements/information off of the document that we are working on. And AJAX’s only use is to process web forms without the page needing to reload. While both of these are common uses, they are not the only uses. In this tutorial I’m going to show you a not-so-mainstream use of jQuery, but a very useful one all the same.
Take this standard web page. It pulls the latest news items from a database and displays them like so. That is the basic DOM of the page.
<head>
<title>Latest News</title>
</head>
<body>
# More Header, sidebar code here #
<p class="latest">Employees at the Karate Bank are getting the chop</p>
<p class="latest">NASA shares have sky-rocketed</p>
<p class="latest">Investors at the Sushi Bank feel they are getting a raw deal</p>
# More content, footer code here #
</body>
</html>
</pre>
If we wanted to highlight all of the news items on this page we can use jQuery’s each method to iterate through them and modify their CSS.
$("p.latest").each(function(){
$(this).css({"background-color" : "yellow"});
});
But what if we wanted to pull that information from another page? Due to some restrictions in the software the website is…
As we all know jQuery is a very small language. Not only is the file size of the jQuery library small, but the amount of code you need to write to achieve something is also very small. Because of this it is sometimes more efficient to write and test jQuery code in the browser than in a local file. To do this we need a couple of things.
- The Firebug Extension for Firefox
- Greasemonkey
If the page that we are going to manipulate doesn’t already include jQuery on it, then we can include it with this small Greasemonkey script. If jQuery is already included on the page, there is no use for this script.
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
}
Source
With the jQuery library on the page we can now go ahead and start entering commands. For this example we’ll take…
This is part 2 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX
In part 1 of the tutorial, we covered the PHP and MySQL side of things. In this part we will be enhancing it with jQuery’s AJAX and manipulation functionality. The to-do list will degrade fine – if the user has Javascript disabled, the application will still work. All changes occur in the index.php file.
There are two parts to the script. One handles the posting of new posts, while the other handles posts being deleted. We’ll start with adding new posts.
//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){
//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();
//Build the URL that we will send
var url = 'submit=1&content=' + formvalue;
//Use jQuery's ajax function to send it
$.ajax({
type: "POST",
url: "process.php",
data: url,
success: function(){
//If successful , notify the user that it was added
$("ul").before("<p class='new'>You just added: <i>" + formvalue + "</i></p>");
}
});
//We return false so when the button is clicked, it doesn't follow the action
return false;
});
The url part confuses…
This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX
In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.
It will consist of a few files.
- delete.php – delete the note.
- process.php – create the note, display the notes.
- index.html – form, javascript
We will be storing the list items in a MySQL database. The query:
CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)
index.php will only contain the form (for now). It’s a fairly basic form, it contains a textarea (where the user enters their note) and a button they hit to submit it. The information is sent to a file called process.php through the post method.
<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Post it"
…
In an attempt to sharpen up my jQuery, i purchased the book jQuery in Action
by Bear Bibeault and Yehuda Katz. Reading through the book, i could see that the first few chapters were obviously aimed at beginners. They covered selectors (If you know CSS already your fine) and events. You can easily get this information off the jQuery doc site, nothing spectacular there. Chapter 5 covers the effects, slides and fades but goes into depth abit more on the animate function. Something (in my opinion) which is under documented on the jQuery doc site. It shows off a few different examples.
Chapter 7 is another excellent chapter – showing you how to write your own plugins. It goes into alot of detail, from extending the wrapper to proper naming conventions to looping through each element effected. This chapter is a must read for anyone considering writing their own jQuery plugins. Again, the authors have written 3 example plugins providing alot of reference material.
With the arrival of jQuery UI 1.5 i was browsing its’ wiki pages and learning all of the API. I came across the jQuery UI wiki page, its essentially more jQuery effects except these ones are alot more dynamic! You can explode, puff, slide, highlight and alot more. I was a amazed that i hadn’t seen this page or been linked to it before, its something the jQuery UI team should be proud of.
Check it out
For those of you with no jQuery background what-so-ever, jQuery UI is a series of user interface (UI) enhancements made in Javascript. These range from tabs (which also support ajax loading), to dialog boxes which you can drag, drop and resize. All cross browser! Although its currently still under development the finish line is in sight for the 1.5 release. I encourage everyone to check it out, it can add some really professional effects to your website for minimal lines of code.
Subscribe to feeds
