Display only the content that is within the container and visible

Within this demonstration, there are 2 divs present - one containing the text t, and the other containing the text s. Both of these divs are enclosed within the .items container.

As it stands currently, both divs are visible. However, my goal is to modify the layout so that only the t div is displayed in this particular scenario.

Check out the Demo below:


    <div class="t">
      <div class="items">
        <div class="item">
          s
        </div>
        <div class="item">
          t
        </div>
      </div>
    </div>

I am seeking a CSS property or rule that I could apply to achieve this desired outcome. Can you guide me on how to proceed?

htmlcss

Answer №1

Simply add overflow:hidden to the parent element with the class .t

Code Example

.t {
  width: 200px;
  height: 30px;
  border: 1px solid #9e9e9e;
  margin: 0 auto;
  position: relative;
  top: 100px;
  overflow: hidden;
}

.items {
  position: absolute;
  width: 100%;
  top: -30px;
}

.item {
  height: 30px;
  line-height: 30px;
}
<div class="t">
  <div class="items">
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
  </div>
</div>

Answer №2

If you want to achieve that, utilizing javascript and Jquery is necessary.

Instead of using css({color: 'red'}), you can opt to include a class addClass('visible')

var $t = $('.t');
y = $t.offset().top;
y2 = y + $t.outerHeight(); 

x = $t.offset().left;
x2 = x + $t.outerWidth();

$items = $t.find('.item')
$items.each(function(index, elmt){
  var elmtY = $(elmt).offset().top;
  var elmtY2 = elmtY + $(elmt).outerHeight();
  
  var elmtX = $(elmt).offset().left;
  var elmtX2 = elmtY + $(elmt).outerWidth();
if(elmtY > y && elmtY2 < y2 && elmtX > x && elmtX2 < x2){
  $(elmt).css({color: 'red'})
  }
});
.t {
  width: 200px;
  height: 30px;
  border: 1px solid #9e9e9e;
  margin: 0 auto;
  position: relative;
  top: 100px;
}

.items {
  position:absolute;
  width: 100%;
  top:-30px;
}

.item{
  height: 30px;
  line-height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t">
  <div class="items">
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing Past Dates from Being Selected in JQuery Date Picker

Need help with a date picker that only allows selection of the 1st and 15th dates of each month. How can I prevent users from selecting previous dates? <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" ty ...

javascriptjqueryhtmljquery-ui-datepicker

Unleashing the Power of Aurelia's HTML Attribute Binding

I need to bind the "required" html attribute in my template and model. Along with passing other information like the label value using label.bind="fieldLabel", I also want to pass whether the element is required or not. However, simply using required="tr ...

javascripthtmlaurelia

The QR code disappears from the screen once the button is no longer pressed

After following an online tutorial on creating a QR code generator, the code works fine and I am able to display the image. However, I'm facing an issue where the image disappears from the screen once the button is released. Here is the code snippet: ...

htmlcssqr-code

CSS slideshow animation is not functioning properly

Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image. In my animation code, I want the picture to fade from the left every time ...

css

Positioning a Material UI Menu item underneath its parent element using CSS styling

I have created a Material UI dialog that features some text and an Icon with a dropdown menu option. You can check out the demo here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js My goal is to properly position the Menu component so that it a ...

javascripthtmlcssreactjsmaterial-ui

Dynamic jQuery slideshow with unique starting point

My photo collection is displayed in a list format like this: <ul class="slideshow"> <li><img src="images/slideshow/slide0.jpg" alt="" /></li> <li><img src="images/slideshow/slide1.jpg" alt="" /></li> & ...

javascriptjqueryhtmlrandom

A combination of fixed width column and dynamic content area in Bootstrap design

Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...

csstwitter-bootstrap

I find myself grappling with the styling issue in MUI select

<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...

cssreactjsmaterial-uistyled-components

The Ajax load() function is malfunctioning

.load() will only function properly when the files are coming from a server, so I anticipate that it will work later once I have it hosted on a server Edit: This code is functional in Firefox but not in Chrome I've been attempting to apply ajax to l ...

htmlajaxload

Is there a method to identify the quantity of audio channels within a <video> element? (HTML5)

I would like to connect an AnalyserNode to each audio channel of a video element in order to perform audio visualization. Currently, my code is functioning properly except for the fact that both AudioContext and MediaElementAudioSourceNode consistently re ...

htmlaudiovideohtml5-video

Chrome experiences a crash during regular expression matching operations

I have a challenge where I am attempting to validate 50 email addresses separated by commas using regex. Strangely, every time I run this operation, Chrome crashes. However, Safari seems to handle it without any issues. Below is the code snippet that I am ...

javascriptjqueryhtmlregexgoogle-chrome

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; border-radius: 5px; text-align: ce ...

css

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

htmlcssbuttonhover

Troubles encountered when wrapping columns in bootstrap framework

I'm experimenting with a design that utilizes Bootstrap's grid system, but I'm experiencing some challenges with the content either wrapping or extending off-screen. What I want is to have a sidebar with fixed width (around 250px), and its a ...

htmlcssbootstrap-4

Implement a jQuery slideshow with a full background image, aiming to set up a clickable link on the final image of the

Could someone please help me with a query I have regarding a background image slide show using jQuery code? I have set up a slide show with multiple images and would like to make the last image clickable. Is it possible to achieve this specific functionali ...

javascriptjqueryhtmlcssimage

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

htmlcsstailwind-css

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

javascripthtmlnext.js

Chrome causes Bootstrap to add an additional pixel

I am currently utilizing bootstrap to design a webpage. I have divided the body into two segments: content and header. Within the content block, there is a div with the class .container .sameTable, inside of which resides another div with the classes .row ...

htmlcsstwitter-bootstrap