the style don't change for the a span

[maxwel]

here is the part of the code which i use to add a clear button for an input field *inside it) but the problem i want when the input field is focused the span clear button move to the right 10px and when its blured it get back to 0px to the right i tried the script with alert and it worked the problem is that the clear button dont move :S idk why

<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span id="clear" class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').focus();
                }));
            });


        </script>
<style>
         span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 2px;
right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
            }
        </style>
<script>
var textFieldInFocus;
function handleOnFocus(form_element)
{
 var element = document.getElementById('clear');
element.style.right = "10px";
}
function handleOnBlur()
{
      var element = document.getElementById('clear');

element.style.right = "0px";
}
</script>

html:

<input size="150" class="deletable" onfocus="handleOnFocus(this)" onblur="handleOnBlur()" type="text" />

any idea how to do it?

 

Thanks alot,

Lion

Edited June 22, 2013 by maxwel

[maxwel]

Solved, Thanks

[maxwel]

thought it was solved but unfortunately it wasnt, it actually now move but to the wrong direction

<script>


function handleOnFocus(form_element)
{
 var $span = $('.deleteicon span');
$span.css({'right': '10px'});

}
function handleOnBlur()
{
 var $span = $('.deleteicon span');
$span.css({'right': '10px'});     
            
           
}
</script>

it don't want to go to the right when i clck it just stand still and when i release aka blur it go to the far (i always tried to give opposite numbers but it do the same thing) :/

 

 

btw i got a code of jquery that i donno why i doesn't want to work , maybe someone can help and tell why it doesn't since i am totally new with javascript here is the code:

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
            $(document).ready(function() {
                $('input.inputfield').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {

    $('.inputfield').val('').focus();
}));

$('.inputfield').keyup(function() {
    var $span = $('.deleteicon span');
    if($('.inputfield').value.length > 0 && !$span.is(':visible'))  {
        $span.stop().fadeIn();
 }
    else if($('.inputfield').value.length == 0)
{
        $span.stop().fadeOut();
}
});
});
  


        </script>

the aim of the script above is to fadeout a the clear button when there is no string in the text input and it fadein when there is a string inside, i tried to do everything as well but with no success, seems this javascript has no luck with me and seems its too hard as well

 

Thanks for the help,

Maxwel

[maxwel]

ok solved for sure the 2nd code (for fadeout button) but the first still can\t figure out why that is happening, why it dont move to the right like other css elements?!