Flick user media cards left or right to uncover the following one

I am currently working on creating a widget that will display user media objects in a horizontal layout using ng-repeat. The goal is to allow users to swipe left or right to reveal the next media card, similar to the image shown below.

In the example, you can see that part of the next media card's avatar is visible, indicating that there are additional cards available for swiping.

At this point, I have managed to create the basic structure for the widget as outlined in the code snippet below. However, I am facing some challenges and would appreciate any assistance or guidance to move forward with this implementation.

div class="media  people-card-media col-xs-12" ng-repeat="item in cats">
        <div class="media-left ">
            <div class="person-photo presence">
                <img  class="media-object list__photo img-circle" ng-src="{{item.photo}}" />

            </div>
        </div>
        <div class="media-body list__body">
            <div class="people_name_title">
                <h4 class="media-heading title">{{item.name}}</h4>

            </div>
        </div>
        <div class="media-right media-middle contacts-chat-call flex-it-align-top">
            <a  style="margin-right: 10px;">
               call
           </a>

        </div>
    </div>

You can also view the Plunker version of this implementation through the following link: http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

javascripthtmlcssangularjs

Answer №1

Check out this plunkr for a functional implementation:

http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview

I included ngTouch and utilized ng-class in the HTML along with touch event handlers.

<div class="media people-card-media col-xs-12"
     ng-class="item.displayClass"
     ng-repeat="item in heroes"
     ng-click="gonext()"
     ng-swipe-left="gonext()"
     ng-swipe-right="goprev()">

In the MainController, it cycles through active items by assigning a current class to one, and next-up and previous classes to neighboring items.

$scope.gonext = function () {
  for (var i=0, len=$scope.heroes.length; i<len; i++) {
    if ($scope.heroes[i].displayClass == 'current') {
      $scope.heroes[i].displayClass = 'previous';
      if (i<len-1) $scope.heroes[i+1].displayClass = 'current';
      if (i<len-2) $scope.heroes[i+2].displayClass = 'next-up';
      i=len;
    };
  };
};

Just needs some adjustments for handling boundaries more effectively.

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

IE9 causing issues with Angularjs ng-route - views fail to display

I am new to AngularJS and currently working on developing an application using AngularJS along with Coldfusion for database data retrieval. However, I am facing compatibility issues specifically with IE9 (which is the default browser in my office). The ap ...

javascripthtmlangularjscoldfusion

Position navbar contents at the top of the screen

As I delve into learning Bootstrap4, I have come across the following snippet of HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

htmlcssbootstrap-4

Can you customize the first element within a span tag using a for loop?

I am having an issue where only the last element in a span is being set within a for loop. The code is functioning correctly, but I want to ensure that the first element is the one set as cust_name. success : function(data) { co ...

javascriptjqueryhtmlajax

Guide on enabling a plugin for Stylus in a Vue 2 project using the webpack template

I am working on a Vue2 project with the Webpack template and utilizing Stylus as a CSS preprocessor. I'm facing difficulties in applying plugins for Stylus like rupture. I attempted to adjust the options in build/utils.js for the stylus loader by add ...

javascriptwebpackvuejs2stylus

Nuxt Js - Ensuring script is only loaded once during the initial page load

I already have a static website design, but now I'm converting it to Nuxt.js to make it more interactive. After running my Nuxt server with "npm run build...npm run start," the scripts load and my carousel/slides work fine. However, when I navigate to ...

javascriptvue.jsnuxtjs

Building a Wordpress website with AJAX functionality using only raw Javascript and no reliance on Jquery

So, I have a custom script named related-posts.php, and I want to insert it into posts only when the user scrolls. In addition, I have an enqueued script file in WordPress that loads in the footer, where I have written AJAX code like this: var xmlhttp = ...

javascriptphpajaxwordpress

Achieving full page height with div, iframe, and footer components

Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...

csshtmliframe

Having trouble retrieving the elements from the JSON array defined in EJS within the JavaScript script tags

<div> let arrayData='<%= myJsonArray %>' <!--myJsonArray is passed to this ejs file via the render function in index.js when rendering this ejs file --> </div> <script> let index=0; function getData(){ c ...

javascriptjsonnode.jsexpressejs

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

htmlangularjscssangularjs-ng-repeat

Google Chrome has trouble displaying the body element at 100% height

Having an issue with Google Chrome – the body element is not reaching 100% height. In my website samples, at 100% zoom when hovering over a menu element (such as "O nás"), I change the background color of the body element. However, in Chrome, the botto ...

htmlcssgoogle-chromeheight

Innovative Tools for Interactive Sites and Dynamic Animations

I'm interested in developing interactive websites soon and I'm curious about the various technologies I can use to create an engaging web page. I know that HTML5 now supports drawing on a Canvas, even in 3D. Can you recommend any helpful tutoria ...

htmlhtml5-canvaswebglinteractive

What steps can be taken to activate the remember password feature when using an AJAX login system?

I've developed a web application with a basic login box, utilizing jQuery AJAX for the login process. However, I'm facing an issue with prompting the browser to remember the password. How can I trigger the "Do you want the browser to remember th ...

jqueryhtmlajaxwebauthentication

EBUSY: Unable to access resource due to being busy or locked, unable to retrieve information from 'C:hiberfil.sys'

I am running into an issue while attempting to publish an npm package. The error message I keep receiving is causing me some trouble. Does anyone have any suggestions on how I can resolve this? Your help would be greatly appreciated! Thank you in advance ...

javascriptnode.jsnpmnpm-publish

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

Tips for avoiding data loss during transitions between states in a multi-step form

Exploring the world of web programming, with a particular focus on AngularJS, has been an enlightening experience for me. I've recently embarked on developing a single-page application utilizing angular-ui-router. The core of my project is a multi-ste ...

angularjsangular-ui

Typescript does not allow for extending an interface with a data property even if both interfaces have the same data type

I've encountered a peculiar problem with Typescript (using Visual Studio 2012 and TypeScript v0.9.5) that I could use some help clarifying. The code snippet below functions correctly: interface IA { data: any; } interface IB { data: any; } ...

javascripttypescript

What is the rationale behind positioning the closing right angle-bracket of an HTML tag next to the opening left angle-bracket of a different HTML tag?

I came across a clever trick using this coding structure where the ending tag 'angle bracket' is placed at the beginning of a new left 'angle-bracket' tag opening. Unfortunately, I can't recall why it was done or where I saw it. I ...

htmldomhtml-parsing

Is it possible to showcase HTML content within a C# string in a straightforward manner?

I am attempting to achieve a specific format, similar to the following: string html = @"Hello <b> World ! </b>"; The intended result should look like this: Hello World ! The string html can be utilized on various elements such as label, t ...

c#htmlasp.net

Tips for preventing the need to open numerous chrome windows when running multiple URLs with Selenium WebDriverJS

Is there a way to prevent multiple instances of the browser from opening when attempting to parse multiple URLs? I would like to have just one browser open and running all the URLs within it. Any advice or suggestions would be greatly appreciated! I' ...

javascriptnode.jsselenium-webdriverasync-await

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace