Archive for November, 2016

Snippets: Disable Scroll Using jQuery

Most developers probably wouldn’t want to disable scroll on their pages, but of course, there are always exceptions to any rule, and there are a number of reasons that scroll may need to be disabled. It could be for design or functionality reasons, or it could just be the result of a click event or some other trigger. If you’re looking to disable scroll, all you need to use is this small snippet of jQuery code:

$(document).bind("touchmove", function(event){
    event.preventDefault();
})

That’s all it takes! 3 little lines of code and scrolling will be completely disabled on your site. Add it to your next project to see how it works in action, but make sure you remember to remove it if you want scroll functionality to be accessible to your users.

jQuery: Enable Click Event for Some Anchor Elements

jQuery provides a very easy way to disable click events for any DOM element. And you can also disable click event for all Dom elements with few lines of code. But then what if you want to enable click event for some elements? For example, if a click event is disabled for all anchor elements, but there is a situation where you need to enable click event for one or more anchor elements. How do you implement it?  In this post you’ll see how to address this requirement.

HTML

For this demo, there are 2 anchor tags. One with a class “allowClick,” for which click should be allowed. For all other anchor tags, click should be disabled.

   <a href="#">Click Me!!!!</a>
   <a href="#">No Click</a>

jQuery

First, here is jQuery code to disable click event for all anchor tags. The following jQuery code will disable the click event for all anchor tags present in the page.

$('a').click(function(e) {
    console.log('Click Disabled!!!.');
   e.preventDefault();
 });

Now, how do we allow the click event for some anchor elements? To allow the click event, you need to attach click events again to that element. Following jQuery code will attach click event to all elements with css class named “allowClick”.

$('.allowClick').click(function(e) {
    console.log('allowClick Worked!!!.');
 });

So the complete jQuery code is:

$('a').click(function(e) {
    console.log('Click Disabled!!!.');
    e.preventDefault();
 });
$('.allowClick').click(function(e) {
    console.log('allowClick Worked!!!.');
 });

In this case when element with CssClass “allowClick” will be clicked, then first $(‘a’).click() would be called and then its own attached click event. Here is the screenshot:

Screen Shot 2016-11-14 at 12.00.41 PM

jQuery’s .attr() Method

In jQuery, the attribute or .attr() method is used to set the attributes values of selected elements. It works similarly to the .css() method, except with .attr(), you’re not setting or changing the style rules, but the inline HTML attributes of a particular element. Common HTML attributes that can be altered are width and height, which are often applied to image (img) tags. Check out the example below to see how the .attr() method works.

$(".main-img).click(function(){ $(this).attr("width","350px"); })

The code above will change the width of the .main-img class to 350px when that class is clicked. The syntax for setting or changing the attribute of an HTML element is putting the attribute in quotations as the first parameter of the method, and then your desired value in quotations as the second parameter of the method, like this: .attr(“attribute”,”value”).

If you want to use the .attr() method to set more than one value, the syntax changes a bit. The syntax actually becomes more similar to a CSS style rule, like this: .attr({attribute: value, attribute: value}). Here’s what it looks like in action:

$(".main-img).click(function(){ $(this).attr({width: 350px, height: 450px}); })

jQuery’s .find() Method

In jQuery, the .find() method is used to return descendent elements of the selected element. Basically, you can use it when you want to apply jQuery to all the descendants of a particular element. You can also do this by selecting them by classes and ids, but sometimes if there are many different classes, ids, or elements involved, this way is the simplest.

To use it, place the parent element in the selector, and pass the descendant elements you’d like to apply your jQuery to through the parameters. See how it works below:

$(".main").find("p", "a").css("font-size", "18px");

So the code in the example above will change the font-size of all of the p and a elements that are children of the .main element to 18px.

You can use this method to return as many descendants as you like, just make sure you pass them through the .find() method, place them in quotations, and separate them with a comma.