RSS .92| RSS 2.0| ATOM 0.3
  • Home
  • About
  •  

    Semi-disabled form text fields with CSS

    July 14th, 2008

    The other day on the DigitalPoint webmaster forums, I had somebody ask this question “How to half-disable a form field”.

    From all the HTML I knew, it was not possible in a straight-forward way! But we can manipulate with CSS.

    The HTML-CSS

    <span style="border: 2px inset;">
       <input style="border: none; text-align: right;" name="half_1" size="3" type="text" value="ABC" />
       <input style="background: #FFFFFF; border: none;" name="half_2" readonly="readonly" size="3" type="text" value="123" />
    </span>

    Solution to: ‘Warning: preg_match() [function.preg-match]: Unknown modifier ‘/’ in …. on line …’

    July 12th, 2008

    Regular expressions by themselves are difficult for many to implement. An error that many of the regex newbies will encounter is:

    Warning: preg_match() [function.preg-match]: Unknown modifier ‘/’ in ….. on line …

    Solution

    This error occurs whenever the pattern you are looking for contains a literal forward-slash. You should escape every literal forward-slash with a backslash.

    For those of you interested in knowing more

    The syntax for preg_match() is

    int preg_match  ( string $pattern  , string $subject  [, array &$matches  [, int $flags  [, int $offset  ]]] )

    Example of a pattern to search for alphabetic substrings in a string would be:

    $pattern="/[a-z]+/";

    In the above, pattern example, the two forward slashes you see are the delimiters. The PHP parser is programmed to understand that anything in-between those two delimiters is the actual pattern we are looking for. However, the pattern we just used above will look only for lowercase alphabets. If we want PHP to look for even upper case or mixed case substrings, we need to inform the PHP parser accordingly.

    All such additional instructions are provided to the PHP parser using entities which are called as ‘modifiers’. These modifiers are placed at the end of the pattern, after the delimiting forward-slash. Look below to see how we place the modifier named ‘i’ to instruct PHP parser to do a case-insensitive pattern matching

    $pattern="/[a-z]+/i";

    Any character appearing after the end delimiting forward slash is ‘assumed’ by the PHP parser as a delimited. A number of delimiters are defined by PHP. A full list of modifiers can be found here.

    If you forget to escape a literal forward-slash in your pattern parameter, PHP assumes that the pattern has been ended by the delimiter and characters after that forward-slash are ‘modifiers’. When the parser finds that the modifiers are not defined by PHP, its outputs the error saying ‘Unknown modifier’.


    Photofiltre: Creating a Star icon with rounded corners

    July 9th, 2008

    With Web 2, those simple icons are outdated. Icons should be polished with gradient, look cute if they have rounded corners. One such icon I needed recently was the ‘Star’ icon, like the one that resembles ‘Favorites icon’ in Internet Explorer.

    In this tutorial, we will use Photofiltre an excellent freeware image processing tool. Install Photofiltre and you are ready to use it. Follow the below steps:

    1. Run Photofiltre. Start by creating a new image. Go to File>New or Ctrl+N. Enter the width and height of the images or leave it to default.
    2. Go to Selection>Load shape. An open file dialog will be presented to you to choose selection patterns from. Open the file ‘Star01.pfs’ or ‘Star02.pfs’. In this tutorial, I have used ‘Star02.pfs’. If no such file is available in the ‘Selections’ folder, then please download it by clicking on the ‘Download file’ link on the next line. The ‘Selections’ folder is under the folder where you installed Photofiltre
      [-]Download star02.pfs
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      
      10
      170;195
      150;120
      210;75
      130;75
      105;0
      80;75
      0;75
      65;120
      40;195
      105;150
    3. Once the shape is loaded, you will see the outline of it as show below:
      Loading the star shaped selection
    4. Now fill the selection with any color of your choice:
    5. Now apply the filter ‘Progressive contour’. Apply this by going to Filters>Stylize>Progressive contour. Choose any color for the contour. Remember to check the option that says ‘Outside’. Click ok.
    6. Select the magic wand tool(Magic wand tool) and click in the white space around the image. Now Right click and select ‘Invert selection’. The entire star with its contour will be selected and will resemble the below image.
    7. Copy the shape using ‘Select>Copy shape’. Wherever you need to use that shape, paste the copied shape using ‘Selection>Paste shape’. Now if you wish fill it with a color of your choice and final output will look like the below:
      Star with rounded corners completed
      Your task is now complete.
    8. Note:
      • You can save the selection by going to Selection>Save shape.
      • The combination of progressive contour and magic wand tool can be used to obtain rounded corners from almost any image! So remember it!

    Check if key exists or not in a JavaScript array

    July 7th, 2008

    Since I work with PHP as well as JavaScript, I know that there is no easy in-built function in JS to check if a given key exists or not in a JavaScript array object. Google-ing for the same returned some user-made functions that were either too long and complicated or even impractical with huge arrays.

    The below small snippet works just fine:

    [-]View Code JAVASCRIPT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <script type="text/javascript">
    //lets setup a sample array and its key-and-values
    var array=new Array();
    array['name']='Rohan Shenoy';
    array['gender']='Male';
    array['age']='21';
     
    //lets try to find an key which exists
    if(array['name']==undefined)
    {alert('That key is undefined');}
    else
    {alert('That keys exists');}
     
    //lets try to find an key which does NOT exist
    if(array['residence']==undefined)
    {alert('That key is undefined');}
    else
    {alert('That keys exists');}
    </script>

    As simple as that!