Scrolling Menu using Jquery


Hi Guys..

In this post I want to share a method of how you can implement scrollable Menu on HTML page using
Jquery.
The steps to implement scrollable Menu are as follows: Demo is available here

1. Include the Jquery Library:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

2. Now, lets start with the menu which we want to be scrollable:

Let’s assign id as “scrollable-menu” to the menu:(The menu will be as under)

<div id="scrollable-menu">
<ul>
<li>Home</li>
<li>Pictures</li>
<li>Contact Me</li>
</ul>
</div>

3. Next is we start write the script code using jquery to implement the scroll:
Jquery has a function to handle the event scroll.

// This is the scroll event handler
$(window).scroll(function() {
//Write the action on scroll event here.
});

4. Lets get down on the action of moving the menu as we perform the action of scrolling:

$(window).scroll(function(){
$("#scrollable-menu")
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});

Explanation:
$(window).scroll –> this is the function for scroll event for Window.
This event occurs whenever you scroll the window on browser and this
function will get executed.

$(“#scrollable-menu”) –> this is the selector which gets you the instance of DOM object
with id scrollable-menu and as we want to scroll the menu we are using its id

.animate is the function provided by jquery to perform custom animations on
object using CSS properties.

$(window).scrollTop() –> this is the function which provides us the numerical figure
of the amount of scroll performed on window
Ans using this value we are setting the margin-top value of Menu so, that it is
seen in the visible area of the page.
“slow” is the parameter of animate function to enable the animation on screen,
you can also use any numerical value in place of slow(it is in milli seconds)
More about animate function – here
More about scrollTop Function – here

5. Because this event can fire many times in a row we need to make sure we stop all previous repositions before progressing with the latest one. Imagine a users scrolls 3-4 times really fast. We want just the last call to be in control of the repositioning. Ensuring that all repositioning is stopped beforehand makes for much faster handling of the event, resulting in smoother animation. We call this BEFORE the code snippet above.

$(window).scroll(function(){
$("#scrollable-menu")
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});

6. One more way we can make the code smoother is storing the instance for the object that needs to be accessed
for every scroll event. Whenever the scroll event fires jQuery traverses the DOM looking for our element. In order to alleviate this overhead we can simply store the jQuery reference to our element in a variable when the DOM is initialised and reference this instead.

var $scrollableMenu = $("#scrollable-menu");

$(window).scroll(function(){
$scrollableMenu
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});

7. The final Code will be as follows:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$().ready(function() {
var $scrollableMenu = $("#scrollable-menu");

$(window).scroll(function(){
$scrollableMenu
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
</script>

Thats all.. Jquery makes all simple.. 🙂 😀

IE vs FF Working with dynamic Tables


Today I am gonna write another thing I came across while working on Javascript.
Sometimes, even if it’s easier to work with list <li> elements in HTML, but the design department may make a
design using tables.
Well what I wanted to do was read some information and dynamically create table and assign correct info to its
rows, columns.
Lets write the basic HTML code for table element:

<table>
<tr>
<td>Row1 Column1</td>
<td>Row1 Column2</td>
</tr>
<tr>
<td>Row2 Column1</td>
<td>Row2 Column2</td>
</tr>
</table>

So, looking at the table and other tags used with table, I made those elements using the Javascript Code.
The Code used to create table is as follows:

var myTable = document.createElement("table");
var myRow = document.createElement("tr");
var myCell = document.createElement("td");
myCell.innerHTML = "Hello World!";
myTable.appendChild(myRow);
myRow .appendChild(myCell);

Now, for this Javascript, Firefox was fine, but it did not worked on IE. So, I searched on Internet and then using
Firebug I noticed one thing that we also have another element inside table as <tbody> and this was the actual problem.
On FF it makes this element and adds it to the table tag. But, IE does not.
So, the new code that worked for both IE and FF is as under:

var myTable = document.createElement("table");
var myTbody = document.createElement("tbody");
var myRow = document.createElement("tr");
var myCell = document.createElement("td");
myCell.innerHTML = "Hello World!";
myTable.appendChild(myTbody);
myTbody.appendChild(myRow);
myRow.appendChild(myCell);

And, as you can see in the code above, I am manually creating the tbody element and appending it to the table.
And, the row element is appended to this tbody element.
Finally, the problem with creating tables dynamically was solved. 🙂
May this help you when u face similar problem.
Cheers.. 🙂

JSONP… and why JSONP


How to start.. ?

I am working on Ajax and I need to get some data, that is using XML.

If I am working on domain, lets say  mysite.com and I need to get some data using xml

from the same domain,  where the xml url is mysite.com/myxml.xml , So here you can direct

get the xml from this specific domain using HttpRequest.

But, what if you want data from some other domain, may be  othersite.com/.

So, here XML will not be of an use, as XML httpRequest works only for the same domain

i.e. the requester and the responder are the same domains.

So, you may say lets use JSON. But, here JSON is also of no use.

As, JSON is just a formatting of data for (similar to XML)XML.

But it is also of no use for Cross Domain data Access.

What is JSON:  JSON is Java Script Object Notaion. It is a lightweight data-interchange format.

The JSON filename extension is .json.

JSON is an alternative to XML and it is more easy to access than XML.

So if XML is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<contacts>
    <contact id="1">
        <name>Anu Zamwar</name>
        <phone>123-456-7890</phone>
        <address>
            <street>123 JFKStreet</street>
            <city>Any Town</city>
            <state>Any State</state>
            <zipCode>12345</zipCode>
        </address>
    </contact>
</contacts>

So, JSON for this XML will be as:

{
   "contacts" : {
      "contact" : {
         "@attributes" : {
            "id" : "1"
         },
         "name" : "Anu Zamwar",
         "phone" : "123-456-7890",
         "address" : {
            "street" : "123 JFK Street",
            "city" : "Any Town",
            "state" : "Any State",
            "zipCode" : "12345"
         }
      }
   }
}

So, now let me get back to the point, how to overcome the problem of Cross Domain Data Access.

JSONP is a means by which to get JSON data from another

domain than the one your page is on.

If you try and use Ajax to request data from a different

domain than the page, you’ll get a security error.

One way around this is a concept some call “JSONP”.

This is where you include a script tag in your document. This script

tag points to an external javascript source and when the

script tag loads it executes (like any other script tag).

The catch is that you need to be able to tell that server what

to wrap the data with so your functions can handle it.

Let’s say we are on this page at clientcide.com.

Let’s say we want to get some data from the flicker api at flicker.com/services/api.

Here’s a simple request that gets the latest photos:

http://www.flickr.com/services/feeds/photos_public.gne?format=json

To Overcome this problem of Cross Domain Data Access, JSONP comes into picture. What is JSONP?

I asked this to Google and he gave me few answers as always. You can also get some from googly..

So, whats the difference between JSON and JSONP. Both are same, except the difference that in JSONP,

you also include a call back function name. So, when u need to get the data of this JSONP using AJAX,

you need to tell AJAx the name of the call back Function defined in JSONP file.

How will the above JSON look when written as JSONP:

func({
   "contacts" : {
      "contact" : {
           "@attributes" : {
                 "id" : "1"
            },
         "name" : "Anu Zamwar",
         "phone" : "123-456-7890",
         "address" : {
            "street" : "123 JFK Street",
            "city" : "Any Town",
            "state" : "Any State",
            "zipCode" : "12345"
         }
      }
   }
});

⇒ func is the Callback function, used in the above JSONP file.
Now let this above JSONP file name be myjsonp.json

and it is under domain → http://www.othersdomain.com/myjsonp.json

And you domain is http://www.mydomain.com/

I am using Jquery.ajax to show the working with JSONP. Code is as follows:

$.ajax({
url: "http://www.othersdomain.com/myjsonp.json", //URL of JSONP File
dataType: "jsonp",  // Data type is JSONP
processData: false, // No need to process Data, we use it as JSONP
jsonpCallback: "func",  // Callback function
success: function(data,textStatus,obj) {
var name = data.contacts.contact.name;
alert("Name is: " + name);

} });

So, here it is the use of JSONP to over come the problem of Cross Domain Requests..

🙂

IE vs Firefox


Lately I was working on Javascript and I came across a problem that was just because of some difference in browsers.
What I was trying to do was, using Javascript I was creating HTML elements dynamically as per requirement and setting different attributes of these elements. While doing so I used setattribute function to set the attribute of the elements. It worked very fine on FF but It started giving problem on IE(sucking IE).

So I kept searching for many solutions to make it working on IE as well as FF.  As searching and getting a solution was a tough job, may be I was not very good at googling for it.. 😦

Let me first write the code that was working on FF but not IE:

ele = document.createElement('input'); //works on IE as well as FF
ele.setAttribute("type", "checkbox"); // works on IE as well as FF
ele.setAttribute("onclick", "myFunc(parameters);"); //Works only on FF
li.appendChild(ele); //li is my list element, appended the checkbox to it

The Code that worked for both is as under:(Solution)

ele = document.createElement('input'); //works on IE as well as FF
ele.setAttribute("type", "checkbox"); // works on IE as well as FF
ele.onclick = function{ myFunc(parameters);}; //Works for both FF & IE
li.appendChild(ele); //li is my list element, appended the checkbox to it

Cheers.. Hope I helped you.. 🙂

Scaffolding in Ruby on Rails


Ruby on Rails is the new Web development programming Language. It seems very good. Even I am new to it and I am learning it from Wrox and Agile Ebook. ROR is the programming language which consists of parts as Model, Controllers, Views, Actions.
Recently I was trying a Example given in the book. It consists of a scaffold method which is to be used in a controller which has syntax as:
class AdminController < ApplicationController
scaffold :product
end

here ‘admin’ is the controller used and product is the model which is to be created and database is ‘products’

This is dynamic scaffold method. But googling on internet and ruby forums I got to know that in Rails2.0 static scaffold method is no more used. Only dynamic method is used.

So just go into the rails application folder and type the following command for the above scaffold, So here it becomes static scaffold:

ruby script/generate scaffold product title:string description:text image_url:string

So here model is ‘product’ and table named ‘products’ is created with the parameters and columns as written after product in above command.
I will put a detailed post with all commands and step wise explaination.
But Important is if you get the Agile Web development with ROR 3rd edition(Beta will also do) it has correct steps to be followed, but in Wrox and Agile 2nd edition the steps are explained using dynamic scaffold method.