CODEWITHSUNDEEP
javascripthtmlfocus
Manny
Manny

Reputation: 59

Focus on next available div

Suppose I have this:

<div id="div 2">
<a href="http://www.sitename.com">Link 2</a>
</div

</br></br></br></br></br></br></br></br></br>
<div id="div 1">
<a href="http://www.sitename.com/example">Link 1</a>
</div>

And I use # url to come to this page eg example.com/#div 1

How do I set focus so it goes to the first respective div without necessarily assigning a focus on a div.

For example if I have x50 divs on 1 site and the users using various urls with # parameter how do I simply say focus on next div available

Upvotes: 0

Views: 41

Answers (1)

Jim W
Jim W

Reputation: 5016

You can do that with tabindex, eg.

<div id="div 2" tabindex='1'>
<a href="http://www.sitename.com">Link 2</a>
</div

</br></br></br></br></br></br></br></br></br>
<div id="div 1" tabindex='2'>
<a href="http://www.sitename.com/example">Link 1</a>
</div>

I have to admit I went off and wrote an answer to what I thought you wanted which was scrolling (since you mentioned #'s) in case it's of use to you or anyone, here it is.

<input type='button' value='next' onclick='scrollToNextDiv()' style='position:fixed; right:50px;'/>

    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
    <div id="div-2" tabindex='1'>
    <a href="http://www.sitename.com">Link 2</a>
    </div

    </br></br></br></br></br></br></br></br></br>
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
    <div id="div-1" tabindex='2'>
    <a href="http://www.sitename.com/example">Link 1</a>
    </div>
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<script>
function scrollToNextDiv(){
    //look for #div-X in the URL
    var currentDivId = window.location.hash;
    if(currentDivId.length>0){
        currentDivId = currentDivId.substring(1);//remove leading #
    }

    var divs = document.getElementsByTagName('div');
    if(divs.length===0) {
        return;//nothing to do
    }

    var chosenDiv = divs[0];

    if(currentDivId.length>0){
        //find the current DIV as spec'd by the url #
        for(var i=0; i<divs.length-1; i++){

            if(divs[i].id===currentDivId){
                chosenDiv = divs[i+1];
                break;
            }
            if(i===divs.length-1){
                //didn't find it, or ran out of divs, so go back to top
                chosenDiv = divs[0];
            }
        }

    } 

    chosenDiv.scrollIntoView();
    window.location.hash = '#'+chosenDiv.id;
}
</script>

Upvotes: 1

Related Questions