Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Useful jQuery Various Scrolling Snippets and Plug-ins

Scrolling can improve usability of website dramatically. Scrolling with mouse can be a painful experience for visitors, especially on long pages. Probably the easiest way to get things done fast is with the help of jQuery. There are many plug-ins for jQuery that can easy this job, but technically you don't need a plug-in just some of these reusable snippets. Scroll to Anchor Text Create the anchors within your page, easy way to make jumps in relevant content or guide/tutorial pages. // HTML: // <h1 id="anchor">Example</h1> // <p><a href="#anchor" class="topLink">Back to Top</a></p> $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); }); Scroll to Top Scroll to top have become a standard, every website need this. $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });   Scroll to Bottom $(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000); }); Note the use of window.onload (when images are loaded...which occupy height) rather than document.ready.To make things proper, you just need to check the page height and substrack. $("html, body").animate({ scrollTop: $(document).height()-$(window).height() }); Load content on scroll Simple code that does the effect similar to Facebook, Twitter and Google Plus –...
Tags:
Rate this blog entry:
1
Continue reading
3916 Hits
0 Comments

Top 5 New jQuery Plug-ins

So many jQuery plug-ins are release nearly on daily basis, though majority are very simple and almost useless. Though here is a list of some new jQuery plug-ins that grabbed our attention, very small, useful and easy to use. Any List Scroller I found this one by accident, when I was trying to add custom image scroller to one of my WordPress based project. Unfortunately, there wasn't a plug-in that fit my need and I found this one, with some excellent features, technically you can scroll to any kind of web element with this one - text, image, etc... As well as do this horizontally and vertically. You can view the demo and download here:https://als.musings.it/ jqtimeline Timeline set of events jQuery plug-in, easy to use, fully customizable that create an impressive time-line effect. You can view demo and download here:https://goto.io/jqtimeline/ Supersized! Though this isn't the current trend in web design, the effect is impressive and I think many business niche can benefit from Supersized! Plug-in which assist you with implementation of full size background slide-show. You can view demo and download here:https://buildinternet.com/project/supersized/ Sidr Plug-in that assist you with creation of fully responsive side navigation menus. You can download here:https://www.berriart.com/sidr/ Textillate Simply...
Tags:
Rate this blog entry:
1
Continue reading
2173 Hits
0 Comments