Rotate Text Links using jQuery

Rotate Text Links using jQuery

Text link ads are a very popular way of monetizing any website. Text link ads are simple links which, upon clicking, will take you to the sponsor’s website. One of the nice feature of text link ads is rotation of the links with smooth animation. In this post, we’ll look at out how to implement rotating text links using jQuery.

HTML Markup
In the HTML, define 3 different anchor tag links. All the anchor tag elements have a CSS class called “links”, which is a dummy class used for selecting these elements using the jQuery CSS class selector.
jQuery Code
Next, we’ll need to use JavaScript setInterval(). The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). You can follow this outline of the jQuery solution:
·      Create an array variable and select all the anchor elements that have CSS class “links”.
·      Hide all the anchor links, except the first one.
·      Create 2 global variables nTotal and nPos. nTotal will store the array length and nPos will define the index of currently visible link.
·      Create a function named RotateLinks(). This function will (you guessed it!) rotate the links. The setInteval() method will call this function every 2 seconds. In the function, first slowly fade out the currently visible link. An index of currently visible links is available in the nPos variable, use the eq() method to select that item from the array. Increase the value of the nPos variable by 1 as we need to make the next link visible. You’ll want to ensure that the nPos value does not exceed nTotal. When nTotal and nPos are equal, which means the last link is visible, you’ll want to start the rotation from the first link again by setting the nPos value to 0. Lastly, set the next visible link to fade-in.
Here is the complete jQuery code.
$(document).ready(function() {
  var $anch = $("a.links");
  $anch.hide().eq(0).show();
  var nTotal = $anch.length;
  var nPos = 0;
  setInterval(RotateLinks, 2000);

  function RotateLinks() {
    $anch.eq(nPos).fadeOut("slow", function() {
      nPos++;
      if (nPos == nTotal) {
        nPos = 0;
      }
      $anch.eq(nPos).fadeIn("slow")
    });
  }
});

You can check out the demo here!
An important thing to note is that a callback function must be defined with the fadeOut method. This callback is fired once the animation is complete, and is crucial because if we simply fade out and fade in an overlapping of animation will occur. You can check out the issue yourself by modifying the code like this:

function RotateLinks() {
   $anch.eq(nPos).fadeOut("slow");
   nPos++;
   if (nPos == nTotal)
       nPos = 0;
   $anch.eq(nPos).fadeIn("slow");
}

The call-back function works like a charm. However, if you wish to have more control over the link transitions, you can use the Cycle plugin. This plugin will accomplish this task in just one line of code.  To use the Cycle plug-in, you’ll need to wrap all the anchor tag elements inside a container. Like:

  Google

In jQurey, simply call the cycle() function on the wrapper. Like this:
$(document).ready(function() {
  $('#Links').cycle();
})

You can check out the demo here!
The default transition time is 4 seconds, but you can override this by setting the timeout option. Like so:
$(document).ready(function() {
  $('#Links').cycle({
      timeout : 3000
  });
})

Please visit this link to learn more about the supported operations.
Conclusion

To sum it up, we saw how to rotate text links using jQuery code and the jQuery Cycle plugin. The plain jQuery code uses simple jQuery techniques to rotate the links. You can also control the rotation speed by updating the setInterval() duration. The cycle plugin provides more options to control the link transitions, if you are looking for increased management. Enjoy!

jQuery Snippets: Scroll to Top

jQuery Snippets: Scroll to Top
This simple and straightforward jQuery code snippet can be used to easily create a "scroll to top" effect on any of your pages or projects. If you've not familiar with the scroll to top concept, it basically involves a link or button of some sort that is typically placed in the bottom corner of a page. When the link or button is clicked, the page scrolls smoothly back up to the top, so that the user doesn't have to scroll manually.

Here's the code that you'd need to implement this effect on your pages or projects:

The HTML

Let's start with HTML for a scroll to top link. It should be pretty straightforward, and look something like this:

<a href="#" class="to-top">Back to Top</a>

The text can say anything you'd like, and you should feel free to get creative with the styling. Many designers and developers prefer links that resemble buttons, rather than plain text links, for this particular purpose.

The jQuery

Like the HTML, the jQuery for this effect is actually quite simple. Take a look at the snippet below to see for yourself how it works:

$(document).ready(function() {
    $('.to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 300);
    })
});

As you can see, when the 'to-top' link is clicked, the animation method is applied to the html and the body elements, using the scrollTop value, which scrolls the entire page back up to the top. The numerical value (in this case, 300) defines the speed at which it should take for the page to scroll back up to the top in milliseconds. 

3 Really Fun jQuery Plugins

Sometimes, web developers just wanna have fun. If you can relate to this, then you'll probably love this list we put together of 3 of our favorite super fun jQuery plugins that you can add to your projects. They may not be the most useful or practical plugins around, but they sure are fun to play with.

1. Raptorize


