Scroll elements to the left and display the element on the far right

Question

Scroll elements to the left and display the element on the far right

I need help with setting the CSS for an unordered list inside a container. I want the last list item to show and the leftmost item to be hidden when there is not enough space in the container.

Order: li1 > li2

After adding li4, the order should be:

li2 > li3

I want to display the last two list items only.

https://jsfiddle.net/5snmggtg/1/

In the provided fiddle, the expected result is "2 3" (currently "1 2").

HTML

<span>
  <ul >
  <li>1</li> > 
  <li>2</li> >
  <li>3</li>
  </ul>
</span>

CSS

li {
   display: inline;
 }

ul{
  position: absolute;
  width: 35px;
  overflow: hidden;
  height: 15px 
 }

html css

Answer 1

Answer №1

There are two possible solutions:

Solution A: Using CSS

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

 li:not(:last-child):not(:nth-last-child(2)) {display:none}

<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

Solution B: Using jQuery Below is the jQuery code to hide all the previous elements of the li:last-child except the immediate previous element :)

Please let me know if this meets your requirements.

See the code snippet below:

var item = $("ul li:last-child")
var sib = $(item).prev()
$(item).prevAll().not(sib).hide()

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

Answer 2

There are two possible solutions:

Solution A: Using CSS

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

 li:not(:last-child):not(:nth-last-child(2)) {display:none}

<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

Solution B: Using jQuery Below is the jQuery code to hide all the previous elements of the li:last-child except the immediate previous element :)

Please let me know if this meets your requirements.

See the code snippet below:

var item = $("ul li:last-child")
var sib = $(item).prev()
$(item).prevAll().not(sib).hide()

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

Scroll elements to the left and display the element on the far right

Answer №1

Similar questions

The Jquery css on my website is not functioning properly

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

Using FlexBox for Vertical Alignment of Elements

Dynamic manipulation of classes based on user attributes

Decompressing CSS in PhpStorm

Ways to prevent body content from overlapping with footer content and appearing below

Adjust the size of an Angular component or directive based on the variable being passed in

Using jQuery, you can create and add an element to the page when a user clicks

Error: The property 'classList' of null is unreachable for HTMLImageElement

What is the best method for choosing a div element using JavaScript and altering its background color?

Update the height definition for the alert box

If a number already exists, create 3 tables using MySQL and PHP

Utilize a viewpoint alteration alongside a floating effect on a specific element

What is the best way to retrieve the first item in owl carousel's content?

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Issue with calling a function to change the CSS color class of a button in Angular

Why does the diamond symbol appear distorted on my iPhone screen?

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

Determining the location of the hamburger item on the bar

What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?