menu

Saturday, 27 July 2013

Find URLs in Text, Make Links

The basic function of this is to find any URLs in the block of text and turn them into hyperlinks. It will only find URLs if they are properly formatted, meaning they have a http, https, ftp or ftps.
<?php

function autolink($str, $attributes=array()) {
 $attrs = '';
 foreach ($attributes as $attribute => $value) {
  $attrs .= " {$attribute}=\"{$value}\"";
 }

 $str = ' ' . $str;
 $str = preg_replace(
  '`([^"=\'>])((http|https|ftp)://[^\s<]+[^\s<\.)])`i',
  '$1<a href="$2"'.$attrs.'>$2</a>',
  $str
 );
 $str = substr($str, 1);
 
 return $str;
}

?>

Syntaxe

string autolink ( string $str [, array $attributes = array() ] )

Arguments

  1. str - La chaîne d'entrée.
  2. attributes - Optionnel. Si spécifié, ce paramètre doit être un tableau associatif de format $arr['attribute'] = $value.

Valeurs de retour

Retourne une copie de la chaîne str dont les urls ont été encapsulées dans des balises <a>.

Exemples

Exemple #1 Exemple avec autolink()
<?php
$str = 'A link : http://example.com/?param=value#anchor.';
$str = autolink($str);
echo $str; // A link : <a href="http://example.com/?param=value#anchor">http://example.com/?param=value#anchor</a>.
?>
Exemple #2 Exemple avec autolink()
<?php
$str = 'http://example.com/';
$str = autolink($str, array("target"=>"_blank","rel"=>"nofollow"));
echo $str; // <a href="http://example.com/" target="_blank" rel="nofollow">http://example.com/</a>
?>

Tuesday, 23 July 2013

Extract URL contentwith PHP and jQuery like Facebook

You may have seen Facebook’s technique that extracts content of remote URL when a user types a URL in the status text-box filed. In this article, we will try to create a similar type of Ajax based URL content extractor using jQuery and PHP.

Extract URL Content

Ok now start with jQuery code, we will extract the first typed URL using regular expression, when user types the URL in the text box , and then we make Ajax request to PHP file, which will extract the content from URL and send content back to index page as JSON format, which we will output in an element using jQuery.
Demo
Read More 

Friday, 12 July 2013

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin

jQuery OneByOne Slider Plugin - CodeCanyon Item for Sale

LIVE DEMO

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make Twitter Bootstrap Carousel support the one by one animation.

Features:

  • CSS3 driven animation, hardware accelerated CSS3 transitions for supported modern browser.
  • Responsive support, example included.
  • Mobile friendly, you can use it in a touch device.
  • It’s lightweight, the compressed javascript is only 4kb.
  • Optional auto delay slideshow, optional hove to pause the slideshow.
  • Each slide or element’s animation can be customized.
  • Optional drag function of mouse.
  • Optional animation style, can be in random or any other type.
  • Optional arrow and buttons.
  • FAQ is included in the source package.
  • Free update, you can download the future update for free.

About the CSS3 transition

Note: The CSS3 transition only works in the modern browser like Firefox, Safar and Chrome. Which doesn’t work in IE7, 8 & 9, it seems the IE 10 will support it.

For jQuery 1.8.0 user

It seems there is a bug with jQuery 1.8.0, please download the Uncompressed version of jQuery and comment line 4521, then this plugin will work fine.
// throw new Error( "Syntax error, unrecognized expression: " + msg );

Available plugin settings

// the wrapper's name        
className: 'oneByOne', 
// the wrapper div's class name of each slider        
sliderClassName: 'oneByOne_item',  
// pause the auto delay slideshow when user hover                    
pauseByHover: true, 
// the global ease animation style, 
// take effect if you don't pre-defined it in the element
easeType: 'fadeInLeft', 
// width of the slider        
width: 960,  
// height of the slider        
height: 420, 
// the delay of the touch/drag tween        
delay: 300,  
// the tolerance of the touch/drag          
tolerance: 0.25, 
// enable or disable the drag function by mouse        
enableDrag: true, 
// display the previous/next arrow or not         
showArrow: true,  
// auto hide the arrows when user leave the slider or not
autoHideButton: true,
// display the circle buttons or not        
showButton: true,  
// auto play the slider or not        
slideShow: false,  
// the delay millisecond of the slidershow        
slideShowDelay: 3000, 
// set responsive to true, when you'll change the 
// slider's size with the media query in CSS        
responsive: true
// when slider is smaller than minWidth, 
// the text are be hidden in the responsive            
minWidth: 480

Available easeType

‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’, ‘fadeInLeft’, ‘fadeInRight’, ‘fadeInRight’, ‘bounceIn’, ‘bounceInDown’, ‘bounceInUp’, ‘bounceInLeft’, ‘bounceInRight’, ‘rotateIn’, ‘rotateInDownLeft’, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’, ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘flipInX’, ‘flipInY’, ‘lightSpeedIn’ or ‘random’

READ MORE 

Add Speech Recognition to input boxes in HTML

Google search text box has a voice recognition feature which is very helpful for inputting long sentences and difficult words.
This feature can be brought to normal input text boxes also. But this feature works only in browsers which use the webkit rendering engine (ex: Google Chrome version 11 and above).
In order to add the voice input feature, the attribute x-webkit-speechshould be added to the input boxes.

Example:

<input type="text" x-webkit-speech />
This will add a “Mic” icon to the input box. After clicking the mic, the user can talk to input the data.
Below is a live example.

Other browsers

If you are viewing from other browser, you will see the below output.
Webkit voice input

The onwebkitspeechchange attribute:

There is a attribute called “onwebkitspeechchange” which allows to trigger a javascript event when the voice input is over.

Example

<script type="text/javascript">
function voiceInputOver(val){
     alert("Voice input is complete");
     alert("Your input is " + val);
}
</script>
<input onwebkitspeechchange="voiceInputOver(this.value)" x-webkit-speech />

Demo


This is a very useful feature which will soon become popular in all browsers by default.

Saturday, 6 July 2013

IMCrypt Javascript and PHP image encrypt/decrypter

IMCrypt is an image protection script that basically scrambles and descrambles images you choose on your website so that they can be easily viewed, but not as easily downloaded. This is accomplished by “encrypting” the image one-time on the server side using PHP and “decrypting” it when the client needs it through a piece of Javascript.
If this sounds weird, please check out the live demo to see the script in action!

Requirements

IMCrypt requires:
  • HTML5 Canvas support (browser support is outlined here)
  • PHP’s GD library (included from 4.3!)
  • Javascript to be enabled (of course)IMCrypt - Image Protection - CodeCanyon Item for Sale

Thursday, 4 July 2013

Send and Receive JSON between Android and PHP Web Service

Introduction

You are creating an Android app and want to read data from a MySQL database and send data. We will create a Web Service in PHP, read from the MySQL database, and let the Android connect with the Web Service and send data, and the Web Service will save it and another Web Service will read data from MySQL and send it to the Android app.

Using the Code

First, we have to create the Web service to read data from the MySQL database.

Wednesday, 3 July 2013

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us provides you with easy-to-use, cross-browser user
interface JavaScript libraries to make your web sites
and web applications fly.

What's inside? animation framework,
drag and drop, Ajax controls
DOM utilities, and unit testing.

It's an add-on to the
fantastic Prototype
framework.   READ MORE