Raptorize is a really fun plugin that you can use to add a raptor (you know, everyone's favorite scary extinct giant lizard with the razor sharp claws) to any web page. You can have it pop up just about anywhere you like, and it even comes complete with sound effects. Roar!



BoingPic is a very fun, interactive plugin that you can use to add some crazy interactive effects to images. When you move your cursor over an image, you can use BoingPic to have the image explode based upon where the cursor lands or is moving. It's a really cool, really interesting, and overall super fun jQuery plugin that you can use to play around with images.



This plugin turns a regular 3D cube into an ever-changing, mutating, rotating monster. Well, it's not like any monsters we've ever seen before, but it has about half a dozen legs and it looks like it could probably eat a person, so if that's not scary, then what is? A really cool plugin to add to any project seeking to be different or creative.  



7 jQuery Plugins for Mobile Friendly Projects

If you're not designing and coding every single project that you do with mobile in mind, then you're probably doing something wrong. Even if you're not coding mobile first designs, they should at the very least be mobile friendly because, you know, it's 2017 and we're living in an ever-expanding mobile world.

Every project you create should look great on a tiny screen, be touch enabled, and, of course, function across all viewport sizes. If you find yourself needing help with any of the above, check out this list of great free and lightweight jQuery plugins that will help you to easily build more engaging and enjoyable mobile experiences for your users.

1. jQuery Masonry


jQuery masonry is a plugin that will create grid layouts out of your page elements using jQuery. The plugin uses jQuery to arrange your items in a vertical grid, placing each item in the next consecutive open space. Define the width of the columns yourself, and the plugin pretty much takes care of the rest. 



For many developers, the hardest or most aggravating part of building a responsive, mobile friendly site is building a navigation that is equally as responsive and mobile friendly. Desktop users are accustomed to their navs being a long, horizontal line that links them to other sections of the site, but that type of design doesn't look great on mobile. The Responsive Nav plugin will easily solve all of your mobile navigation woes, as the plugin provides solutions not only for mobile navs, but for tablet navs as well. 



Sometimes when a webpage is viewed on a mobile device, certain elements have to get smaller to fit within the viewport. When elements get smaller, they don't always hold the same amount of content as they used to. The jQuery dot dot dot plugin is a free, lightweight way to handle this potential problem. The plugin can be used to add an ellipses (...) to any container whose content exceeds the size of the container.



Lazy Load is a plugin that can be used to improve load time of your mobile pages by only loading images that are in the viewport. This can really speed things up,  because the user won't have to wait for the images that aren't even in the viewport to load before the page loads.



Isotope is a cool, fun plugin that you can use to structure a dynamic, mobile-friendly page. This sort of dynamic structure is something that can't be achieved using CSS, and this plugin gives you a lot of options for how you'd like to display your elements in a mobile friendly way.




If you're implementing a slider functionality on a mobile project, it's a good idea to make sure that the slider is mobile-friendly and touch-enabled. The FlexSlider plugin helps you to easily create a slider that meets both of those requirements, complete with polished animations and widespread browser support.



ResponseJS is a lightweight plugin that aids in the creation of responsive sites by allowing you to easily swap blocks of code based on breakpoints, and it serves images progressively to improve page load time. 




6 Lightweight jQuery Plugins for Fixed Elements

Giving fixed positioning to elements is a great way to keep them visible on the page no matter how much or how far a user scrolls. Fixed positioning can be achieved easily using CSS -- it only takes one line of code to change the position of an element from static or relative to fixed. But if you're looking to create dynamic fixed elements, it's a little more complex and requires a bit of jQuery or JavaScript.

Dynamic fixed elements are elements that become fixed after the user has scrolled a certain amount down the page -- usually they become fixed once the user has scrolled past them. You can write code yourself to create dynamic fixed elements, but these type of fixed elements can be created easily using jQuery plugins. Check out the following lightweight jQuery plugins to see just how quickly and easily you can start adding fixed elements to your projects.

1. Sticky Kit


Sticky Kit is a great free and lightweight plugin that allows elements to become fixed or "stuck" to the page, no matter how far a user scrolls. With the plugin, you can easily make one or several different elements sticky, so it gives you a lot of options in terms of functionality.



Here's another plugin that allows you to make one or multiple HTML elements fixed. The plugin is lightweight, free, and easy to use. Additionally, it's supported on recent versions of most popular browsers. Plus, while it makes elements fixed when vertical scroll occurs, the elements are still able to move left to right if there's a horizontal scroll.



Headroom.js is a lightweight JavaScript plugin that makes it super easy for you to change the position of elements based on a user's scroll. The plugin has no dependencies so it's super lightweight and won't significantly slow down your page's performance.



Waypoints allows you to quickly and easily trigger a function when you scroll to a particular element. When the function changes the CSS position property to fixed or changes the CSS class to one with a fixed positioning, you're good togo.



This plugin is so lightweight and easy to use, it's like magic. Use it to add really cool effects to your scroll -- including fixed positioning.

6. Sticky


This simple plugin makes it easy to add fixed positioning to any element on scroll so that any of your elements will remain visible no matter how much far you scroll up or down.