Objects
How do I make an objects?
What is a objects? How do you make a objects? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.
Objects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Objects</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 - Script Codes CSS Codes
.tile{ height:100px; line-height:100px; 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;
}
Objects - Script Codes JS Codes
var tileGrid = (function() { 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(){ var $backgroundImg = (_tileGrid.tileImg[Math.floor(Math.random()*_tileGrid.tileImg.length)]); var $tile = $('<div class="col-md-4 tile">I need coffee.</div>'); $tile.css({'background-image': 'url('+$backgroundImg+')','background-size': '100%','background-repeat':'no repeat','background-position':'50% 50%'}); $tile.on('click', function(){ $tile.css({'background': '#09f','text-shadow':'0 0 0'}); _tileGrid.tileMenu.append($tile); _tileGrid.tileList.push($tile); $('[data-count="tileCount"]').html(_tileGrid.tileList.length); }); return $tile; }, container: function(n){ var $container = $('<div class="col-md-8"></div>'); for (i=0; i<n; i++){ $container.append(_tileGrid.tile()); } return $container; }, tileMenu: $('<div class="col-md-4"></div>') }; return { awesomeness: function(num) { return _tileGrid.container(num); }, moreAwsomness: function() { return _tileGrid.tileMenu; } }
})();
$('body').append(tileGrid.awesomeness(27));
$('body').append(tileGrid.moreAwsomness());
Developer | Jerusha Johnson |
Username | bonzaipenguin |
Uploaded | October 22, 2022 |
Rating | 3 |
Size | 2,616 Kb |
Views | 14,168 |
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 |
Objects 2.0 | 3,082 Kb |
TBI Thank You | 2,550 Kb |
Wedding Announcement Idea | 2,506 Kb |
Photo Week Bug | 1,926 Kb |
Scaled Agile Card Heights | 2,113 Kb |
Recreate ScrollSpy v1 | 3,692 Kb |
Phone-esque Accordian | 2,398 Kb |
Slide animation | 2,281 Kb |
Parallax Scroll 2.0 | 2,393 Kb |
Text Shadow Experiment | 2,593 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 |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Contact | GanNichiHa | 2,514 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Count up | Alanshortis | 2,391 Kb |
Old calculator | Gnarfugh | 2,815 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!