CODEWITHSUNDEEP
jqueryhtml
greenpool
greenpool

Reputation: 561

JQuery keeping focus on div

I've got a button updateLogButton when clicked shows the div and when clicked again hides it. I've got this part working. Only problem is everytime the button is clicked focus is moved to the beginning of the page instead of focusing on the content in the div.

JQuery code:

    //hide div on page load
$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

});

HTML code:

<tr>
    <td><a href="#"  id="updateLogButton">Update Log</a></td>
</tr>
<tr>
    <td colspan="3" >
        <div id="updateLogText" style="width:100%;">
            <?php echo $data['updates']; ?>
        </div>

    </td>
</tr>

Anybody know how this can be achieved? i have looked at the JQuery documentation and tried:

$("#updateLogText").focus();
$("#updateLogText").attr("tabindex",-1).focus();

The above doesn't work..

Upvotes: 0

Views: 1896

Answers (3)

Gaurav
Gaurav

Reputation: 11

Ud below line it will work you have not given -1 in quotes that why focus in not comming

$("#updateLogText").attr("tabindex",-1).focus();

Upvotes: 0

Anant Dabhi
Anant Dabhi

Reputation: 11144

Try this I think you should use fadeToggle() instead of checking div is visible or not and after that set focus 

    //hide div on page load
$('#updateLogText').hide();

$('#updateLogButton').click(function() {

          $('#updateLogText').fadeToggle();       
          $('#updateLogText').focus();       
    }

);

http://jsfiddle.net/cF4Bb/5/

Upvotes: 0

Dipak
Dipak

Reputation: 12190

It's because the <a href="#" remove # or the href attribute itself

Write it as - 

<a id="updateLogButton">Update Log</a>

css - 

a{ cursor: pointer; }

Upvotes: 1

Related Questions