Animated Statusbar (jQuery only)

Developer
Sheodox
Size
4,336 Kb
Views
8,096
  1. Animated Statusbar (jQuery only) Previews
  2. Animated Statusbar (jQuery only) HTML Codes
  3. Animated Statusbar (jQuery only) CSS Codes
  4. Animated Statusbar (jQuery only) JS Codes

How do I make an animated statusbar (jquery only)?

Without any CSS3 transitions for more compatibility.. What is a animated statusbar (jquery only)? How do you make a animated statusbar (jquery only)? This script and codes were developed by Sheodox on 26 December 2022, Monday.

Animated Statusbar (jQuery only) Previews
IQ Test

Animated Statusbar (jQuery only) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Statusbar (jQuery only)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="btnAdd">Add Message</button>
<button id="btnClear">Clear Messages</button>
<div id="messageArea" class="closed"></div>
<p id="txt" style="font-family:Meiryo;font-size:15px;line-height:2;padding:0 20px;">Cupcake ipsum dolor sit amet. Caramels cookie donut cupcake caramels cake sesame snaps. Carrot cake candy canes jelly cupcake unerdwear.com ice cream wafer lollipop. Dragée gingerbread marshmallow gummi bears bear claw. Carrot cake gingerbread carrot cake donut gingerbread topping wafer chocolate bar tootsie roll. Macaroon dragée caramels lemon drops sweet powder sugar plum. Halvah gingerbread dragée cheesecake chocolate bar dessert applicake sweet chocolate cake. Chocolate cake candy canes sugar plum oat cake muffin. Donut topping fruitcake candy lollipop. Dragée sweet tart croissant applicake tootsie roll fruitcake dessert. Sweet tootsie roll candy canes muffin soufflé cookie lemon drops. Candy canes pie macaroon bonbon gingerbread jelly beans. Chocolate cake liquorice bonbon fruitcake wafer. Jujubes carrot cake marshmallow dragée.
Applicake gingerbread muffin marzipan biscuit halvah. Pudding wafer biscuit halvah toffee icing apple pie marzipan. Candy canes chocolate cake ice cream halvah danish liquorice halvah. Toffee danish jelly beans jujubes candy canes. Wafer macaroon gingerbread powder soufflé jelly danish sweet. Carrot cake bear claw fruitcake danish bonbon gingerbread candy. Wafer toffee croissant chocolate gummi bears. Toffee wafer toffee candy canes applicake apple pie sesame snaps. Wafer candy liquorice. Applicake sweet jelly beans pie croissant. Sugar plum danish macaroon ice cream. Jelly-o gummi bears gingerbread pastry biscuit candy canes candy canes.
Dessert muffin chocolate toffee brownie chocolate bar powder macaroon. Gummies pastry cake toffee pie muffin brownie wafer powder. Fruitcake jelly pie jujubes biscuit brownie powder sesame snaps. Ice cream cotton candy bear claw. Marshmallow danish cookie liquorice oat cake. Jujubes marshmallow lemon drops. Chupa chups wafer sugar plum. Halvah jujubes pudding tootsie roll brownie macaroon cupcake wafer. Lollipop chocolate cake biscuit. Unerdwear.com chupa chups liquorice powder applicake caramels sweet roll. Soufflé fruitcake chupa chups gummies donut jujubes jelly-o. Ice cream cheesecake brownie brownie powder chocolate cake. Caramels croissant candy. Apple pie tootsie roll tootsie roll jelly candy.
Oat cake unerdwear.com pie candy canes fruitcake. Candy chocolate toffee carrot cake danish halvah chocolate bonbon. Oat cake cupcake dragée unerdwear.com jelly beans cheesecake cake. Carrot cake jelly-o bonbon toffee. Jelly-o ice cream gummies fruitcake chocolate bar cupcake sweet bear claw toffee. Chupa chups lollipop candy canes pie dragée. Pastry bonbon applicake dragée pudding sweet chocolate cake. Soufflé jelly beans tiramisu cotton candy jelly beans topping apple pie gingerbread. Topping pastry carrot cake muffin. Fruitcake tiramisu powder fruitcake applicake carrot cake powder chocolate gummies. Jelly chupa chups unerdwear.com toffee cheesecake soufflé carrot cake gingerbread. Tiramisu chupa chups cupcake brownie muffin. Pastry pie marshmallow gummies tootsie roll chocolate cake dessert halvah. Pastry marshmallow biscuit muffin brownie chocolate bar chocolate cake powder chocolate cake.
Donut cheesecake fruitcake. Chocolate ice cream dessert. Apple pie soufflé cheesecake. Jujubes liquorice ice cream cookie. Liquorice lemon drops muffin macaroon toffee toffee cupcake caramels oat cake. Lemon drops dessert cake liquorice lemon drops topping jelly beans. Sweet roll sesame snaps pie toffee unerdwear.com unerdwear.com toffee icing. Applicake powder oat cake bonbon jelly-o sweet roll jujubes liquorice. Oat cake soufflé chocolate cake jelly-o. Sugar plum lemon drops tart. Caramels chocolate cake jelly beans macaroon chupa chups. Lollipop bear claw lemon drops jelly wafer chupa chups ice cream fruitcake topping. Soufflé sugar plum cookie.
Danish caramels macaroon cheesecake. Soufflé donut soufflé apple pie sesame snaps sweet roll. Chocolate bar bear claw toffee croissant. Chocolate cake carrot cake unerdwear.com carrot cake sugar plum jelly gummies. Lemon drops applicake danish fruitcake. Chocolate cake candy dragée sweet roll. Sweet danish dessert pie lollipop chocolate chupa chups. Gummies marshmallow donut powder chupa chups sweet roll macaroon unerdwear.com topping. Donut powder icing bear claw cupcake. Apple pie carrot cake liquorice macaroon sweet topping apple pie chupa chups. Bonbon chocolate cake tiramisu. Marzipan pastry applicake chocolate bar bear claw sweet roll pastry. Lemon drops halvah oat cake tootsie roll chocolate. Topping muffin applicake cupcake biscuit fruitcake.
Topping sweet lemon drops lollipop candy canes muffin. Pastry jelly marshmallow. Candy canes candy sweet candy jelly donut cotton candy halvah. Halvah toffee chocolate cake tootsie roll apple pie lollipop jelly sesame snaps. Jelly beans sweet roll tootsie roll sugar plum tootsie roll marshmallow jelly beans chocolate bar jujubes. Candy sweet jelly-o brownie powder. Tiramisu pastry pastry pastry dragée marshmallow. Macaroon biscuit applicake sesame snaps soufflé chocolate dragée bear claw halvah. Muffin lemon drops applicake jujubes dessert tootsie roll brownie candy croissant. Jelly cotton candy apple pie pastry gummi bears. Tart chupa chups danish pudding. Tart toffee muffin gummi bears sesame snaps chocolate. Oat cake topping chocolate bar chocolate bar marshmallow sesame snaps sweet chocolate bar.
Unerdwear.com danish bear claw lollipop danish chocolate. Cupcake biscuit candy canes bonbon chocolate bar oat cake. Marzipan topping cookie tootsie roll halvah topping brownie jujubes. Halvah sesame snaps carrot cake. Wafer tiramisu gingerbread. Dragée jelly bonbon sugar plum. Ice cream jelly beans soufflé. Bonbon sesame snaps muffin unerdwear.com tootsie roll pie sweet. Pie oat cake sesame snaps dragée cookie wafer brownie. Macaroon jelly-o sweet jelly beans macaroon halvah lollipop. Jelly soufflé chocolate cake lollipop chocolate cake candy canes bear claw pudding. Candy canes sugar plum chocolate muffin marzipan.
Liquorice croissant cookie gummi bears muffin unerdwear.com muffin. Muffin oat cake croissant. Croissant halvah soufflé tiramisu brownie. Carrot cake pudding topping sugar plum carrot cake cake candy canes donut muffin. Croissant caramels tiramisu sweet roll candy canes tootsie roll cookie danish candy canes. Jujubes apple pie cake. Marzipan chupa chups danish. Candy pie brownie cake lemon drops. Oat cake macaroon muffin halvah chocolate bar. Cupcake cotton candy jelly beans cheesecake cotton candy jujubes sugar plum carrot cake cookie. Danish candy canes gummies pie. Pie marzipan tootsie roll candy chupa chups chupa chups. Tart icing candy canes brownie croissant wafer.
Chocolate bar jelly-o chocolate dragée cookie pie chocolate bar. Brownie gummi bears danish gummies. Marzipan jujubes brownie dragée topping marshmallow. Fruitcake apple pie oat cake cake chupa chups. Sweet wafer gummi bears pastry macaroon marshmallow marzipan tootsie roll cheesecake. Liquorice jujubes cheesecake chupa chups. Tart chocolate bar dessert cake marshmallow candy. Croissant unerdwear.com gummi bears bear claw. Gingerbread caramels caramels apple pie pastry liquorice gingerbread. Sweet roll powder chocolate. Ice cream marshmallow chocolate cake applicake croissant lollipop. Muffin cake apple pie halvah.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Statusbar (jQuery only) - Script Codes CSS Codes

