How build a Spritesheet with pure CSS and JS in React js

2018-10-11 19:53 Emmanuel Garcia Martinez imported from Stackoverflow

I have a Spritesheet of a bottle of beer and when Scroll down the bottle turns I use the library react-responsive-spritesheet but

but it looks slow because I have other things that change in the Onscroll method. I've been thinking about replacing the spritesheet with pure css

something like putting all the images on top of each other and changing the z-index of each of them in such a way that you see a fluid turn.

Somebody now what is the best way for build this animation ?

See also questions close to this topic

Toastr and FontAwesome 5 not displaying the right icon in a success message

I'm using toastr and when I display a success message, by default there was a font-awesome "check" icon there, but after I upgraded to FA-5, the icon is gone now.

I inspected element and saw these rules for the toastr container:

#toast-container > .toast::before {
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    line-height: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}

The CSS for the check icon - taken from here

#toast-container > .toast-success::before {
    content: "\f00c";
}

The icon won't render. Is this a known compatibility issue or am I doing something wrong?

Update: The questions that were suggested after marking this one as duplicate: I tried:

#toast-container > .toast::before {
    position: fixed;
    font-family: Font Awesome 5 Free;    //Changing this did not work!
    font-size: 24px;
    line-height: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}

How to get element before and after a class using JavaScript in HTML?

I'm stuck with a simple function.

Say I have, as a sample HTML structure:

<button class="accordion" onclick="myfunction-show-hide()">show or hide</button>
<div class="inner"style="display:none"> What I want to show/hide>
<button class="accordion" onclick="myfunction-hide()">hide</button>
</div>

I want to build a function myfunction-show-hide() that selects NEXT div of class inner and changes its display to '' if it was none and to none if it was ''.

And the reverse function, acting on PREVIOUS div of class inner.

Sounds really simple, but I am stuck!

Thank you for your help.

***** non working code below ****

    <button class="accordion" onclick="myfunction-show-hide()">show or hide</button>
<div class="inner"style="display:none"> What I want to show/hide>
<button class="accordion" onclick="myfunction-hide()">hide</button>
</div>

<script

  function myfunction-show-hide(){
    var x =  this.nextElementSibling;
    if (x.style.display == "none")
    {x.style.display = "";}
    else
    {x.style.display = "none"}

}
function myfunction-hide(){
    this.prev().hide(); 

}</script>

Can't load leaflet map onto polymer 3 element

So I'm trying to get my leaflet map to load onto my polymer 3 element, but I have an issue because I need the html div tag for the map to load BEFORE my leaflet javascript, or else it throws an error saying there's no container for it. I can't figure out a way to do this because I'm importing my javascript in so it's always going to load first. I need polymer to somehow let me load the html tag before rendering the javascript. Here is the code for the polymer element:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import './leaflet/leaflet.js';



class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">
        <div class="circle">1</div>
        <h1>View One</h1>
        <div id="map" style="width: 900px; height: 500px"></div>

      </div>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

How do i centre the animated "scroll down" indicator on the image but between grass and floor

How do i centre the animated "scroll down" indicator on the image but between grass and floor. In the css this is indicated by the .indicator class. I have tried justify and text align centre to see if this would work but it hasn't.

http://www.toonsville.co.uk/

 /*controls for drop down indicator*/

.indicator {
  position: relative;
  width: 60px;
  height: 60px;
  transform: rotate(45deg);
}

.indicator span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  border: none;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  animation: animate 1s linear infinite;
}

.indicator span:nth-child(1) {
  top: -30px;
  left: -30px;
  animation-delay: 0s;
  border-color: goldenrod;
}

.indicator span:nth-child(2) {
  top: -15px;
  left: -15px;
  animation-delay: 0.2s;
  border-color: greenyellow;
}

.indicator span:nth-child(3) {
  top: 0px;
  left: 0px;
  animation-delay: 0.4s;
  border-color: orange;
}

.indicator span:nth-child(4) {
  top: 15px;
  left: 15px;
  animation-delay: 0.6s;
  border-color: darkred;
}

<div class="looneys">
  <img src="images/nobackgroundmotion-Recovered2.png" width="100%">
  <div class="indicator">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>



</div>

JS,Bootstrap4 : Connecting customizing/expanded filters to data table frame in the front-end

