JSFiddle - React, Tailwind, and code Playground

by spacexplorer

HTML

<body>
    <div id="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
    </div>
    
    <div id="box"></div>
    
    
    <form>
        <label for="myInput" class="inline">myInputLabel</label>
        <input id="myInput" name="myInput" />
        
        
    </form>
    
</body>

CSS

a
{
    display: block;
    float: left;
    border: 1px solid #000;
    width: 100px;
    height: 20px; 
    padding: 2px;
    
}

body
{
    background-color: orange;   
    margin: 0;
    padding: 0;
    
}


.red
{
    
    border: 2px solid red; 
    padding: 1px;
}

.blue
{
    
    border: 2px solid blue;    
    padding: 1px;
}


#box

{
    
    width: 20px;
    height: 20px;
    background-color: blue;   
    
}


.yellow
{
    
    border: 2px solid #ff0;
    padding: 1px;
}




#nav
{
    margin: 0px auto;   
    
}


form
{
 width: 300px;
 display: block;
 float: left;   
    
    
}

JavaScript

window.addEvent('domready', function() {

    //if(!test)alert("not defined");
    // alert(this);
    
    
    
    
    
    $$('label.inline + input').setStyle('border','2px red solid');
    
     $$('a + a').setStyle('border-color','red');

    
    activateInlineLabels();
    
    

});



function activateInlineLabels()
{
    
    
    var $labelOpacity = 1;
    
    $$('label.inline').each(function(label){
        
       label.setStyles({
                    color: labelColor,
                    position: 'absolute',
                    top: 6,
                    left: restingPosition,
                    display: 'inline',
                    'z-index': 99
                });
        
        
        
        
        
    }
    
    
    
    
}

        //when the dom is ready...
        window.addEvent('domready',function() {
            //a few settings
            var labelColor = '#999', restingPosition = 5;
            //for every form field
            $$('form#info .slider label').each(function(label){
                //set the label enhancements into place
                label.setStyles({
                    color: labelColor,
                    position: 'absolute',
                    top: 6,
                    left: restingPosition,
                    display: 'inline',
                    'z-index': 99
                });
                //get input value
                var input = label.getNext('input');
                //grab label width, add resting position value
                var width = label.getSize().x;
                var move = width + restingPosition;
                //onload, check if a field is filled out, if so, move the label out of the way
                if(input.get('value') !== '') {
                    label.tween('left',0 - move);
                }
                // if the input is empty on focus move the label to the left
                // if it's empty on blur, move it back
               ...