highlight: JavaScript text higlighting jQuery plugin

jQuery Plugin: Text Highlight

Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin.
Demo
Each of the links will highlight the corresponding word.
highlight
javascript
Remove highlights.
Usage
Add highlight
Download jquery.highlight-1.js (2 KB) and add it to your page along with a jQuery version.
Style the highlight class
Create an entry in your style sheet for the highlight class..highlight { background-color: yellow }
Highlight terms
Call the $.highlight function with the start node and the text to highlight. Note that at this time the text must be upper-cased. To highlight all occurrances of “BLA” (case insensitive) in all li elements, use the following code:$('li').each(function() { $.highlight(this, 'BLA'); }));
Remove highlighting
The highlight can be removed from any element with the removeHighlight function. In this example, all highlights under the element with the ID highlight-plugin are removed.$('#highlight-plugin').removeHighlight();

Spice up ASP.NET validation with AJAX Control Toolkit

Introduction of AJAX Control Toolkit has opened many interesting possibilities for developing rich UI in ASP.NET. Add an awesome IDE like Visual Studio to it, and you can get astounding results without doing much. In this article we will see how to enhance client side validators using AJAX Control Toolkit. Given below are screen shots of what we are trying to achieve. The whole purpose is to improve user experience with very little effort.
Download the source
Download AJAX Control Toolkit (if you dont have it)
Run it by following the instructions in 'readme.txt' file of downloaded archive.

What's JQuery UI?

jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
The core of the library revolves around different mouse interactions, namely drag and dropping, sorting, selecting, and resizing.
On top of the core interactions are built a number of reusable widgets, including accordions, date pickers, dialogs, sliders, table sorters, and tabs.
Finally, the library is finished off with a few effects that you can use to liven up your site, specifically magnifier and shadow.
» More Information

HTTP Upload with Progress Monitoring Events

The Chilkat Upload component is freeware. This example demonstrates how to HTTP upload one or more files and monitor the progress with event callbacks. Formal support for the Chilkat Upload component is included with a "Chilkat Bundle" purchase.

download Download Chilkat .NET for 2.0 Framework

download Download Chilkat .NET for 1.0 / 1.1 Framework

//  

// Progress monitor callback -- called each time the percentage completion
// updates to a larger value.
public void OnPercentDone(object source, Chilkat.PercentDoneEventArgs args)
{
    // args.PercentDone is an integer value between 1 and 100.
    progressBar1.Value = args.PercentDone;

}

// The Chilkat.Upload.HeartbeatMs property determines the interval at which
// AbortCheck events are called.  If HeartbeatMs is set to 0 (the default),
// then no AbortCheck events are called.  This example sets the HeartbeatMs = 100
// milliseconds. 
public void OnAbortCheck(object source, Chilkat.AbortCheckEventArgs args)
{
    // Update progressBar2 so we can visually see the heartbeat.
    if (progressBar2.Value > 90)
    {
        progressBar2.Value = 0;
    }
    else
    {
        progressBar2.Value += 10;
    }

    // Handle UI events to keep the user-interface responsive.

    System.Windows.Forms.Application.DoEvents();
 
    // To abort the upload while in progress, set the
    // args.Abort property = true, like this:
    // args.Abort = true;
}

