Objects 2.0
How do I make an objects 2.0?
What is a objects 2.0? How do you make a objects 2.0? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.
Objects 2.0 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Objects 2.0</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3 class="col-md-8" data-count="tileCount"></h3> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Objects 2.0 - Script Codes CSS Codes
.tile{ height:250px; line-height:250px; background:#09f; border:5px solid #fff; text-align:center; color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.9); cursor:pointer; font-size:1.5em; overflow:hidden;
}
Objects 2.0 - Script Codes JS Codes
//Tile Grid
var tileGrid = (function() { var subscribe = function(channel, fn){ if (!tileGrid.channels[channel]) tileGrid.channels[channel] = []; tileGrid.channels[channel].push({ context: this, callback: fn }); return this; }, publish = function(channel){ if (!tileGrid.channels[channel]) return false; var args = Array.prototype.slice.call(arguments, 1); for (var i = 0, l = tileGrid.channels[channel].length; i < l; i++) { var subscription = tileGrid.channels[channel][i]; subscription.callback.apply(subscription.context, args); } return this; }; var _tileGrid = { tileList: [], tileImg: ['http://payload203.cargocollective.com/1/8/282864/6367350/DSC_0058_900.JPG','http://payload175.cargocollective.com/1/8/282864/5815632/9042399407_bf04388aca_o_900.jpg','http://payload88.cargocollective.com/1/8/282864/4071568/DSC_0817_900.jpg','http://payload175.cargocollective.com/1/8/282864/5804803/DSC_0294_900.jpg','http://payload175.cargocollective.com/1/8/282864/5815628/DSC_0631_1_900.jpg','http://38.media.tumblr.com/07cbec0c0cf8d6ddb1cc75e2673ec47f/tumblr_n7856c5F3y1sfie3io1_1280.jpg','http://38.media.tumblr.com/393be10656d995b450dd3127ac264e2b/tumblr_n75yr5NJ5L1sfie3io1_1280.jpg','http://38.media.tumblr.com/56bd4fd8e63206fed5784ceb47cc3790/tumblr_n75yqoaaUW1sfie3io1_1280.jpg','http://37.media.tumblr.com/202eaaee435ccf7d93d89f34cf26d884/tumblr_n75yqbQ3vw1sfie3io1_1280.jpg','http://38.media.tumblr.com/5be6a52372f622728adb07566fc1e305/tumblr_n7fgokF2Ul1st5lhmo1_1280.jpg','http://31.media.tumblr.com/cd40dba26eabfc0901892be37f207cf6/tumblr_n7fgl3sQS61st5lhmo1_1280.jpg','http://38.media.tumblr.com/8d2189abeb32be278934468c200b31fa/tumblr_n7fftg5Ml61st5lhmo1_1280.jpg'], tile: function(id){ var $backgroundImg = (_tileGrid.tileImg[Math.floor(Math.random()*_tileGrid.tileImg.length)]); var $tile = $('<div class="col-md-4 tile" data-tid="'+id+'">I need coffee.</div>'); $tile.css({'background-image': 'url('+$backgroundImg+')','background-size': 'cover','background-repeat':'no-repeat','background-position':'50% 50%'}); $tile.on('click', function(){ /*$tile.css({'background': '#333','text-shadow':'0 0 0'});*/ _tileGrid.tileList.push($tile); $('[data-count="tileCount"]').html(_tileGrid.tileList.length); tileGallery.publish('addTile',$tile.clone(),'#09f'); }); return $tile; }, container: function(n){ var $container = $('<div class="col-md-8"></div>'); for (i=0; i<n; i++){ $container.append(_tileGrid.tile(i)); } return $container; } } return { awesomeness: function(num) { return _tileGrid.container(num); }, channels: {}, publish: publish, subscribe: subscribe, installTo: function(obj){ obj.subscribe = subscribe; obj.publish = publish; } }
})();
//Gallery
var tileGallery = (function(){ var subscribe = function(channel, fn){ if (!tileGallery.channels[channel]) tileGallery.channels[channel] = []; tileGallery.channels[channel].push({ context: this, callback: fn }); return this; }, publish = function(channel){ if (!tileGallery.channels[channel]) return false; var args = Array.prototype.slice.call(arguments, 1); for (var i = 0, l = tileGallery.channels[channel].length; i < l; i++) { var subscription = tileGallery.channels[channel][i]; subscription.callback.apply(subscription.context, args); } return this; }; var _tileGallery = { tileAdd: function(obj){ var $tileAdd = obj.clone(); }, gallery: $('<div class="col-md-4 gallery"></div>') }; return { magic: function() { return _tileGallery.gallery; }, channels: {}, publish: publish, subscribe: subscribe, installTo: function(obj){ obj.subscribe = subscribe; obj.publish = publish; }, gallery: _tileGallery.gallery }
})();
tileGallery.subscribe('addTile', function(obj,color){ this.gallery.append(obj).css(['background-color',color]);
});
//Make it Work
$('body').append(tileGrid.awesomeness(27));
$('body').append(tileGallery.magic());
Developer | Jerusha Johnson |
Username | bonzaipenguin |
Uploaded | October 22, 2022 |
Rating | 3 |
Size | 3,082 Kb |
Views | 8,096 |
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!
Name | Size |
Photo Week Bug | 1,926 Kb |
TBI Thank You | 2,550 Kb |
Mobile Calendar Test | 3,456 Kb |
Objects | 2,616 Kb |
Medium-esque | 2,185 Kb |
Logo for Carla v2 | 1,959 Kb |
Slide animation | 2,281 Kb |
X-axis and Y-axis Affixes | 3,803 Kb |
Pile of Letters | 2,120 Kb |
New BookStrap | 1,992 Kb |
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!
Name | Username | Size |
Two Element Typeface | Chrisota | 4,942 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Console fun | Dviate | 1,500 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!