Opening PDFs in a New Window with JavaScript

Opening documents such as PDFs in a new window should be automated using JavaScript for the following reasons:

• Users will often close the web browser when a PDF is opened, mistakenly believing the document has been opened in Adobe Reader
• The attribute historically used to open a new window, target, has been removed from the HTML 4.01 Strict specification (it's now deprecated)
• Opening a new window is a behaviour and should be moved to the behavioural layer¹.

Using
JavaScript can also be particularly useful when a website is content
managed. Rather than having to rely on site editors to remember to open
a link to a PDF in a new window the process is handled by a simple JavaScript function.

Resources for the new window tutorial


Download the required resources before beginning this tutorial.


Start by opening the file 'pdf-new-window.htm'.
This is the content we're going to apply our JavaScript new window function to.

Read More......

Striped Tables Using JavaScript

JavaScript can be incredibly useful when you need to automate
repetitive tasks. In this article we'll implement a simple JavaScript
function that will apply alternate striped rows to a table.

We'll implement this technique using unobtrusive JavaScript.

Resources for the striped tables tutorial

Download the required resources before beginning this tutorial.

Start by opening the file 'striped-tables-example.htm'. This is the table we're going to add stripes to using JavaScript:

Rather
than applying a class to every other row to assign the alternate
background rows, we can let JavaScript do the work for us.

Read More......

Designing Context menu in Javascript

Context menu pops up when you right click over any object. Every web browsers display default context menu when you right click on any object inside it. And context menus are different based on the type of object. For example you will not get same menu when you click on a text area and other contents. In this blog post we will show you how you can override the default context menu and design your own using jQuery and a tiny plugin called “contextmenu” plugin. This plugin is very small in size, weighs only 2.5KB when compressed. Lets have a look at the following code to understand how to use it.

Design your context menu

  <div class="contextMenu" id="menu">
    <ul>
      <li id="item_1">Item 1</li>
      <li id="item_2">Item 2</li>
      <li id="item_3">Item 3</li>
    </ul>
  </div>

Download the plugin script and load it

You can download the plugin from here and load the script like shown below. You must load jQuery to make it work.

<script type=’text/javascript’ src=’jquery.js’></script>

<script type=’text/javascript’ src=’contextmenu.js’></script>

Plug the menu with a textarea

Now we will plug in that context menu with a text area object, overriding the default one.

<textarea id='sampleTA' ></textarea>
<script>
    $('#sampleTA').contextMenu('menu', {
     menuStyle: {
      width: '150px'
     },
     bindings: {
     'item_1': function(t) {
      alert('You choose item 1');
     },
     'item_2': function(t) {
      alert('you choose item 2');
     },
     'item_3': function(t) {
      alert('you choose item3');
     }
     }
    });
</script>

Now if you run the example above you will see something like this

Thats it!

Read More......