Real Time Guts Tweets

Developer
ThatGuySam
Size
4,842 Kb
Views
42,504
  1. Real Time Guts Tweets Previews
  2. Real Time Guts Tweets HTML Codes
  3. Real Time Guts Tweets CSS Codes
  4. Real Time Guts Tweets JS Codes

How do I make an real time guts tweets?

Twitter feed that fetches new tweets up to every 6 seconds from a free Heroku server running a PHP script for AUTH. What is a real time guts tweets? How do you make a real time guts tweets? This script and codes were developed by ThatGuySam on 06 August 2022, Saturday.

Real Time Guts Tweets Previews
IQ Test

Real Time Guts Tweets - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Real Time Guts Tweets</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <link rel='stylesheet prefetch' href='http://tougherthanhell.com/wp-content/themes/dominate/dist/styles/main-09445ba6.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='box-boxes boxes-twitter boxes-masonry text-overlay thin-padding'> <div class='frame container-fluid'> <ul class='easecubic row'></ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Real Time Guts Tweets - Script Codes CSS Codes

.delay-1 { -webkit-animation-delay: 1350ms; animation-delay: 1350ms;
}
.delay-2 { -webkit-animation-delay: 1275ms; animation-delay: 1275ms;
}
.delay-3 { -webkit-animation-delay: 1200ms; animation-delay: 1200ms;
}
.delay-4 { -webkit-animation-delay: 1125ms; animation-delay: 1125ms;
}
.delay-5 { -webkit-animation-delay: 1050ms; animation-delay: 1050ms;
}
.delay-6 { -webkit-animation-delay: 975ms; animation-delay: 975ms;
}
.delay-7 { -webkit-animation-delay: 900ms; animation-delay: 900ms;
}
.delay-8 { -webkit-animation-delay: 825ms; animation-delay: 825ms;
}
.delay-9 { -webkit-animation-delay: 750ms; animation-delay: 750ms;
}
.delay-10 { -webkit-animation-delay: 675ms; animation-delay: 675ms;
}
.delay-11 { -webkit-animation-delay: 600ms; animation-delay: 600ms;
}
.delay-12 { -webkit-animation-delay: 525ms; animation-delay: 525ms;
}
.delay-13 { -webkit-animation-delay: 450ms; animation-delay: 450ms;
}
.delay-14 { -webkit-animation-delay: 375ms; animation-delay: 375ms;
}
.delay-15 { -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
.delay-16 { -webkit-animation-delay: 225ms; animation-delay: 225ms;
}
.delay-17 { -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
.delay-18 { -webkit-animation-delay: 75ms; animation-delay: 75ms;
}
.delay-19 { -webkit-animation-delay: 0ms; animation-delay: 0ms;
}
.delay-20 { -webkit-animation-delay: -75ms; animation-delay: -75ms;
}
.boxes-twitter .frame ul li { list-style: none; overflow: visible; padding: 10px;
}
.boxes-twitter .frame ul li:hover { z-index: 10;
}
.boxes-twitter .box-tweet { -webkit-animation-delay: attr(data-animation-delay ms); animation-delay: attr(data-animation-delay ms); z-index: 10; -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint */ box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.boxes-twitter .box-tweet:hover { z-index: 11; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
}
.boxes-twitter .box-tweet:after { content: none;
}
.boxes-twitter .box-tweet .box-header,
.boxes-twitter .box-tweet a { color: inherit; text-shadow: none;
}
.boxes-twitter .box-tweet .box-header img { width: auto;
}
.boxes-twitter .box-tweet .box-caption { display: block; position: static; color: inherit;
}
.boxes-twitter .box-tweet .box-caption p { font-size: 1em;
}
.boxes-twitter .box-tweet .box-image { opacity: 0.1;
}
.hero-section { min-height: 350px; max-height: 1000px !important;
}
@media (max-width: 767px) { .hero-section { max-height: 350px !important; }
}

Real Time Guts Tweets - Script Codes JS Codes

var twitterJSON = "https://guts.herokuapp.com/";
var loadedTweets = [];
var container = '.box-boxes';
var msnryContainer = [container, ' .frame ul'].join('');
var msnryItems = [msnryContainer, ' li'].join('');
var liveTweets = { //Set Contrasting Color yiq: function(hexcolor) { var r = parseInt(hexcolor.substr(0, 2), 16); var g = parseInt(hexcolor.substr(2, 2), 16); var b = parseInt(hexcolor.substr(4, 2), 16); var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; return (yiq >= 128) ? '000' : 'fff'; }, toHTML: function(tweet, i) { i = i || 0; console.log(tweet); var html, box_image, content, bg_color, text_color, box_css, link_url, name, img_url, profile_img; html = box_image = ""; content = tweet.text; //Add link filtering bg_color = tweet.user.profile_background_color; text_color = liveTweets.yiq(tweet.user.profile_background_color); box_css = ""; box_css += 'style="'; box_css += 'background-color: #' + bg_color + ';'; box_css += 'color: #' + text_color + ';'; box_css += '"'; //End styles link_url = "https://twitter.com/" + tweet.user.screenname + "/status/" + tweet.id_str; name = tweet.user.name; if (tweet.entities.urls.length !== 0) { link_url = tweet.entities.urls[0].url; } img_url = "//gutschurch.com/wp-content/uploads/2014/11/blank.gif"; if ('media' in tweet.entities) img_url = tweet.entities.media[0].media_url_https; //Add if to this profile_img = tweet.user.profile_image_url; html = [ '<li class="col-xs-12 col-sm-6 col-sm-offset-0 col-md-4">', '<div class="box-box box-tweet easecubic animated fadeInUp delay-', i, '" ', box_css, ' >', '<a href="', link_url, '" title="', name, '" target="_blank">', '<div class="box-image">', '<img src="', img_url, '">', '</div>', //.box-image '<div class="box-header easecubic">', '<div class="box-header-content">', '<div class="box-caption easecubic">', '<p>', content, '</p>', '</div>', //.box-caption '<span><img src="',profile_img,'" alt="',name,'"></span>', //'<h3>','</h3>', '</div>', //.box-header-content '</div>', //.box-header '</a>', '</div>', //.box-box '</li>' ].join(''); return html; }, //Let's get this started init: function(container) { var list, gutter, l; $boxesContainer = $(container); list = document.querySelectorAll(msnryContainer); $list = $(list); gutter = 0; // Creates an instance of Masonry var $boxesMason = $list.masonry({ gutter: gutter, itemSelector: 'li', columnWidth: 'li:first-child' }); (function worker() { $.ajax({ url: twitterJSON, success: function(data) { //console.log( data ); //if results are search results if ('statuses' in data) data = data.statuses data.reverse(); l = data.length; tweetsLoop: for (i = 0; i < l; i++) { //console.log(i); var tweet = data[i]; //console.log("This Tweet: "+tweet.id_str); //Tweet is new! if (loadedTweets.indexOf(tweet.id_str) == -1) { loadedTweets.push(tweet.id_str); var html = liveTweets.toHTML(tweet, i); $html = $(html); if (html !== false) { $list.prepend($html) .masonry('prepended', $html); } } else { //Tweet is old, Skip! //continue tweetsLoop; } } }, complete: function() { // Schedule the next request when the current one's complete setTimeout(worker, 10 * 1000); } }); })(); }
} //liveTweets
//Yall ready for this
liveTweets.init(container);
Real Time Guts Tweets - Script Codes
Real Time Guts Tweets - Script Codes
Home Page Home
Developer ThatGuySam
Username ThatGuySam
Uploaded August 06, 2022
Rating 3
Size 4,842 Kb
Views 42,504
Do you need developer help for Real Time Guts Tweets?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ThatGuySam (ThatGuySam) Script Codes
Name
Angry Face
ARC Kinetic 1.1
Real Time Twitter Feed
Pictures of Bill Murray
Guts Less Mixins
Quote Like an Artist
Flat Price Table
Vimeo Feed
Facebook Style Typography
Add This API
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!