// Demonstrates a BlockingUpload with progress monitoring events.
private void button1_Click(object sender, EventArgs e)
{
    Chilkat.Upload upload = new Chilkat.Upload();

    // Make sure the EnableEvents property is set to true, otherwise we
    // won't receive event callbacks.
    upload.EnableEvents = true;

    // Call AbortCheck every 100 milliseconds.
    upload.HeartbeatMs = 100;

    // Setup our event callback handlers.

    upload.OnPercentDone += new Chilkat.Upload.PercentDoneEventHandler(OnPercentDone);
    upload.OnAbortCheck += new Chilkat.Upload.AbortCheckEventHandler(OnAbortCheck);

    // To upload more than one file, call AddFileReference multiple times --
    // once for each file to be uploaded.

    // The formElementName is arbitrary, and can be anything. 
    string formElementName = "file1";
    // The localFilename is a file that exists on your local filesystem.
    string localFilename = "hamlet.xml";
    upload.AddFileReference(formElementName, localFilename);

    // The Hostname and Path properties specify the server-side
    // page/program/script/CGI that will recieve and process the upload.
    upload.Hostname = "www.freeaspupload.net";
    upload.Path = "/freeaspupload/testUpload.asp";

    // The BlockingUpload call does not return until all the files have been
    // uploaded (or an error occurs or the upload is aborted by the application).
    bool success = upload.BlockingUpload();
    if (success == false)
    {
        textBox1.Text = upload.LastErrorText;
    }
    else
    {
        // When BlockingUpload returns true, it indicates that the files/data have
        // been uploaded and an HTTP response status indicating success was
        // received.   If the success/failure of an uploaded is indicated by
        // a message in the HTTP response body, you may access it via
        // the ResponseBody property (which is a byte array).

        textBox1.Text = System.Text.UTF8Encoding.UTF8.GetString(upload.ResponseBody);

        MessageBox.Show("Success!");
    }
}

Create an Atom Feed

This sample C# program demonstrates how to create an Atom feed using the Tortuga Atom .NET API.

// Create an Atom Feed in C#

Tortuga.Atom feed = new Tortuga.Atom();



// Initialize the feed.

feed.NewFeed();

feed.SetTopAttr("version","0.3");

feed.SetTopAttr("xml:lang","en");



feed.AddElement("generator","TortugaAtom/1.0");

feed.AddElement("title","My Cool Atom Feed");

feed.AddLink("alternate","http://www.myCoolAtomFeed.com/news","","text/html");

feed.AddElement("tagline","Top Stories");

feed.AddPerson("author","Tortuga Group LLC","","news-feedback@worldwideweb-x.com");

feed.AddElement("copyright","Copyright 2005 Tortuga Group LLC");

feed.AddElementDate("modified",DateTime.Now);



// Build an entry.

Tortuga.Atom entry = new Tortuga.Atom();



// Inialize the object...

entry.NewEntry();



// Build the atom entry

entry.AddElement("title","Tortuga Atom API Released");

entry.AddLink("alternate","http://www.myCoolAtomFeed.com/news/story1.html","","text/html");

entry.AddElement("id","763489562980");

entry.AddElementDate("issued",DateTime.Now);

entry.AddElementDate("modified",DateTime.Now);

entry.AddElementHtml("content","<br><b>This is the HTML content for this story</b><br>");

entry.SetElementAttr("content",0,"type","text/html");

entry.SetElementAttr("content",0,"mode","escaped");



// Add the entry to the feed.

feed.AddEntry(entry.ToXmlString());



// Build another atom entry

entry.NewEntry();

entry.AddElement("title","Tortuga Blogger API Released");

entry.AddLink("alternate","http://www.myCoolAtomFeed.com/news/story2.html","","text/html");

entry.AddElement("id","763489562981");

entry.AddElementDate("issued",DateTime.Now);

entry.AddElementDate("modified",DateTime.Now);

entry.AddElementHtml("content","<br><b>This is the HTML content for the 2nd story</b><br>");

entry.SetElementAttr("content",0,"type","text/html");

entry.SetElementAttr("content",0,"mode","escaped");



// Add the entry to the feed.

feed.AddEntry(entry.ToXmlString());



MessageBox.Show(feed.ToXmlString());

Javascript image rollover

JavaScript image rollovers
JavaScript image rollovers have been one of the most used features for bringing interactivity to web pages. They refer to the change in the image when the mouse cursor is moved over and subsequently off the image.

Rollovers employ two JavaScript event handlers. onmouseover, that captures the action when the mouse cursor is brought over an image and onmouseout, that detects the action when the mouse cursor is moved off an image. These two even handlers are placed inside the anchor tag that surrounds the IMG tag.

We also use the src property of the JavaScript image object. This property refers to the file name of the image being displayed (image source). Finally, we employ the NAME attribute of the HTML IMG tag to explicitly refer to the image in question.
The logic is extremely simple. It's a matter of changing the image when the mouse cursor is placed over it and then changing it back to the original when the mouse cursor moves off the image.
Let's construct our image tag:


