Set focus on a div in a javascript function

Question

So I have a javascript function that displays the div that I am hiding, I am wondering how I then setfocus on the div so it goes down right to it on the page. I say setfocus because I have tried it earlier but it didnt work. Here is the function and the idea of focusing that i have.

<script>
function toggle_travelarea(id) {
        var e = document.getElementById(id);
    document.getElementById("canada").style.display = 'none';   
    document.getElementById("asia").style.display = 'none';
    document.getElementById("australia").style.display = 'none';
    document.getElementById("newzealand").style.display = 'none';
    document.getElementById("africa").style.display = 'none';
    document.getElementById("usa").style.display = 'none';
    document.getElementById("samerica").style.display = 'none';
    document.getElementById("europe").style.display = 'none';
        e.style.display = 'block';
     document.getElementByClassName('slidedeck').focus()
    }
</script>

area i want to set focus to!

<div class="slidedeck">

When you say setfocus, do you mean scrollTo()? Get the position of the element and pass the top position to scrollTo(). https://developer.mozilla.org/en-US/docs/DOM/window.scrollTo — Syon, Mar 12 '13 at 20:37
I think this is what you want, http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — gkiely, Mar 12 '13 at 20:42
Yes the div is just under it but I want the page to set that div at the top. I tried adding in this but still didnt work. var xpos= document.getElementById(id).value; var ypos= document.getElementById(id).value; window.scrollTo(xpos,ypos); — user1566783, Mar 12 '13 at 20:44

score 0 · Answer 1 · answered Mar 12 '13 at 21:24

0

Actually thought this didnt work but used an href to the anchor div id and then an onclick for the function and it worked properly. Thanks for the input everyone

answered Mar 12 '13 at 21:24

user1566783

329
1
3
16

score 0 · Answer 2 · answered Mar 12 '13 at 21:35

I'm afraid you have to do a bit with math and use scrollTo. Here's example -> http://jsbin.com/epozur/4

Basically:

HTML

<div id="hidden">
</div>
<button id="show">show</button>

JS

var btn = document.getElementById('show'),
    hidden = document.getElementById('hidden');

btn.addEventListener('click', function () {
  hidden.style.display = 'block';
  scrollTo(0, hidden.offsetTop);
});

That should give you idea how to go further.

mz

Set focus on a div in a javascript function

2 Answers2