Progress ScrollBar By Askwithloud
How do I make an progress scrollbar by askwithloud?
This is a post progress scrollbar widget for blogger.. What is a progress scrollbar by askwithloud? How do you make a progress scrollbar by askwithloud? This script and codes were developed by Prince on 15 December 2022, Thursday.
Progress ScrollBar By Askwithloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progress ScrollBar By Askwithloud</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class='post-body'> <h2 class='post-title'>This is a Demo of this Widget <b>(</b>Scroll down to see the Magic<b>)</b></h2> <p><b>Askwithloud is one of the best for blogging tips and tricks. Learn about seo, HTML and Javascript in very simple way.</b></p> <p><b>1-:</b> Learn-How to Add New Code Highlighter In Blogger-<a href="http://www.askwithloud.com/2015/07/How-to-add-new-code-highlighter-in-blogger.html" target="_blank">Add New Code Highlighter In Blogger</a></p> <p><b>2-:</b> Learn-How to Fix Do Not Track Your Own Page Views In Blogger-<a href="http://www.askwithloud.com/2015/07/How-to-fix-do-not-track-your-own-page-views.html" target="_blank">Fix Do Not Track Your Own Page Views In Blogger</a></p> <p><b>3-:</b> Learn-How to Add Responsive Recent Post Slider Widget in Blogger-<a href="http://www.askwithloud.com/2015/07/add-responsive-recent-post-slider.html" target="_blank">Add Responsive Recent Post Slider Widget in Blogger</a></p> <p><b>4-:</b> Learn-How to Fix A Popular Post Widget Error-<a href="http://www.askwithloud.com/2015/07/how-to-fix-popular-post-widget-error.html" target="_blank">How to Fix A Popular Post Widget Error</a></p> <p><b>5-:</b> Learn-How to Setup Custom Robots Header Tags in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-setup-custom-robots-header-tags.html" target="_blank">Setup Custom Robots Header Tags in Blogger</a></p>
</div> <div class='post-body'> <p><b>6-:</b> Learn-How to Divide A Blog Article into 2 Columns-<a href="http://www.askwithloud.com/2015/07/how-to-divide-blog-article-into-2.html" target="_blank">Divide A Blog Article into 2 Columns</a></p> <p><b>7-:</b> Learn-How To Remove Quick Edit Icon on Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-remove-quick-edit-tool-on-blogger.html" target="_blank">How To Remove Quick Edit Icon on Blogger</a></p> <p><b>8-:</b> Learn-How To add DISQUS Comment Box Widget In Blogger-<a href="http://www.askwithloud.com/2015/07/disqus-comment-box-widget-for-blogger.html" target="_blank">DISQUS Comment Box Widget For Blogger</a></p> <p><b>9-:</b> Learn-How To Setup A Bigrock Domain Name in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-setup-bigrock-domain-name-in.html" target="_blank">Setup A Bigrock Domain Name in Blogger</a></p> <p><b>10-:</b> Learn-How to Hide Post/Pages Title in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-hide-post-pages-title-in-blogger.html" target="_blank">How to Hide Post/Pages Title in Blogger</a></p> <p><b>11-:</b> Learn-How to Add Mouse Hover Social Media Widget In Blogger-<a href="http://www.askwithloud.com/2015/07/mouse-hover-social-media-widget-for-blogger.html" target="_blank">Add Mouse Hover Social Media Widget In Blogger</a></p>
</div> <div class='post-body'> <p>That's it ! I hope you like this widget! Stay tuned for more blogger widgets, tips and tricks! Thanks for reading @<b>Prince</b></p>
</div>
<div id='scroll'></div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Progress ScrollBar By Askwithloud - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
body { background-color:#f9f9f9; font-size:16px; color:#444; font-family: 'PT Sans Narrow', sans-serif;
}
.post-body h2{ color:#33D3A2;
}
.post-body { max-width:680px; margin:20px auto; border:10px solid #f0f0f0; padding:15px 20px; background-color:#fff; color:#444;
}
#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#33D3A2; color:#fff; border-radius:3px; font-size:14px;
}
#scroll:after { content: " "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#369fcf;
}
Progress ScrollBar By Askwithloud - Script Codes JS Codes
var scrollTimer = null;
$(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000);
});
Developer | Prince |
Username | Askwithloud |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 3,075 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!
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 |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
Sass Radar | Jlong | 6,887 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Loading animation | Codeams | 2,408 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!