<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />

Note: We use the NAME attribute of the HTML IMG tag to give the name sub_but to our image. JavaScript event handlers will refer to the image with this name.You'll notice that the image source (file name) is moveup.gif, which is the image to be displayed when the mouse cursor is off the image.
Now, we place anchor tags around this image:

<a href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>

Lastly, we include the two JavaScript event handlers inside this anchor tag.

<a onmouseover="document.sub_but.src='movedown.gif'" onmouseout="document.sub_but.src='moveup.gif'" href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>

What's Cake PHP

Cake is a rapid development framework for PHP which uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. Our primary goal is to provide a structured framework that enables PHP users at all levels to rapidly develop robust web applications, without any loss to flexibility.

Download

Cutting Edge Content Management

Joomla! is one of the most powerful Open Source Content Management Systems on the planet. It is used all over the world for everything from simple websites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable.
Demo Download Details

PHP Tips & Tricks - A Picture Upload, Part 1

By Vince Barnes

First, I'd like to give credit to my co-author, Mundi King. I've mentioned him before -- he's the PHP guru who can wite code with both hands tied behind his back (well, almost!!) Thanks, Mundi, for great work on this! And now to it......



There are entire shelves of books dedicated to tackling the question "how should one write a program?". It is a difficult question and you will invariably get a different answer depending on the programmer you ask.



One of the harder tasks to writing a PHP application (or any program) is to know how to break down the processes into smaller, more manageable pieces.



Many PHP files start out as simple little scripts, but after time (and many feature requests) they tend to grow into very long, complicated programs. It may even become difficult to determine exactly what the program is doing at any given point. It is at this point where breaking it down will add a bit of clarity to the program flow.



Fortunately, PHP provides a few simple, yet elegant methods for breaking out code into separate pieces. The first one we will concentrate on is PHP's very powerful include() statement.



Let us start with an often requested web application that will allow an end user to upload an image file to the web server and then give them a list of the images they have uploaded in the past.



Starting with first things first, we know that we will need a web form that has a file upload field and a submit button. And we know we will need some php code to actually handle the upload. Here is an example.



<?

//print_r($_POST);



if($_POST["action"] == "Upload Image")

{

unset($imagename);



if(!isset($_FILES) && isset($HTTP_POST_FILES))

$_FILES = $HTTP_POST_FILES;



if(!isset($_FILES['image_file']))

$error["image_file"] = "An image was not found.";





$imagename = basename($_FILES['image_file']['name']);

//echo $imagename;



if(empty($imagename))

$error["imagename"] = "The name of the image was not found.";



if(empty($error))

{

$newimage = "images/" . $imagename;

//echo $newimage;

$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);

if(empty($result))

$error["result"] = "There was an error moving the uploaded file.";

}



}



?>





<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">

<p><input type="file" name="image_file" size="20"></p>

<p><input type="submit" value="Upload Image" name="action"></p>

</form>



<?

if(is_array($error))

{

while(list($key, $val) = each($error))

{

echo $val;

echo "<br>\n";

}

}

?>





Without going into great detail, here is the basic low-down of the up-load.



The bulk of the php code only get activated if $_POST["submit"] is "Upload Image" and this only occurs if someone has pressed the submit button. The form actually submits back to itself by using the <?$_SERVER["PHP_SELF"];?>. Inside the HTML of the form, we will print out any error messages that may have occurred. This script also assumes that there exists a directory named "images" that is writable by the web server. You can usually accomplish this by ftping into your website and making a folder named "images" and changing the permissions of the folder to 777 or xxx or execute execute execute.



You may want to take a look at this tutorial about uploading files.

http://www.htmlgoodies.com/beyond/php/article.php/3472551





Now that we have our uploading script, it is time to take a step back and see if there is a way that we can make it more modular. Imagine a scenario where you are working with a team, and a designer who only knows HTML wants to modify the form. This could lead to a dangerous situation where he inadvertently changes some php code when he just wants to change some HTML.



Here is where php's include() comes in handy. include() lets you grab other files and php will automatically insert everything from that file at the exact place you invoke the include() statement. To accomplish this, one only has to type the file name in-between the parentheses of the statement. For example, include("myfile.txt");



