opti_21
opti_21's Achievements
0
Reputation
-
Also just to note the rows are dynamically added and removed in real time on the DOM using Pusher. Or if the page is refreshed it pulls from the server. And i'm trying to recreate it on codepen but it might be a while since I have to simplify it ?
-
Here's the front end: <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> <title>Vibey Bot</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { color: white; background-color: #2d3436; } </style> </head> <body> <div class="container"> <h1>Vibey Requests!</h1> <h2>Current Mix</h2> <div id="clear-mix"> <button class="delete-mix btn btn-danger btn-sm mb-3"> Clear Mix </button> </div> <table id="mix-table" class="table table-dark table-hover table-sm"> <thead> <tr> <th scope="col">Track Requested</th> <th scope="col">Requested By:</th> <th scope="col">Edit</th> </tr> </thead> <tbody class="" id="mixContainer"> <% mixReqs.forEach(request => { %> <tr width="100%" id="<%= request.id %>"> <td> <% if(request.source === 'spotify'){ %> <a class="srLink" href="<%= request.track[0].link %>" target="_blank"><%= request.track[0].name %> - <%= request.track[0].artist %></a> <a class="spotify" href="<%= request.track[0].uri %>"><i class="fab fa-spotify" title="Open in Spotify"></i></a> <% } %> <% if(request.source === 'youtube'){ %> <a class="srLink" href="<%= request.track[0].link %>" target="_blank"><%= request.track[0].name %></a> <a class="youtube" href="<%= request.track[0].link %>" target="_blank"><i class="fab fa-youtube" title="Open on Youtube"></i></a> <% } %> </td> <td><%= request.requestedBy %></td> <td> <button class="delete btn btn-danger btn-sm mix" data-srID="<%= request.id %>" data-srName="<%= request.track[0].name %>"> Remove from Mix </button> </td> </tr> <% }) %> </tbody> </table> <h2 id="title">Song Requests</h2> <div id="clear-queue"> <button class="delete-queue btn btn-danger btn-sm mb-3"> Clear Queue </button> </div> <table id="sr-table" class="table table-dark table-hover table-sm"> <thead> <tr> <th scope="col">Track Requested</th> <th scope="col">Requested By:</th> <th scope="col">Edit</th> </tr> </thead> <tbody class="" id="srContainer"> <% requests.forEach(request => { %> <tr width="100%" id="<%= request.id %>"> <td> <% if(request.source === 'spotify'){ %> <a class="srLink" href="<%= request.track[0].link %>" target="_blank"><%= request.track[0].name %> - <%= request.track[0].artist %></a> <a class="spotify" href="<%= request.track[0].uri %>"><i class="fab fa-spotify" title="Open in Spotify"></i></a> <% } %> <% if(request.source === 'youtube'){ %> <a class="srLink" href="<%= request.track[0].link %>" target="_blank"><%= request.track[0].name %></a> <a class="youtube" href="<%= request.track[0].link %>" target="_blank"><i class="fab fa-youtube" title="Open on Youtube"></i></a> <% } %> </td> <td><%= request.requestedBy %></td> <td> <button class="btn btn-success btn-sm mr-3 mix-add" data-srID="<%= request.id %>">Add to Mix</button> <button class="delete btn btn-danger btn-sm" data-srID="<%= request.id %>" data-srName="<%= request.track[0].name %>"> <i class="fas fa-minus-circle"></i> </button> </td> </tr> <% }) %> </tbody> </table> <a href="/logout"><button class="btn btn-danger">Logout</button></a> </div> <script src="vendor/jquery/jquery.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/velocity.min.js"></script> <script src="js/jquery.animateNumber.min.js"></script> <script src="vendor/gsap/TweenMax.min.js"></script> <script src="https://js.pusher.com/4.4/pusher.min.js"></script> <script src="js/sweetalert2.all.min.js"></script> <script src="js/script.min.js"></script> </body> </html> And back end (script.js): // realtime song add to mix var channel = pusher.subscribe('sr-channel'); channel.bind('mix-event', function(data) { try { console.log('Song added to mix') var mixContainer = document.getElementById('mixContainer') var mixElement = document.createElement('tr'); mixElement.setAttribute('class', 'song-request'); mixElement.setAttribute('id', `${data.id}`); if (data.source === 'spotify') { mixElement.innerHTML = ` <td><a class="srLink" href="${data.link}">${data.track} - ${data.artist}</a> <a class="spotify" href="${data.uri}"><i class="fab fa-spotify" title="Open in Spotify"></i></a></td> <td>${data.reqBy}</td> <td> <button class="delete btn btn-danger btn-sm mix" data-srID="${data.id}" data-srName="${data.track} - ${data.artist}"> Remove from Mix </button> </td> ` } if (data.source === 'youtube') { mixElement.innerHTML = ` <td><a class="srLink" href="${data.link}">${data.track}</a> <a class="youtube" href="${data.link}"><i class="fab fa-youtube" title="Open on Youtube"></i></a></td> <td>${data.reqBy}</td> ` } mixContainer.append(mixElement) // Animate newly created element TweenMax.from(mixElement, 1, {y:1000, autoAlpha:0, ease:Power4.easeOut}) } catch (err) { console.error(err) } }); // Clear specific tr based off of <tr id="id"> channel.bind('mix-remove', function(data) { TweenMax.to(`#${data.id}`, .5, {autoAlpha:0, margin: 0, onComplete:function(){ $(`#${data.id}`).remove(); }}); }); // Clear all rows of table body channel.bind('clear-mix', function(data) { TweenMax.to(`#mix-table tbody tr`, .5, {autoAlpha:0, margin: 0, onComplete:function(){ $(`#mix-table tbody tr`).remove(); }}); });
-
So i'm trying to animate a table row that's being out put with bootstrap. But it's only animating the text but not the row's "background"? Also the reason for the jellyfish background is because the widget will end up as an overlay in OBS and that's just test footage. And yes, it's the same behavior in chrome. // Add animation TweenMax.from(mixElement, 1, {y:1000, autoAlpha:0, ease:Power4.easeOut}); // remove animation TweenMax.to(`#${data.id}`, .5, {autoAlpha:0, margin: 0, onComplete:function(){ $(`#${data.id}`).remove(); }});