STARIKOVS

Archive for the ‘jquery’ Category

There’s a feature of browsers that allows to drag and drop elements such as links, images, etc. Sometimes this behaviour may be undesirable, for example, when you’re implementing your own special drag and drop. In this short note I’ll provide a small JavaScript code snippets that prevent a default drag and drop behaviour.

The following code snippet will disable a default drag and drop behaviour for all the elements:

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

This code snippet prevents default drag and drop behaviour only for hyperlinks:

  $(document).bind("dragstart", function(event) {
    if (event.target.tagName.toLowerCase() === "a") {
      event.preventDefault();
    }
  });

You can try it here http://jsfiddle.net/v5E6n/1/.

It’s a very frequent task to remove all the children from HTML node. I’ve been confused recently and the reason is a jQuery function empty(). I haven’t used it before! And it’s because I haven’t known about it yet) All I do to remove all the children from the element is callinga method .html("") passing an empty string as an argument. But there’s a more elegant way! Yes, it’s by using .empty() method!

1
2
3
4
5
6
7

  <div id="test">
    <h1>Header</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet.</p>
      <div class="meta">21.01.2013 12:17</div>
    </div>
  </div>

1
2

  // remove all the contents of the #test div
  $("#test").empty();

Hi! I use Aptana to edit JavaScript, HTML, CSS etc. In this article, I will explain how to enable Code Assist for JQuery in Aptana. It’s very comfortable to edit JavaScript using this great editor and it’s became more comfortable with JQuery autocomplete! Just test it and you will understand

1. Download Aptana.
2. Go to Window -> My Studio.
3. Click Install Plugins.
4. Select Ajax tab and click Get it for the JQuery.
5. After the JQuery library support installed go to the Window -> Preferences and select Editors -> JavaScript -> CodeAssist -> JQuery.
6. Enjoy!

Sometimes, I need to make unselectable the content of a html page for some time while some operations are performed, for example, drag and drop. Unfortunally, not all the browsers support the styles to make the content unselectable. For these browsers, you might create a layer (DIV) to disable selecting. This layer should be positioned absolutely and should have the viewport size. The other way to implement the unselectable behaviour is to create special event handlers with help of javascript. For example, in Internet Explorer, you can use javascript to set a handler for an event onselectstart to cancel the action.

element.onselectstart = function() { return false; }

CSS styles:

.unselectable {
    -webkit-user-select: none; /* Safari, Chrome */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    user-select: none; /* CSS3 */
}

Hope in the nearest future, we will use only CSS3 property for this need

Example of use:

#("#testdiv").bind("mousedown", function (event) {
    $(document.body).addClass("unselectable");
    ...                                 
});
#(document.body).bind("mousemove", function (event) {
    /* some code */
});
#("#testdiv").bind("mouseup", function (event) {
    $(document.body).removeClass("unselectable");
    ...                                 
});