Navigating through content with scrollable views while utilizing the popular Angular framework

Being relatively new to famous and somewhat familiar with angular.

Question: Given that everything in famous is fixed positioning, how should I go about creating a scrollable section using famous angular?

HTML: This code snippet creates a grid of squares sourced from Famous/angular tutorial

<fa-app id="app">
  <fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-size="[100, 100]"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>
</fa-app>

CSS: Defines the position of the application window

#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

CTRL: Creates a 3x3 grid and iterates over the list items

    var Engine = $famous[('famous/core/Engine')];
    var Surface = $famous[('famous/core/Surface')];
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var Easing = $famous['famous/transitions/Easing'];
    $scope.myGridLayoutOptions = {
      dimensions: [3, 3]
    };

    $scope.list = [
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)}
    ];

    $scope.animate = function() {
      for (var i = 0; i < $scope.list.length; i++) {
        $scope.list[i].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 * i}) 
      };
    };

    $scope.animate();

javascriptcssangularjsfamo.usfamous-angular

Answer №1

After exploring the demos of famo.us Angular, I came across a fantastic example that demonstrates proper scrolling functionality. Check out the documentation here

Scrolling in famo.us requires a different approach compared to traditional HTML. There is a specific directive called fa-scroll-view that generates a scroll event. However, the process doesn't stop there - you also need to attach that event to an element using pipes.

    <fa-app ng-controller="PipeCtrl">
  <!-- fa-scroll-view captures all events from $scope.myEventHandler and determines how to handle them -->
  <fa-scroll-view fa-pipe-from="myEventHandler">
      <fa-view ng-repeat="view in views">
        <fa-modifier fa-size="[undefined, 160]">
        <!-- All events on fa-surfaces (click, mousewheel) are sent to $scope.myEventHandler -->
           <fa-surface fa-background-color="view.color"
                        fa-pipe-to="myEventHandler">
           </fa-surface>
          </fa-modifier>
      </fa-view>
  </fa-scroll-view>
</fa-app>

<script>
  angular.module('faPipeExampleApp', ['famous.angular'])
      .controller('PipeCtrl', ['$scope', '$famous', function($scope, $famous) {

        var EventHandler = $famous['famous/core/EventHandler'];

        $scope.views = [{color: 'red'}, {color: 'blue'}, {color: 'green'}, {color: 'yellow'}, {color: 'orange'}];

        $scope.myEventHandler = new EventHandler();

    }]);
</script>

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

Having issues with importing momentjs by reference in TypeScript with amd configuration

I'm puzzled by the difference in behavior between these two snippets: import * as moment from "../Typings/moment"; One works, while this one doesn't: /// <reference path="../Typings/moment.d.ts" /> import * as moment from "moment"; It t ...

javascriptvisual-studiotypescriptmomentjsamd

Showing JSX/HTML content depending on the props received

Can you identify the name of this type of expression and do you know in what scenarios it should be applied? {props.type === "big" && <h2>{props.title}</h2>} ...

javascripthtmlreactjsjsx

Only refresh the content when there are updates from the ajax call

Currently, I am populating an HTML table with data retrieved through an AJAX request. The AJAX call is made at regular intervals of X seconds. I am specifically looking for a way to update the table only when the new data fetched from the AJAX call diffe ...

javascriptjqueryajax

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

htmlcss

Is there a way to dispatch an event from one Angular ui-router view to another view?

In order to change the login button to display "logged in as xxx" after authentication, I have structured my page into three views: header, content, footer. The login button is located in the header view. Upon clicking login, it transitions to the "app.log ...

javascriptangularjsangular-ui-router

Clicking on a table will toggle the checkboxes

I am facing an issue with this function that needs to work only after the page has finished loading. The problem arises due to a missing semicolon on the true line. Another requirement is that when the checkbox toggle-all is clicked as "checked", I want ...

javascriptjquerycheckboxtoggle

What is the fewest amount of commands needed to generate a client-side Javascript code that is ready for use?

In the realm of JavaScript libraries found on Github, it has become increasingly challenging to integrate them directly into client-side projects with a simple script tag: <script src="thelibrary.js"></script> The issue arises from the browse ...

javascriptnode.jsnpmwebpack

Sending a variable using the onchange function in jQuery

I have written a script to toggle the visibility of different divs based on selection var folder; $(function() { $('#teamleag').change(function() { if ($('#teamleag').val() == 'footballal') { $('# ...

javascriptjquery

Locate elements within an array where a specific attribute includes the specified search term

While working with Javascript, I encountered an issue where the function I wrote to retrieve objects from an array was not returning all the data that met the query criteria. In my dataset, which originally contained 1536 objects, there are several jokes ...

javascriptnode.jsarraysjsonexpress

The FontLoader feature seems to be causing issues when integrated with Vuejs

While working on a Vue project with threejs, I encountered an error similar to the one described here. The issue arose when attempting to generate a text geometry despite confirming that the path to the typeface font is accurate and in json format. ...

javascriptvue.jsthree.jssyntax-error

Cause an element to extend beyond others when the viewport reaches its limit

My design dilemma involves two squares: a blue one that will expand to contain things totaling 800px, and a red one that must always remain fully visible. When narrowing the viewport, the red square should overlap the blue square, rather than disappearing ...

htmlcssflexbox

Having trouble getting the JavaScript slider to animate

My code works perfectly in Codepen but when I try to implement it on my website, it shows as a static image. You can view the code here: https://codepen.io/anon/pen/zPMKpv I'm using the exact same code on my website located at: Does anyone have any ...

javascripthtmlcss

What is the optimal offset to enhance the drag effect?

I have been working on making a draggable cloud, but I am facing an issue where the cloud always clips from the center to the mouse position. Here is the current setup: $(document).ready(function () { // code for cloud setup }); #background-canvas ...

javascriptjqueryhtmlmathdraggable

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Seeking a functional web application in Tizen that can scroll a div using the rotating bezel mechanism. I have dedicated several hours to getting it to work without success. I keep revisiting the same resources for the past three days: View Link 1 View Li ...

javascriptrotationtizen

Utilizing jQuery for seamless communication between parent and child iFrame windows

On my webpage, there is an iFrame containing a table where I want to add a click event to the rows. The challenge is retrieving the selected row within the iFrame from the parent window. The goal is to define a class for a clicked table row like this: $( ...

javascriptjqueryiframe

Failure to retrieve blob - net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

My fetch request code in my front end for a node js express web app hosted on MS Azure works well for small zip file blobs. However, it times out and displays the error net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when dealing with large blobs. ...

javascriptnode.jsexpressfetchblob

The source of the image gets disrupted when it is not on the homepage

My images are stored in the directory images/icons/artist_default.png On the homepage, the image is displayed with this path: http://localhost:7777/images/icons/artist_default.png However, on a user's page like http://localhost:7777/user/giorgio-m ...

htmlcss

Design a sophisticated background using CSS

https://i.sstatic.net/yILwL.png I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent ...

htmlcss

Error: 'error' is undefined

Error Alert: The code is encountering a ReferenceError, indicating that 'error' is not defined in the following snippet: app.post('/register', function(req, res) { var hash = bcrypt.hashSync(req.body.password, bcrypt.genSaltSync(10)) ...

javascriptnode.jsexpress

Issue with uploading media on Wordpress: "Unfortunately, an error occurred during the upload process. Please attempt again at a later time."

Often times, when trying to upload media from the front-end, I encounter this issue: An error occurred during the upload process It seems like the error occurs sporadically, making it even more challenging to troubleshoot. Sometimes, when logging in fo ...

javascriptphpwordpress