Software RnD: CSS

Showing posts with label CSS. Show all posts

10 February, 2019

Angle meter

Just released one more just-for-fun project.
Angle meter online

Measure angles on the web.

24 February, 2009

I'm happy to introduce one more my project: PHP-reference.

This is the interactive engine for PHP documentation: the client side is implemented with ExtJS/JavaScript, and PHP for server side.
It uses original PHP documentation (processed via regexps and colored with CSS styles) as a data source.

I've tried to create it as usable as possible... any requests, ideas welcome!

24 October, 2008

Eclipse icons

How to extract icons from Eclipse

I've created it in few steps:

Downloaded and unzipped eclipse

Extracted all images from eclipse directories, subdirectories, zips and jars*

Filtered only unique files*

Sorted images by dimension (16x16, 24x24, 32x32, etc.)*

Removed large images (that not look like icon)

Created html pages (via PHP script)

* Via my shell scripts.

This is one script from this project:

#!/bin/bash

#Find and copy only unique files (with same size and checksums) from $SOURCE directory to $OUTPUT.

SOURCE=output
OUTPUT=images

rm -rf $OUTPUT
mkdir -p $OUTPUT

uniqProcess() {
    
    echo >xqx_unique.idx
    while read; do
        echo -ne \\r$REPLY
        echo $REPLY  $(stat -c%s $REPLY)+$(md5sum $REPLY|cut -f 1 -d ' ')+$(cksum $REPLY|cut -f 1 -d ' ')>>xqx_unique.idx
    done
    sort -k 2 xqx_unique.idx|uniq -f 1|cut -f 1 -d ' '|xargs -I '{}' cp '{}' $OUTPUT
}

find $SOURCE -type f |uniqProcess

17 October, 2008

emc

One more mine project: emc - remote file navigator.

It developed on:

Client side - Flex
Server side - PHP
RPC container - XML

This is just beta version.

It is possible to release complete version (add new functionality or implement another Server side, for example). And I'm looking for the people, who want to use this in their commercial projects.

11 September, 2007

HTML Encoder

I've released new online service: HTML Encoder
It replaces ampersands, tabs, less/greater braces and prepares source code for posting into blog.

If you prefer shell scripts, you may use this:


sed -e 's/\x26/\&amp;/g;s/\x3c/\&lt;/g;s/\x3e/\&gt;/g' sourcefile.txt | expand -t 4 >sourcefile.blog

See this project on GitHub

17 August, 2007

Interleaved table

Every time I hear question: "How to paint odd and even rows in html table in different colors".

Here is the example how to do it simple:


<html>
<head>

    <style type="text/css">

        .odd {background-color: #eee;}
        .even {background-color: #fff;}

    </style>

    <script type="text/javascript">

        function zebra(tableId)
        {
            var table=document.getElementById(tableId);
            if (table)
            {
                var rows = table.getElementsByTagName("tr");

                for (var i = 0; rows.length > i; i++)
                {
                    rows[i].className = ((i % 2) == 0 ? "odd" : "even");
                }
            }
        }

    </script>
</head>

<body>

<table id="irregular">
    <tr>
        <td>break</td>
        <td>broke</td>
        <td>broken</td>
    </tr>
    <tr>
        <td>buy</td>
        <td>bought</td>
        <td>bought</td>
    </tr>
    <tr>
        <td>catch</td>
        <td>caught</td>
        <td>caught</td>
    </tr>
    <tr>
        <td>forget</td>
        <td>forgot</td>
        <td>forgotten</td>        
    </tr>
</table>


<script type="text/javascript">
    zebra("irregular");
</script>

</body>
</html>

11 August, 2007

HowTo move objects within the html page via JavaScript

For one of my web projects I created universal JavaScript for moving any objects within the page. This is my simple Drag and Drop implementation.
I'm publishing this source. I think, it will be illustrative and useful example.

This screenshot shows how to this script works.



<html>

<body>

<style type="text/css">
    .movable {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: yellow;
        cursor:pointer;
        border:solid 1px gray;
    }
</style>

<script type="text/javascript">

    var posx;
    var posy;
    var zMax = 0;
    var obj;

    function drag_start(itemToMove, e)
    {
        itemToMove.style.zIndex = ++window.zMax;
        if (!e) e = window.event;
        obj = itemToMove;
        posx = e.clientX - parseInt(obj.style.left);
        posy = e.clientY - parseInt(obj.style.top);
        itemToMove.style.cursor="move";
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
    }

    function drag_stop(e)
    {
        if (obj) {
            obj.style.cursor="pointer";            
            obj = null;
        }
    }

    function drag(e)
    {
        if (!obj) return;

        if (!e) e = window.event;

        var height, width;
        if (document.all)
        {
            height = document.body.offsetHeight;
            width = document.body.offsetWidth;
        }
        else if (document.layers)
        {
            height = window.innerHeight;
            width = window.innerWidth;
        }
        var newX = e.clientX - posx;
        var newY = e.clientY - posy;
        if (newX < -obj.clientWidth / 2)
        {
            newX = -obj.clientWidth / 2;
            posx = e.clientX - parseInt(obj.style.left);
        }
        if (newY < -obj.clientHeight / 2)
        {
            newY = -obj.clientHeight / 2;
            posy = e.clientY - parseInt(obj.style.top);
        }

        obj.style.left = newX;
        obj.style.top = newY;

        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
    }

    document.onmousemove = drag;
    document.onmouseup = drag_stop;

    document.ondragstart = function()
    {
        return false;
    }
    document.onselectstart = function()
    {
        return false;
    }
</script>

<div class="movable" style="left:100px; top:100px;" onmousedown="drag_start(this,event)"></div>
<div class="movable" style="left:200px; top:200px;" onmousedown="drag_start(this,event)"></div>
</body>
</html>

E.g.: I used this script in my Online Ruler.
You may see how it works, see in action.