CSS Compress Tool

Today, while doing search on net for CSS Compression mechanisim came to knwo about some of the very interesting free online Compression Tools.
here we go –
1. CSS Compression Tool
2. Compression Tool
What exactly it does ?
Basically it takes out all the extra spaces, alignments or seperations and makes it ugly:).
Yes, it gives good light file size.. which matters a lot and this adds great advantage for any project.

CSS Hack for browsers –

Hi all, browser compatibility one of the most complicated issue we face during our development. So whenever i get into problem, go and search on internet. Here, I like to share Paul Irish.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}


/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }



/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Expand and Collapse Container

Expand and collapse option through JS and CSS
Follow steps
1. Copy this code in notepad
2. Save your note pad as .html or .htm
3. Open with browser… solution is ready 🙂


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<style type="text/css">
h4{
color:#719500;
}
</style>
</head>

<script type="text/javascript">
var collapseDivs, collapseLinks;

function createDocumentStructure (tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement &&
(siblingContainer = document.createElement('div')) &&
siblingContainer.style)
{
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer,

nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';

collapseDivs[i] = siblingContainer;

createCollapseLink(element, siblingContainer, i);
}
else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}

function createCollapseLink (element, siblingContainer, index) {
var span;
if (document.createElement && (span = document.createElement

('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode

(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('[+]'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
}
}

function collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = '[+]';
}
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = '[-]';
}

if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}




</script>
<script type="text/javascript">
<!--
function popup(url)
{
var width = 1200;
var height = 927;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<script type="text/javascript">
window.onload = function (evt) {
createDocumentStructure('h4');
}
</script>

<style type="text/css">
h4{
color:#719500;
}
</style>

<div style="width:70%; float:left;">
<DIV>
<H4>Question? </H4>
<P>Answer</P>
</DIV>
</div>

You can write number of questions and answer, this is one of the best solution from the user experience angle. This helps to make layout without having vertical scroll bar.

Thanks folks.. coming days.. ll add some more interesting stuffs here…

POP up html window, javascript , Css

Number of times, i have tried to make html popup based application… finally i have got very good solution. Here m framing that code, its output is well enough. Take this and paste as it is in notepad and save it as a .html file.. and see the output. To make attractive, u can go for images within CSS.
follow these steps
1. Copy this code in notepad
2. Save notepad file with .html extension
3. Popup application is ready



<html>
<head>
<title>Desktop Provisioining Portal</title>
<style type="text/css">
#child
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -365px;
margin-top: -250px;
z-index: 3;
width: 730px;
height: 520px;
background-color:black;
background-repeat: repeat-x;
border: solid 3px #2c7292;
}
#divTitleBar
{
position: relative;
text-align: right;
width: 100%;
margin-top: 5px;
margin-left: -5px;
}
</style>

<script language="javascript">
function show(HtmlPage)
{
var childDiv=document.getElementById('child');
childDiv.style.display="block";
var childWebPage=document.getElementById('childSite');
childWebPage.src=HtmlPage;

}
function closeChild()
{
var childDiv=document.getElementById('child');
childDiv.style.display="none";

}
</script>

</head>
<body>
Primary Layer Contents
<input type="button" value="window 1" onclick="show('http://artsrajesh.blogspot.com/');" />
<input type="button" value="window 2" onclick="show('http://artsmaths.blogspot.com/');" />
<input type="button" value="window 3" onclick="show('http://artseye.blogspot.com/');" />
<div id="child" style="display: none">
<div id="divTitleBar">
<input type="button" value="close" alt="" onclick="closeChild();" />
</div>
<iframe id='childSite' style="width: 725px; height: 478px;"></iframe>
</div>
</body>
</html>