I created an one-page with a filter table which has multiple conditions and a data table which has information about those conditions physically.

CONDITION

I used bootstrap4 overall
I used table styling as well and i disabled original search function because i need to use customized filter instead of it.
I don't really want the toggle method to hide filtered data. When clicking search button, i hope that the table would be filtered.

If you have any idea about this case, please let me know what you've thought.

$(document).ready(function () {
  $('#dtBasicExample').DataTable({
    "searching": false // false to disable search (or any other option)
  });
  $('.dataTables_length').addClass('bs-select');
});

/*--------------------------------------------------------------
Drop Down Filter
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Sort Order
--------------------------------------------------------------*/

.jplist-selected,
.jplist-selected:hover{
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group{
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

.btn-group button{
    border-left: 1px solid #dee2e6;
    border-collapse: collapse;
}

.btn-group button:first-child{
    border-left: 0;
}

.btn-group button.jplist-selected{
    background-color: #eb008b;
    color: #fff;
}

.input-group label{
    margin-bottom: 0;
}

.jplist-items-number-0 > ul.pagination{
    display: none !important;
}

.jplist-items-number-0 > span[data-type="info"]{
    margin-left: 0 !important;
}


/*--------------------------------------------------------------
Main Container
--------------------------------------------------------------*/

.view-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
}
.thumbnail
{
    margin-bottom: 30px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.item.list-group-item
{
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 30px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 1rem;
    border: 0;
}
.item.list-group-item .img-event {
    float: left;
    width: 30%;
}

.item.list-group-item .list-group-image
{
    margin-right: 10px;
}
.item.list-group-item .thumbnail
{
    margin-bottom: 0px;
}
.item.list-group-item .caption
{
    float: left;
    width: 70%;
    margin: 0;
}

.item.list-group-item:before, .item.list-group-item:after
{
    display: table;
    content: " ";
}

.item.list-group-item:after
{
    clear: both;
}

.pagination{
    float:right;
}

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        
<!-- Filter Table Start-->
    <div class="content-level-1">
            <!-- Search Input -->
            <div class="input-group">
                <input data-group="group1" data-name="my-filter-1" data-path=".badge" type="text" value="" placeholder="Search All " data-clear-btn-id="clear-btn" class="form-control">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="tags-clear-btn">Clear</button>
                </div>
            </div>
            <div class="input-group mt-2">
                <div class="input-group-prepend">
                    <span class="input-group-text">Position:</span>
                </div>
                <select data-group="data-group-1" data-name="name1">
                    <option
                    value="0"
                    data-path="default" selected>Choose Position</option>
                    <option
                    value="1"
                    data-path=".technical">technical</option>
                    <option
                    value="2"
                    data-path=".office">office</option>
                    <option
                    value="3"
                    data-path=".sales">sales</option>                  
                    <option
                    value="4"
                    data-path=".professional">professional</option>  
                    <option
                    value="5"
                    data-path=".trucking">trucking</option>
                    <option
                    value="6"
                    data-path=".service">service</option>
                    <option
                    value="7"
                    data-path=".market">market</option>
                    <option
                    value="8"
                    data-path=".entertainment">entertainment</option>
                    <option
                    value="9"
                    data-path=".parttime">parttime</option>                       
                </select>
                <div class="input-group-prepend">
                    <span class="input-group-text">Location:</span>
                </div>
                <select data-group="data-group-2" data-name="name2">
                    <option
                    value="0"
                    data-path="default" selected>Choose Location</option>
                    <option
                    value="1"
                    data-path=".manhattan">manhattan</option>
                    <option
                    value="2"
                    data-path=".queens">queens</option>
                    <option
                    value="3"
                    data-path=".longis">longis</option>                  
                    <option
                    value="4"
                    data-path=".newjersey">newjersey</option>  
                    <option
                    value="5"
                    data-path=".boston">boston</option>
                </select>
            </div>
            <!-- filter by -->
            <div class="input-group mt-2">
                <div class="input-group-prepend">
                    <span class="input-group-text">Filter:</span>
                </div>
                    <label class="form-control">
                        <input type="radio" data-path="default" data-group="group3" name="radio-buttons-text-filter" value="" checked="" class="mr-1">All
                    </label>
                    <label class="form-control">
                        <input type="radio" data-path=".badge" data-group="group3" name="radio-buttons-text-filter" value="fulltime" class="mr-1">
                                Full Time
                    </label>
                    <label class="form-control">
                        <input type="radio" data-path=".badge" data-group="group3" name="radio-buttons-text-filter" value="parttime" class="mr-1">
                                Part Time
                     </label>
                     <label class="form-control">
                        <input type="radio" data-path=".badge" data-group="group3" name="radio-buttons-text-filter" value="freelanser" class="mr-1">
                                Freelanser
                    </label>
            </div>
            <div class="input-group mt-2">
                <div class="input-group">
                    <button class="btn btn-outline-secondary ml-auto" type="button" id="search-btn">Search</button>
                </div>
            </div>
      </div>
    <!-- Filter Table Ends-->
    
    <!-- Data table starts -->
            <div class="table-responsive-md">
        <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th scope="col">지역
                <i class="fa fa-sort float-right" aria-hidden="true"></i>
              </th>
              <th scope="col">Position
                <i class="fa fa-sort float-right" aria-hidden="true"></i>
              </th>
              <th scope="col">Title
                <i class="fa fa-sort float-right" aria-hidden="true"></i>
              </th>
              <th scope="col">Company
                <i class="fa fa-sort float-right" aria-hidden="true"></i>
              </th>
              <th scope="col">Date
                <i class="fa fa-sort float-right" aria-hidden="true"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>퀸즈</td>
              <td>서비스직</td>
              <td>AAA 리셉셔니스트 구합니다.</td>
              <td>AAA</td>
              <td>2018/04/25</td>
            </tr>
            <tr>
              <td>뉴저지</td>
              <td>전문식</td>
              <td>한/중식 요리사 구함</td>
              <td>BBB</td>
              <td>2011/07/25</td>
            </tr>
            <tr>
              <td>롱아일랜드</td>
              <td>전문직</td>
              <td>Junior Technical Author 구합니다. </td>
              <td>CCC</td>
              <td>2009/01/12</td>
            </tr>
            <tr>
              <td>퀸즈</td>
              <td>서비스직</td>
              <td>AAA 리셉셔니스트 구합니다.</td>
              <td>AAA</td>
              <td>2018/04/25</td>
            </tr>
            <tr>
              <td>뉴저지</td>
              <td>전문식</td>
              <td>한/중식 요리사 구함</td>
              <td>BBB</td>
              <td>2011/07/25</td>
            </tr>
            <tr>
              <td>롱아일랜드</td>
              <td>전문직</td>
              <td>Junior Technical Author 구합니다. </td>
              <td>CCC</td>
              <td>2009/01/12</td>
            </tr>            <tr>
              <td>퀸즈</td>
              <td>서비스직</td>
              <td>AAA 리셉셔니스트 구합니다.</td>
              <td>AAA</td>
              <td>2018/04/25</td>
            </tr>
            <tr>
              <td>뉴저지</td>
              <td>전문식</td>
              <td>한/중식 요리사 구함</td>
              <td>BBB</td>
              <td>2011/07/25</td>
            </tr>
            <tr>
              <td>롱아일랜드</td>
              <td>전문직</td>
              <td>Junior Technical Author 구합니다. </td>
              <td>CCC</td>
              <td>2009/01/12</td>
            </tr>            
            <tr>
              <td>퀸즈</td>
              <td>서비스직</td>
              <td>AAA 리셉셔니스트 구합니다.</td>
              <td>AAA</td>
              <td>2018/04/25</td>
            </tr>
            <tr>
              <td>뉴저지</td>
              <td>전문식</td>
              <td>한/중식 요리사 구함</td>
              <td>BBB</td>
              <td>2011/07/25</td>
            </tr>
            <tr>
              <td>롱아일랜드</td>
              <td>전문직</td>
              <td>Junior Technical Author 구합니다. </td>
              <td>CCC</td>
              <td>2009/01/12</td>
            </tr>            
            <tr>
              <td>퀸즈</td>
              <td>서비스직</td>
              <td>AAA 리셉셔니스트 구합니다.</td>
              <td>AAA</td>
              <td>2018/04/25</td>
            </tr>
            <tr>
              <td>뉴저지</td>
              <td>전문식</td>
              <td>한/중식 요리사 구함</td>
              <td>BBB</td>
              <td>2011/07/25</td>
            </tr>
            <tr>
              <td>롱아일랜드</td>
              <td>전문직</td>
              <td>Junior Technical Author 구합니다. </td>
              <td>CCC</td>
              <td>2009/01/12</td>
            </tr>
          </tbody>
        </table>
        </div>
    <!-- Data table Ends -->

Passing Dispatch to a non component that sets columns of ReactTable?

I am using React Redux and Thunk for my front end Application. I have used ReactTable to render table views. ReactTable accepts columns and data as props. Since I have data coming from graphQL server I have to make a call for getting data. So I have an action that gets data from server and I am making a delayed dispatch for that action using thunk. Now the problem is since my headers and table data are coming from my action that is in a separate file other then component and I want to access dispatch right inside my header because I have rendered custom cells where I have icons to delete my table rows and I want to dispatch getData action after deleting any item so that my table updates how can i access dispatch in a non component file where I can not call connect ?

React: fire render after promise completed

Please note, that I a fetching data from AWS DynamoDB.

...
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
          contactList: []
        }
    }
    componentDidMount() {
        var getItemsPromise = db.scan({ TableName: "tester" }).promise();
        getItemsPromise.then((data) => this.setState({ contactList: data.Items }));
    }
    render() {
        return (
            <div>{this.state.contactList[0].link.S}</div>
        );
    }
}
export default Test;

