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.. 🙂 😀

Advertisements

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.. 🙂