Tag Archive: Style


HTML code box for formatted code

Filed Under: English by admin — Leave a comment
11.07.2011

I just thought that unformatted code does not look so nice in my wordpress posts and because I am a self-maker and did not want to install any syntax highlighter I just wrote a little C# program which generates HTML code out of richText code. So I can simply paste code from Visual Studio and then I receive the HTML code to display my code from Visual Studio on any HTML page.
Here you can see the source code of this little tool as an example:

//C# Program that generates HTML-Code out of any programming code
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        string Code;
        private void button1_Click(object sender, EventArgs e)
        {
            Code = "";
            Code += "<div class=\"coloredCode\"";
            Code += " style=\"font-family: "+richTextBox1.SelectionFont.FontFamily.Name+";\"";
            Code += "><pre style=\"white-space: pre-wrap;\">";
            System.Drawing.Color oldColor = System.Drawing.Color.Black;
            bool opened = false;
            for (int i = 0; i < richTextBox1.TextLength; i++)
            {
                richTextBox1.Select(i, 1);
                if (richTextBox1.SelectionColor != oldColor)
                {
                    if (i != 0 && opened)
                    {
                        Code += "</span>";
                        opened = false;
                    }
                    if (i != richTextBox1.TextLength - 1 && richTextBox1.SelectionColor!=System.Drawing.Color.Black)
                    {
                        Code += "<span style=\"color: " + System.Drawing.ColorTranslator.ToHtml(richTextBox1.SelectionColor) + ";\">";
                        opened = true;
                    }
                }
                Code += System.Web.HttpUtility.HtmlEncode(richTextBox1.SelectedText);
                oldColor = richTextBox1.SelectionColor;
            }
            if (opened)
            {
                Code += "</span>";
            }
            Code += "</pre></div>";
            System.Windows.Forms.TextBox textbox=new System.Windows.Forms.TextBox();
            textbox.Text = Code;
            textbox.SelectAll();
            textbox.Copy();
            MessageBox.Show("Your HTML-Code was copied to the clipboard", "Copied", MessageBoxButtons.OK, MessageBoxIcon.Information);
        }
    }
}

The program can be downloaded here

Tags: , , , ,
Comment

JavaScript Progress Bar in Windows Style

Filed Under: English by admin — 1 Comment
11.07.2011

Here is a progress bar for JavaScript in Windows Style. I was annoyed of the fact that there is no element for a progress bar like there is in C# or C++, I found some progress bars that looked good but they were just gif animations where the percentage could not be set using javascript. So I copied some graphics of the Windows progress bar using C# and used them in HTML/JavaScript for my bar.
Here is an example of the bar:

This is my code:

<script type="text/javascript" language="javascript" src="/Bilder/progressBar/progressBar.js"></script> <script type="text/javascript">
function updateBar()
{
	if(progress < 300)
	{
		progress++;
		setBar('Bar', progress);
		setBarText('Bar', 'Processing: '+Math.round(getPercentageFromWidth(300, progress))+'%');
	}

}
newBar("Bar", 300, "");
setBarText("Bar", "Initializing...");
var progress=0;
setTimeout('setInterval(updateBar, 10);', 5000);
</script>

while this is the content of the progressBar.js file which is included:

/* JavaScript Progress Bar - Windows Style Code written by Birk Blechschmidt, 2011 http://robofan.de This notice has to stay and may not be modified. */
function setBar(bar, pixels)
{
	document.getElementById(bar).style.width=pixels+"px";
}
function setBarText(bar, text)
{
	document.getElementById(bar+"_text").innerHTML=text;
}
function getWidthFromPercentage(barWidth, percentage)
{
	return Math.round(130*percentage/100);
}
function getPercentageFromWidth(barWidth, width)
{
	return width/barWidth*100;
}
function newBar(id, width, imagePath)
{
	if(imagePath.length > 0)
	{
		if(imagePath.substr(imagePath.length-1, 1)!="/")
		{
			imagePath=imagePath+"/";
		}
	}
	var Code='<div class="progressBarContainer" style="border: none; border-spacing: 0; width: '+width+'px; height: 23px; margin: 0; padding: 0; position: relative; top: 0; left: 0;"><div style="border: none; border-spacing: 0; margin: 0; padding: 0;"><img src="'+imagePath+'left.png" style="border: none; border-spacing: 0; margin: 0; padding: 0;" /><img src="'+imagePath+'middle.png" style="border: none; border-spacing: 0; width: '+eval(width-4)+'px; height: 23px; margin: 0; padding: 0;" /><img src="'+imagePath+'right.png" style="border: none; border-spacing: 0; margin: 0; padding: 0;" /></div><div class="greenBar" style="border: none; border-spacing: 0; position: absolute; top: 0px; left: 0px; overflow: hidden; height: 23px; white-space: nowrap; margin: 0; padding: 0; width: 0px;" id="'+id+'"><img src="'+imagePath+'left_green.png" style="border: none; border-spacing: 0; margin: 0; padding: 0;" /><img src="'+imagePath+'middle_green.png" style="border: none; border-spacing: 0; width: '+eval(width-4)+'px; height: 23px; margin: 0; padding: 0;" /><img src="'+imagePath+'right_green.png" style="border: none; border-spacing: 0; margin: 0; padding: 0;" /></div><div id="'+id+'_text" style="position: absolute; top: 1px; left: 0; overflow: hidden; width: '+width+'px; height: 23px; white-space: nowrap; text-align: center; color: black; z-index: 1; font-size: 13px;"></div></div>';
	document.write(Code);
}

I do not think this code needs an explanation.

Here you can download the zip-archive containing the images of the progress bar.

Tags: , , , , , ,
Comment