I am trying to render the returned value, but can't. If I set

render() {
    console.log(this.state.contactList[0].link.S);
    return (
        <div>test</div>
    );
}

it works. Why is that? Why is it not working when I set it straight inline?

redux - how to react-redux mapDispatchToProps dispatch in action data current ref

Use [react-redux] to create an app. Can you select a ref={(v) => this.remoteVideos[data.id] = v} within [mapDispatchToProps] [dispatch ({action)]?

component code (i want get ref ref={el => this.remote[data.id] = el} ) component name(Detailexport)

class Detailexport extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { appref, webrtc } = this.props;
    return (
      <div>
        <div className="remotevideo" >
          {
            peers.length && peers.map(data => (
              <div className="vidContainer" key={data.id} id={`${webrtc.getContainerId(data)}`} >
                <video id={webrtc.getId(data)} autoPlay={true} ref={ appref[data.id] } playsInline />
              </div>
            ))
          }
        </div>
      </div>
    );
  }
}

container code

const mapDispatchToProps = (dispatch) => {
  return {
    init: (cfg) => {
      rtc.on('videoAdded', (stream, peer) => {
          dispatch({
            type: ADD_MEDIA,
            peer,
            stream: rtc.attachStream(stream, appref[peer.id])
          });
        });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps, null, { withref: true })(App);

app component code

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.history = createHistory();
    this.app = React.createRef();
  }

  componentDidMount() { this.props.init(); }

  render() {
    return (
      <Detailexport  appref={this.app}/>
    );
  };
};

