GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Monday, May 14, 2012

Positioning Properties


Positioning Properties
1.       Static
This was default positioning.
Top, right, bottom and left don’t make effects
Parent=all. Has no effect. Keep everything in order.
2.       Fixed
This like absolute positioning. Like absolute but more extreme – it out of the order even the parent box. It’s work even the parent is relative positioning.
Parent=all. Out of control of the parent box.
Display block is broken.
It like display:none, but visible.
3.       Relative
It’s always placed relative to its normal position. If TRBL is set to zero, it no effect – coz it’s reference point is its normal position.
Parent=all. In the control of the parent box.
4.       Absolute
Parent=relative. In the control of parent box.
Parent=static. Out of control of parent box.
Parent=fixed. Out of control of parent box.
Parent=absolute. In the control of the parent box.
Display block is broken.
It like display:none, but visible.

Share/Bookmark

Thursday, May 10, 2012

Buttoning

<h1>Beautiful Look And Feel Of Button</h1>
<button>A Click</button>

<style>
button
{
background-image: -moz-linear-gradient(center top,#faf,#555);
border: 1px solid #aaa;
-moz-border-radius: 5px;
height: 30px;
width: 100px;
color: white;
}
</style>
Share/Bookmark

Triangleling

<h1>Counter Back Of Triangle</h1>
<p></span>
<style>
p
{
display: block;
width: 0px;
height: 0px;
border-color: #aaa transparent transparent;
border-style: solid dashed dashed;
border-width: 100px 100px 0px;
}
</style>
Share/Bookmark

Wednesday, May 9, 2012

Query Suggestion

<h1>Drop Drown</h1>
<input type="text" id="text" onkeyup="show(event)"/>
<p id="view"></p>


<script>
var data = ["apple","banana","mango",
           "watermelon","orange","papaya"];

function show(event){
    var text = document.getElementById('text').value;
    var view = document.getElementById('view');
    var len = text.length;
    var plot = "";

    if (len==0){
        view.innerHTML = "";
        return;
    }

    // we iterate all the available data to match on 
    // the server
    for(i=0;i<data.length;i++){
        // we just take the query that match 
        // the first main of the saved words on the server.
        // for each length of the string.
        // we compare if the query from the user 
        //is match the defined words.
        if(text==data[i].substr(0,len)){
            plot = plot+"<br/>"+data[i];
        }
    }

    view.innerHTML = plot;
}

</script>

Share/Bookmark