Software RnD: HTML

Showing posts with label HTML. Show all posts

10 February, 2019

Angle meter

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

Measure angles on the web.

07 January, 2013

Convert image to base64

It is extremely simple, and without server-side:

<script>
    function convertToBase64(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function (event) {
            document.getElementById('text').value = event.target.result;
            document.getElementById('text').select();
        };
        reader.readAsDataURL(file);
    }
</script>

<input id="file" type="file" onchange="convertToBase64(event)">
<textarea id="text"> </textarea>

You may use it at: ImageToBase64 or directly from here:

See this project on GitHub

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

28 February, 2008

Xml elements and attributes in the ExtJS table

Ext JS - JavaScript Library is pretty powerful JavaScript/AJAX framework for building of Rich Internet Applications.

I've used it in my last public web project: Ubuntu index.

ExtJS has set of useful UI controls, internal components and strong AJAX, XML and JSON support.

E.g. you can present this XML file:



items.xml

<?xml version="1.0"?>

<items>

    <item id="alien-arena">
        <name>Alien Arena</name>
    </item>

    <item id="nexuiz">
        <name>Nexuiz</name>
    </item>

    <item id="openarena">
        <name>OpenArena</name>
    </item>

</items>

as a table via this HTML + JavaScript code:



table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>ExtJS Table Sample</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>

<script type="text/javascript">
    Ext.onReady(function() {
        var reader = new Ext.data.XmlReader({record: "item"},
                [{name: "id", mapping:"@id"}, "name"]);

        var store = new Ext.data.Store({url: "items.xml", reader: reader});

        var columnModel = new Ext.grid.ColumnModel([
        {header: "Id", dataIndex: "id"},
        {header: "Name", dataIndex: "name"}]);

        var table = new Ext.grid.GridPanel({
            store: store,
            height: 200,
            cm: columnModel,
            renderTo: "table"
        });
        store.load();
    });
</script>

<div id="table" style="width:300px; height:200px;"></div>
</body>
</html>

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

10 September, 2007

Javascript injection

There is the way to include javascript into any html pages via 'javascript:' protocol. Internet Explorer and FireFox support this.
Just open web page and replace site's URL with some javascript e.g.: javascript: alert('WOW!');

I've released online tool for web developers that based on this feature - Hyperbox. Developers can use it for design tasks.

It is simple to use:

Open any site (e.g.: google.com).
Replace site's URL with this string:
javascript:(function(){var s=document.createElement('script'); s.src='http://xantorohara.jino-net.ru/hyperbox/hyperbox.js'; s.type='text/javascript'; document.getElementsByTagName('head')[0].appendChild(s); })();
Move it, resize, change color and borders, measure.

This javascript tool is absolutely free for using and modifying.
Everybody may download the script from my site and investigate it.

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.

17 July, 2007

HowTo post html code into blog

Sometimes bloggers need to publish some text, which not displayed correctly into their blog.

For example, you can't post this html directly into your blog:


<html>
<head>
    <title>XLam</title>
</head>
<body>
<script language='javascript' src='xqx.web.xlam.XLam.nocache.js'></script>
<div id='uid'></div>
</body>
</html>

but you can convert it into this format:


&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;XLam&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script language='javascript' src='xqx.web.xlam.XLam.nocache.js'&gt;&lt;/script&gt;
&lt;div id='uid'&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

and then successfully publish it.

For this purpose, bloggers may use this script:


#!/bin/bash

#This simple shell script replaces symbols in the given xml/html file and writes it to file file.blog
#Symbols to replace:
# '<' with &lt;
# '>' with &gt;
# '&' with &amp;
#
#Usage: html2blog.sh file

sed -e 's/\x26/\&amp;/g;s/\x3c/\&lt;/g;s/\x3e/\&gt;/g' $1 >$1.blog

It works on Linux/Unix platforms or under Cygwin environment.