( When I asked the question, I turned the translator around and asked the question. I'm sorry the sentence isn't smooth. I turned the translator. )

Javascript Animation Not Smooth?

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if(positioner < 1536){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

That's my code, and what i want to ask is:

why the image not smooth?? I say the animation is like refreshing every some of seconds
how to make the image moving when the MouseOver (onMouseOver)?

Controlling sprite animation with keypress

I've been working on a boxing game. After spending hours creating a sprite sheet, I now have trouble using it in my game. The animations load fine, but I can't seem to find a good way to control them. I would like to have each line of my sprite_sheet loop only once, but using this code, the punch keeps looping until I release the key.

left_jab = False

for event in pygame.event.get():

   if event.type == pygame.QUIT:
       quit()

   elif event.type == pygame.KEYDOWN:

       if event.key == pygame.K_UP:
           left_jab = True

   elif event.type == pygame.KEYUP:

       if event.key == pygame.K_UP:
           left_jab = False

   if left_jab:
        player.update(dt)
        player.render_left_jab(gameDisplay)

This is part of the player class:

    def update(self, dt):

    self.current_time += dt

    if self.current_time >= self.animation_time:
        self.current_time = 0

        if self.current_image >= self.numImages - 1:
            self.current_image = 0

        else:
            self.current_image += 1

Is there an easier way to do this? There are 8 images per line in my sprite sheet. Is it just a matter of creating a smoother animation using more images?

Related questions

How build a Spritesheet with pure CSS and JS in React js

See also questions close to this topic