Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. 

+---------------------------------------------+
|   |           Previous Image 0         |    |
|   +------------------------------------+    |
|   +------------------------------------+    |
|   |                                    |    |
|   |            Current Image 1         |    |
|   |                                    |    |
|   +------------------------------------+    |
|   +----------------------------------- +    |
|   |             Next Image 2           |    |
+---------------------------------------------+

The code to display this list is as follows: 

<div ng-repeat="item in myImageArray">
   <img ng-src="{{item.url}}" id="image{{item.id}}">
</div>

Goal:
In the list, I aim to set the opacity of Previous Image 0 and Next Image 2 to 50%.
And the opacity of Current Image 1 to 100%.

Essentially, only the visible image should have an opacity of 100%, while others have an opacity of 50%.

htmlcssangularjs

Answer №1

If you're looking to determine if an element is visible in the viewport, you can utilize the function provided below:

 function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

Once you have this information, you can create a directive to identify the current element being viewed and adjust its opacity using ng-style or ng-class.

While this may not be a straightforward solution, it's one method to determine which element is currently within your viewport.

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

Show the HTML page returned by the server on the client side

Hey there! I've come across a PHP code snippet that sends back an HTML file as a response. This PHP code makes use of the include method to send the file. When I'm on the client side, I'm employing AJAX. Upon typing console.log(data) (with ...

javascriptphpjqueryhtmlajax

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

creating dynamic lists in angular.js

Could you please guide me on creating a dynamic list in Angular.js? I have successfully implemented a feature where users can add items to the list by clicking a button and filling out the required fields. To see this in action, check out this fiddle: http ...

javascriptjqueryangularjs

Dealing with the challenge of sorting and editing one div at a time

I'm encountering an issue with my script where the input textbox becomes uneditable when I use sortable for a div element. In my code, I have drag and drop functionality where after dropping, the div should be sortable and the input should be editabl ...

javascriptjqueryhtml

Incorporating an image within a table while maintaining 100% height: A step-by-step guide

I'm struggling to make the image fit 100% to the height of a CSS-created table. The table and image seem to be ignoring the dimensions of the parent element, as shown below. Since everything needs to be dynamic, I am working with percentages. .img ...

htmlcssimagecss-tables

The container cannot contain the overflowing DIV

I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...

css

What could be causing my CSS background image to not display properly?

For some reason, I can't figure out why it's just displaying a blank screen. This is what I'm seeing: https://i.sstatic.net/0gDIK.png Here is the structure of my files: https://i.sstatic.net/GDToF.png The CSS code looks like this: *{ ...

htmlcss

navigate back to the previous tab using protractor

When I open a new tab (second), I attempt to switch back to the first tab. common.clickOpenNewSession(); //opens a new tab browser.getAllWindowHandles().then(function (handles) { var secondWindowHandle = handles[1]; var firstWindowHandle ...

javascriptangularjsselenium-webdriverprotractor

Tips for implementing a search filter in a select dropdown menu using Angular

I am attempting to enhance my select option list by including a search filter. With numerous options available, I believe that having a search function will make it easier for the user to locate their desired selection. I hope my message is clear despite ...

htmlangularmulti-selectselect-options

finding the source file or code where a particular html element is being generated

In the HTML file I have, there are multiple JavaScript files added. Whenever I run the HTML file, a title tag is automatically created in my HTML file. I do not want this title tag to appear in my HTML file. How can I prevent this from happening? Or how c ...

javascripthtmlcss

AngularJS does not provide access to child scope forms within the parent scope when using the ng-switch directive

How can I access the AT model object written in ng-switch? When using ng-switch, a child scope is created and the form exists on this scope. This means that the child scope form will not be available on the parent scope. Can someone please assist me with ...

angularjsng-switch

What is the best way to conceal a modal using jquery?

Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...

javascriptc#jqueryhtmlasp.net

Creating HTML elements using JavaScript compared to importing an HTML fileIn JavaScript,

I am currently in the process of building a website that is entirely driven by JavaScript. Aside from the index page, I do not use any HTML pages at all. Instead, I fetch JSON data for every query and then dynamically generate HTML within the JavaScript to ...

javascripthtmljsondynamic

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

htmlcssflexbox

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

javascripthtml

Open the overflow div within a table data cell

My goal is to create a drag-and-drop schedule tool similar to Fullcalendar. I have decided to use a table layout with a rectangular div inside each TD cell to represent tasks. <table onDragEnd={dragend}> <tr> <th>0</th> ...

javascripthtmlcssreactjs

Facing issues with Handsontable opening within a jQuery UI dialog?

After implementing the Handsontable plugin in multiple tables, everything appears as expected on the parent page. However, when attempting to open a dialog containing a table, the tables do not display properly (only in IE). A demonstration of this issue c ...

javascriptjqueryhtmljquery-ui-dialoghandsontable

Explore relevant Pill information dynamically based on the image that was clicked in Angular

In this particular situation: Using Angular 1.7.2 Utilizing Bootstrap 3 Encountering some challenges after the user interacts with the image: Current Behavior: Upon clicking any image, a modal window appears displaying relevant content. If image 1 is ...

htmlangularjstwitter-bootstrap-3

Tips for extracting chosen values from ui-selects within ng-repeat

I have a scenario where I'm dynamically adding ui-selects using ng-repeat. However, I am struggling to figure out how to retrieve the selected value from each ui-select separately in the controller. My goal is to grab the selected item's value in ...

angularjsui-select

When hovering over a div, reveal another div on top of a third div

Imagine two adjacent divs, A on the left and B on the right with some other elements in between. Is it possible to have a third div, C, appear over div A when hovering over div B? I can control the display property using CSS, but I am unsure how to make d ...

javascriptcss