CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EaBengaluru
EaBengaluru

Reputation: 71

How to traverse through div with tab button press and show its full content

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

Upvotes: 0

Views: 248

Answers (3)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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>

Upvotes: 1

enhzflep
enhzflep

Reputation: 13099

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>

Upvotes: 2

LBW
LBW

Reputation: 111

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?

Upvotes: 0

Related Questions