Setting focus to a div after show

Question

Im trying to get focus to hidden div that shows up after the .show() function is called on it. Iv tried a couple things including show().focus() or splitting it up into

$(".messageDisplayArea").show();
$("#message_display_area").focus();

the div shows up, but the page does not shift focus to it.

<script>
    function showMessage(id, row) {
            selectRow(row);         
            $(".messageDisplayArea").show();        
            $("#message_display_area").focus();
    }

</script>


<div class="messageDisplayArea" id="message_display_area" style="display: none;">

<p> Test Test Test </p>

</div>

what am I missing? the page that this is in is decently large and the div appears at the bottom of the page. I want the browser to jump down and put the new div in focus

what do you mean by wanting to put a focus in a `div` element? — Sergio, Jul 08 '13 at 16:24
maybe i am misunderstanding the .focus() function. What i want to do is give literal focus to this new div that appears. As in have the browser jump to the div since it appears at the bottom of the screen and the user doesnt even know its there until they scroll down — CoffeePeddlerIntern, Jul 08 '13 at 16:27

score 2 · Accepted Answer · answered Jul 08 '13 at 16:32

2

Replace this line:

$("#message_display_area").focus();

with this line:

window.location.hash = "message_display_area";

answered Jul 08 '13 at 16:32

Kevin Boucher

14,990
3
40
54

Thank you very much, this is just what i wanted! Short, sweet, and simple – CoffeePeddlerIntern Jul 08 '13 at 16:37

score 2 · Answer 2 · answered Jul 08 '13 at 16:33

2

As far as you've given us code, what you have should work, as in this fiddle.

http://jsfiddle.net/SuERE/

http://jsfiddle.net/SuERE/1/

HTML:

<button type="button">Show and Focus</button>
<div style='height:700px'></div>
<input type="text" id="input" style='display:none;'/>

Javascript:

$("button").on("click",function(){
   $("#input").show();
    $("#input").focus();
});

answered Jul 08 '13 at 16:33

Samuel Reid

1,708
11
21

Thank you for taking time to post and help out! – CoffeePeddlerIntern Jul 08 '13 at 16:43

score 1 · Answer 3 · edited May 23 '17 at 12:11

1

Focus does't imply that your page is scrolled to the element and is actually often used for form controls to gain the cursor.

What you need is actually a scrollToElement() function that calculates the page offset of your newly created div and scrolls the page to that position, a good one is described here : jQuery scroll to element

edited May 23 '17 at 12:11

Community

1
1

answered Jul 08 '13 at 16:31

Tiberiu C.

2,943
26
37

Thanks you for you post, your time is appreciated! – CoffeePeddlerIntern Jul 08 '13 at 16:43

score 0 · Answer 4 · answered Jul 08 '13 at 16:40

0

Another thing you could do is add the tabindex attribute to the div element. This will enable the focus method to execute and find it and automatically move to it.

<div id="message-display-area" tabindex=1000>...</div>

JSFiddle to show it working.

answered Jul 08 '13 at 16:40

Justin

3,289
3
14
26

Setting focus to a div after show

4 Answers4