0

i wanted to traverse through box or div on press of tab button and show its full content

question:

  1. show to traverse through the box on press of tab button
  2. and show its full content for eg: upto hello world15

here is codepen:https://codepen.io/anon/pen/xJMqbb

.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
 background-color:#00506b;}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
     overflow: hidden;

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit" style="background-color:#cb2025;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#f8b334;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#97bf0d;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#00a096;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#93a6a8;">
    <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
  
</div>
</div>

Note: without changing html structure or element

EaBengaluru
  • 131
  • 2
  • 17
  • 59
  • Well, you're using the pseudo selector, `hover` to trigger the css behaviour. What's to stop you using a class instead - a class that you can apply and remove from the next/prev box each time the tab key is pressed? – enhzflep Aug 11 '18 at 04:01
  • i want same behaviour as hover suppose i when i manually trigger hover for first box then i expect tab button press should work for traversing rest 3 box, also it should show full content – EaBengaluru Aug 11 '18 at 04:06
  • How should "it show full content"? If the list has 15 elements and by default, 10 are shown - you need to either shrink the content or enlarge the container. You've forgotten this apparently - they're certainly not the same as one another. Concentrate on achieving this functionality before you try to select one div or another with either the keyboard or mouse. In any case, I'll chuck you a solution that deals with selected divs. – enhzflep Aug 11 '18 at 04:38

3 Answers3

2

As mentioned in the comments, you're actually asking for two things here. You'll need to decide how you'd like to fit all of the content and implement that. You'll either enlarge the container or shrink the content..

I've removed the reaction to mouse hover - everything now happens in response to the tab key. Note that shift-tab hasn't been implemented: you can only navigate in one direction. You could easily make the mouseover/mouseout handlers toggle a class as well. This would allow you to use either/both keys and mouse for nav.

function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
 var colourArray = ['#cb2025', '#f8b334', '#97bf0d', '#00a096', '#93a6a8'];
 document.addEventListener('keydown', onKeydown, false);
 var container = document.getElementById('container');
 for (var i=0, n=colourArray.length; i<n; i++)
  container.appendChild( generatePanel(colourArray[i]) );
}

function generatePanel(bgCol)
{
 var div = newEl('div');
 div.style.backgroundColor = bgCol;
 var ul = newEl('ul');
 div.classList.add('style_prevu_kit');
 div.appendChild(ul);
 for (var i=0; i<15; i++)
 {
  var li = newEl('li');
  li.textContent = `hello world${i}`;
  ul.appendChild(li);
 }
 return div;
}

function onKeydown(e)
{
 switch (e.keyCode)
 {
  case 9:      // tab key
   e.preventDefault();
   var selectedDiv = document.querySelector('.style_prevu_kit.active');
   if (selectedDiv === null) // none selected. select the first one
   {
    document.querySelector('.style_prevu_kit').classList.add('active');
   }
   
   else
   {
    var parent = selectedDiv.parentNode;
    var nextSibling = selectedDiv.nextElementSibling;
    selectedDiv.classList.remove('active');
    
    if (nextSibling !== null)     // one before the last one was selected
     nextSibling.classList.add('active'); // so just select the next one
    else
     document.querySelector('.style_prevu_kit').classList.add('active');  // last child selected, so select the first child
   }
   return false;
 }
}
.fond
{
 position:absolute;
 padding-top:85px;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#00506b;
}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
     overflow: hidden;

}
.style_prevu_kit.active
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
}
 <div align="center" class="fond">
  <div id='container' style="width:1000px;">
  </div>
 </div>
enhzflep
  • 12,927
  • 2
  • 32
  • 51
1

In addition to the answers, here is solution that solves the 2 of your problems - While retaining hover using mouse

Codepen: https://codepen.io/anon/pen/VBgpqr 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){

    var classCounter = $('.style_prevu_kit').length; // count of all style_prevu_kit classes
    var activeIndex = 0; //set active index to first style_prevu_kit class

     $('body').keydown(function(e) {
       var code = e.keyCode || e.which; 
       if (code == 9) { // 9 is code for the [tab] key
       e.preventDefault(); // prevents [tab] key default behaviour
          $('.style_prevu_kit').eq(activeIndex-1).removeClass('active');
          $('.style_prevu_kit').eq(activeIndex++).addClass('active');  
          if(activeIndex>classCounter-1){
             activeIndex = 0;
          } // reset active index when it exceeds number of class elements
       }
    });

    $(".style_prevu_kit").on("mouseover", function() {
    console.log($('.style_prevu_kit').index($(this)));
        $('.style_prevu_kit').each(function(){
            $(this).removeClass('active');
        })
        activeIndex = 0; 
    }); //reset Index when manual mouse hover activated

    }) //end document ready

</script>

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<style>
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
 background-color:#00506b;}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
     overflow: hidden;

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
    height: 300px;
}

.active{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
    height: 300px;
}

</style>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit active" style="background-color:#cb2025;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#f8b334;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#97bf0d;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#00a096;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#93a6a8;">
    <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>

</div>
</div>
95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
0

This is similar to jQuery: keyup for TAB-key? but with the added twist of cycling.

So first, to capture the tab key, add this in the $(document).ready(function(){ });

$('body').keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') {
    //This is the magic function
    CycleElements();
    }
 });

To cycle through the elements there are many approaches you could take. For example, set a variable at the top of your script to hold the current index:

var _elementIndex = 0;

Also, you'll need an object to hold the jQuery object:

var _elements = $(".style_prevu_kit li") //May need to change the selector depending on what you want to cycle through

Then your CycleElements() could look like this:

function CycleElements()
{
    var selectedElement = $(_elements)[_elementIndex++];
    //now what do you want it to do?
    $(selectedElement).css("background","#CCC"); //highlight the <li>

    //And reset the index counter if needed:
    if (_selectedIndex == $(_elements).length){
        _selectedIndex == 0;
    }
}

I hope that gets you over the hump? Can you be more specific about the expected behavior?

LBW
  • 111
  • 4