If we separate out our one giant php script so that the html part is in another file and leave most of the php in the original script, the HTML designer can go into that file and not have to worry about changing code.



After putting in our include, the main file would appear like this...



<?

//print_r($_POST);



if($_POST["action"] == "Upload Image")

{

unset($imagename);



if(!isset($_FILES) && isset($HTTP_POST_FILES))

$_FILES = $HTTP_POST_FILES;



if(!isset($_FILES['image_file']))

$error["image_file"] = "An image was not found.";





$imagename = basename($_FILES['image_file']['name']);

//echo $imagename;



if(empty($imagename))

$error["imagename"] = "The name of the image was not found.";



if(empty($error))

{

$newimage = "images/" . $imagename;

//echo $newimage;

$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);

if(empty($result))

$error["result"] = "There was an error moving the uploaded file.";

}



}



include("upload_form.php");



if(is_array($error))

{

while(list($key, $val) = each($error))

{

echo $val;

echo "<br>\n";

}

}



?>





and our mostly HTML file would be this...





<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">

<p><input type="file" name="image_file" size="20"></p>

<p><input type="submit" value="Upload Image" name="action"></p>

</form>





The next step is to have something that actually shows what images are in the directory. We can write a quick script that will iteratively go through images directory and echo out what is there like this...



<?

$handle = @opendir("images");



if(!empty($handle))

{

while(false !== ($file = readdir($handle)))

{

if(is_file("images/" . $file))

echo '<img src="images/' . $file . '"><br><br>';

}

}



closedir($handle);

?>





Again, here is where the power of include comes in handy. We can provide a direct link to our list_images.php, but we can also just include it in our original upload.php This saves us from having to write it twice!



So at the bottom of our upload.php we can just include the include like this...



<?

//print_r($_POST);



if($_POST["action"] == "Upload Image")

{

unset($imagename);



if(!isset($_FILES) && isset($HTTP_POST_FILES))

$_FILES = $HTTP_POST_FILES;



if(!isset($_FILES['image_file']))

$error["image_file"] = "An image was not found.";





$imagename = basename($_FILES['image_file']['name']);

//echo $imagename;



if(empty($imagename))

$error["imagename"] = "The name of the image was not found.";



if(empty($error))

{

$newimage = "images/" . $imagename;

//echo $newimage;

$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);

if(empty($result))

$error["result"] = "There was an error moving the uploaded file.";

}



}



include("upload_form.php");



if(is_array($error))

{

while(list($key, $val) = each($error))

{

echo $val;

echo "<br>\n";

}

}



include("list_images.php");



?>







So far, our little application has been kept basic to emphasize the program flow and not get bogged down in the details. But our next step is to enhance the functionality of our gallery.

ExtJS JavaScript Framework

April 30, 2007 at 10:29 pm · Filed under JavaScript, Ajax Resources
Ext JS, the JavaScript framework with Ajax and UI Components
Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.
I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.
Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

view plaincopy to clipboardprint?

Take a look at the JavaScript generated grid here.
Hopefully this short intro will wet your appetite, more to come soon.
Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

Fancy Sliding Tab Menu V2

Fancy Sliding Tab Menu V2

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation. I have really put it up here for now to hear peoples comments.

demo
Have a look for yourself at the new

Fancy Sliding Tab Menu demo

.

code

Feel free to download the Fancy Sliding Menu Code.

Reference http://www.andrewsellick.com

Aptana RadRails (Beta with RadRails and Ruby )

Aptana RadRails Beta with RadRails and Ruby Development Tools (RDT)