body { height:100%; width:100%;
}
#messageArea { border-top: 1px solid #AAA; width:96%; position:fixed; cursor:pointer; bottom:0; background:white; color: #444; text-align:center;
}
.closed { overflow:hidden;
}
.expanded { overflow:auto;
}
.message { font-size:14px; font-family:Meiryo; margin:0; padding: 0px 10px;
}

Animated Statusbar (jQuery only) - Script Codes JS Codes

var mA = $("#messageArea");
var msgHeight;
var messages = 0;
$(document).ready(function(){ mA.on("click", toggleExpand); $("#btnAdd").on("click", addMessage); $("#btnClear").on("click", clearMessage); mA.css("height", "40px"); //get height of messages addMessage(" "); msgHeight = mA.children().first().height();
});
function toggleExpand(){ if(mA.hasClass("closed")){ mA.addClass("expanded"); mA.removeClass("closed"); mA.animate({height: "140px"}, 'fast'); } else{ mA.addClass("closed"); mA.removeClass("expanded"); mA.animate({height: "40px"}, 'fast'); setTimeout(function(){mA.animate({scrollTop: messages * msgHeight + "px"}, 'fast')}, 500); }
}
function addMessage(){ mA.append("<p class='message'>" + getText() + "</p>"); var newMessage = mA.children().last("p"); mA.stop().animate({scrollTop: messages * msgHeight + "px"}, 'fast'); messages++;
}
function clearMessage(){ mA.html(""); messages = 0;
}
//just for demo purposes
$(document).ready(function(){ setTimeout(function(){addMessage()}, 1000); setTimeout(function(){addMessage()}, 2000); setTimeout(function(){addMessage()}, 3000); setTimeout(function(){addMessage()}, 4000); setTimeout(function(){addMessage()}, 5000); setTimeout(function(){addMessage()}, 6000); setTimeout(function(){addMessage()}, 7000);
});
//to provide dummy text for the messages
var pageText = $("#txt").text().split(" ");
var place = 0;
function getText(){ if (place >= 999) //end of pageText place = 0; var str = ""; for(var i = place;i< place + 5; i++) str += pageText[i] + " "; place += 5; return str;
}
Animated Statusbar (jQuery only) - Script Codes
Animated Statusbar (jQuery only) - Script Codes
Home Page Home
Developer Sheodox
Username sheodox
Uploaded December 26, 2022
Rating 3
Size 4,336 Kb
Views 8,096
Do you need developer help for Animated Statusbar (jQuery only)?

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!

Sheodox (sheodox) Script Codes
Name
Animated Statusbar Message Area
Clean Dialog
Windows-like Loading Bar
Click counter
Pretty print JSON
WIP pulsing loading bar
Jisho Lookup Bookmarklet
Text Highlighter
A Pen by sheodox
Pure Libs
Create amazing marketing copy 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!