Social Network for Web Professionals

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
3862 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
2115 Hits
0 Comments