Aptana RadRails is an integrated development environment for the Ruby on Rails framework.
Web Features
Free and open source; cross-platform, stand-alone IDE or Eclipse plug-in
File- and project-based workflow with integrated FTP/SFTP
Real-time, Wiki-based online help; IDE translated into multiple languages
Scriptable using JavaScript (“Aptana Monkey”)
Backed by full-time developers; nearing a million combined downloads
Deep support (including cross-browser tips) for JavaScript, HTML, CSS
Syntax highlighting, auto completion, code assist, error reporting, etc.
Full support for JavaScript and CSS embedded within HTML; unified outlining
Works with any JavaScript, incl. all Ajax libraries
JavaScript debugger with live Firebug integration
Rails Features
Unified, deep support for Ruby, Rails, RHTML…and JS, HTML, CSS!
Syntax highlighting, auto completion, code assist, error reporting, outlining, etc.
Ruby code generation: constructors, overrides, templates, accessors
Refactoring: local to instance variables, extract methods, inlining, renaming…
Fast, integrated debugger
Support for Rails generators, Rake, plugins, and server management
View unit tests and test results
Integrated code analysis
Embedded database navigator and query console
Snippets and wizards
Integrated help, including “Go to definition”, RDoc/RI, and code explorer

Reference http://www.radrails.org/download_rails_rdt.php

Open Source YouTube

Everyone knows what YouTube or Google Video is. Most of them might use to waste a period of time in this kind of service. I'm one of them. I also wonder how it works. Technically, upload video service like YouTube and Google Video is very similar in underlying technology. In particular, all uploaded videos are automatically converted to Flash Video or FLV. The FLVs are stored in the file server. However, the FLVs is nevered shown directly on your browser. Instead, the FLVs are played inside Flash Video Player written in Flash itself. As a result, you can view a video immediately after getting only some part of the full-length video. In other words, Flash Video Player and FLV are the best couple for on-demand video streaming.
If you think it is too complex and too difficult to implement XXXTube by yourself, I will summarize everything you need to know and to have.
You need a Flash Video Player,
Uploading system,
Video conversion system,
Big storage and
Bandwidth
Let's see how to implement XXXTube as fast as possible. For the first requirement, you don't need to write Flash Video Player by yourself. There is an open source project namely Flash Video Player, latest verion is 2.4. The developer claimed that it has been used by YouTube and Blip. Next one, uploading system is very simple and easy. You can write uploading system in PHP in just an hour so you don't need to take care about this piece. The most difficult part of XXXTube is here in the third step, video conversion system. Why?
It should support video formats and codecs as many as possible or at least DivX, MPEG1, MPEG4, MOV, WMV, and 3GPP.
It might be as fast as possible. Otherwise, the uploaded videos may be waiting in the conversion queue. Nobody want this delay happened.
It should be robust and fully automatic. No interactive with other piece of tools.
Don't panic. Open source community is showing its useful, powerful, and awesome results. At least we have FFmpeg, MPlayer, MEncoder, and Transcode. These are more than enough to produce flash video from various video formats and codecs.
The simplest example is shown in official documentation of MPlayer site.

mencoder input.avi \
-o output.flv \
-of lavf \
-oac mp3lame -lameopts abr:br=56 \
-ovc lavc -lavcopts vcodec=flv:vbitrate=500:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 \
-srate 22050

Below is my flavorite.

mencoder input.avi \
-of lavf -lavfopts i_certify_that_my_video_stream_does_not_use_b_frames \
-ovc lavc
-lavcopts vcodec=flv:vbitrate=150 -ofps 15 \
-oac mp3lame -lameopts abr:br=32 -srate 22050 \
-vf scale=320:-3 \
-o output.flv

One last problem is how to handle mass clients to produce flv just in time.

Reference (sugree's blog)

Free Gallery Code

Slightbox Extension for SmoothGallery (Demo)

Slightbox is a lightbox extension for SmoothGallery. It allows you to show images from SmoothGallery in a lightbox. It features a cooler, darker theme designed by Jonathan Schemoul.

Download Source code

Easy SlideShow

You can make the slideshow easily by using Highslide.

What is Highslide JS? (Click Here for example)
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:
No plugins like Flash or Java required.
Popup blockers are no problem. The images expand within the active browser window.
Single click. After expanding the image, the user can scroll further down or leave the page without restoring the image.
The approach uses two separate images. No heavy full-size image packed into thumbnail display size! The full-size image is loaded in the background either on page load or when the user clicks the thumb. You specify this option in the script's settings.
Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself. This fallback is able to cope with most exceptions and incompatibilities.

Download Source code