Jump to content


Photo

the style don't change for the a span


  • Please log in to reply
3 replies to this topic

#1 maxwel

maxwel

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 22 June 2013 - 05:35 PM

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 by maxwel, 22 June 2013 - 05:37 PM.


#2 maxwel

maxwel

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 22 June 2013 - 07:00 PM

Solved, Thanks :)



#3 maxwel

maxwel

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 22 June 2013 - 09:39 PM

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



#4 maxwel

maxwel

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 22 June 2013 - 10:37 PM

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?!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com