Basics Blog: March 2012

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test CSS</title>
<style type="text/css">
.wrapper
{
position:relative;
top:0;
left:auto;
right:auto;
bottom:0;
background-color:#CCFFFF;
width:960px;
padding: 50px 50px 50px 50px;
}
.text
{
position:relative;
margin-left:0px;
margin-top:0px;
margin-bottom:auto;
background-color:#FF0000;
}

</style>
</head>

<body>
<div id="wrapper" class="wrapper">
<div id="text" class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</div>
<div id="text2" class="text2">
</div>
</div>
</body>
</html>

addNews.php

<body onLoad="Init()">

<div class="row">
<div class="wrapper">

<div class="grid2">

<br/><br/>
<div class="boxcontainer2">
<center><h3>ADD NEWS! </h3></center>
<form name="addNews" action="../controller/submit_controller.php" method = 'post' onsubmit="return validate_addNews()" enctype="multipart/form-data">
<div class="box">
<input name="controller_type" type="hidden" value="news_controller" />
<h4>Title : </h4><input type = 'text' name = 'title' class='tb7' value="<?php echo $news['title_nws'];?>"/><br/><br/>
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<img alt="Bold" class="butClass" src="images/bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
<img alt="Italic" class="butClass" src="images/italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
<img alt="Underline" class="butClass" src="images/underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">

<img alt="Left" class="butClass" src="images/left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
<img alt="Center" class="butClass" src="images/center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
<img alt="Right" class="butClass" src="images/right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">

<img alt="Ordered List" class="butClass" src="images/ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
<img alt="Bulleted List" class="butClass" src="images/bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">

<img alt="Text Color" class="butClass" src="images/forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()">
<img alt="Background Color" class="butClass" src="images/bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()">

<img alt="Hyperlink" class="butClass" src="images/link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
<img alt="Image" class="butClass" src="images/image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()">
<img alt="Horizontal Rule" class="butClass" src="images/rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">

</td>
</tr>
</table>

<iframe id="iView" name="iView" style="width: 415px; height:205px" onMouseOut="content.value=iView.document.body.innerHTML ;">
</iframe>
<input type="hidden" id="content" name="content"></textarea>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass" colspan="1" width="80%">
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
<option value="">-- Font --</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Sans Serif">Sans Serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)">
<option value="">-- Size --</option>
<option value="1">Very Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">Larger</option>
<option value="6">Very Large</option>
</select>
<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">
<option value="">-- Heading --</option>
<option value="Heading 1">H1</option>
<option value="Heading 2">H2</option>
<option value="Heading 3">H3</option>
<option value="Heading 4">H4</option>
<option value="Heading 5">H5</option>
<option value="Heading 6">H6</option>
</select>
</td>
<td class="tdClass" colspan="1" width="20%" align="right">

   
</td>
</tr>
</table>

<?php //echo $news['content_nws'];?><br/><br/>

<input type = 'submit' value = 'ADD!' name='submit'/>

</div>
</form>

</div>

</div>

</div>
</div>

</body>

editor.js

var viewMode = 1; // WYSIWYG

function Init()
{
iView.document.designMode = 'On';
}

function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}

function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}

function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}

function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}

function doBold()
{
iView.document.execCommand('bold', false, null);
}

function doItalic()
{
iView.document.execCommand('italic', false, null);
}

function doUnderline()
{
iView.document.execCommand('underline', false, null);
}

function doLeft()
{
iView.document.execCommand('justifyleft', false, null);
}

function doCenter()
{
iView.document.execCommand('justifycenter', false, null);
}

function doRight()
{
iView.document.execCommand('justifyright', false, null);
}

function doOrdList()
{
iView.document.execCommand('insertorderedlist', false, null);
}

function doBulList()
{
iView.document.execCommand('insertunorderedlist', false, null);
}

function doForeCol()
{
var fCol = prompt('Enter foreground color', '');

if(fCol != null)
iView.document.execCommand('forecolor', false, fCol);
}

function doBackCol()
{
var bCol = prompt('Enter background color', '');

if(bCol != null)
iView.document.execCommand('backcolor', false, bCol);
}

function doLink()
{
iView.document.execCommand('createlink');
}

function doImage()
{
var imgSrc = prompt('Enter image location', '');

if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
}

function doRule()
{
iView.document.execCommand('inserthorizontalrule', false, null);
}

function doFont(fName)
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}

function doSize(fSize)
{
if(fSize != '')
iView.document.execCommand('fontsize', false, fSize);
}

function doHead(hType)
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}

function doToggleView()
{
if(viewMode == 1)
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;

// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();

viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;

// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();

viewMode = 1; // WYSIWYG
}
}

rate1_bos	rate2_bos	rate3_bos	rate4_bos	rate5_bos
2	4	6	8	10
0	0	3	0	0

Basics Blog

Total Pageviews

Saturday, March 10, 2012

How to Grow space when content grows in a web page

Wednesday, March 7, 2012

Rich Text Editor

Average of multiple columns

Total Views

About Me

Blog Archive