JavaScript - Help With Navigation Menu

I have a navigation menu.
When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place.

I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation.

Example Shown he http://www.courage.ca

Code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
        (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Okay, I'll try to give as much detail on what I'm trying to do here and please correct me if this is not possible to do using javascript. Let's say you have 3 files:
document.html = the page where all this is displayed
menu.js = the script that will read the menufile.txt and parse it into a navigation menu
menufile.txt = content of the menu that will be parsed

The idea here is that when the website grows, I want a simple way of updating the menu for all the pages without going and doing it page by page.

The content of menufile.txt will look like this:
+Menu Item1 "Link1"
-SubMenu Item1 "Link2"
-SubMenu Item2 "Link3"
+Menu Item2 "Link4"

Each link corresponds to the item before it as you can see, and I'm using + to signify a main menu item while - signifies a submenu item. The logic I can see for doing this is reading the whole file into an array, then going through the array searching for + or - and breaking the line into pieces.

Take the first line for example:
+Menu Item1 "Link1"
This is broken into 3 variables:
+ -> is the what tells me if it's a main menu item or a sub menu item
Menu Item1 -> is the name i want put into a variable
"Link1" -> This is the link variable for the page associated with the item, this could be left blank if there is no link available to the corresponding item.

So to sum it up, I'm reading the file link by line, breaking it into 3 variables. But I am not that experienced with javascript and don't know how I can go about doing that or if it's even possible.

Thank you in advance for taking the time to read this. If you need more clarification on anything I mentioned please let me know, I'll be glad to elaborate.

Hello everyone,

For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript:

Code:

$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.pMenu li").hoverIntent(config);
    
    $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");

});

My css that corresponds to this is:

Code:

.pMenu{
	margin:0;
	padding:0;
}

#health{
	width:10%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	border-right:none;
	width:100%;
	display:inline-block;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

Hi,

I created a simple menu:

Code:

<html>

<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>

<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>

<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>

<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>

<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>

</tr>
</tbody>
</table>
</body>

</html>

Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on.


Regards
Rain Lover

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours.

this is the html:

Code:

<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
  <ul>
    <li><a href="2-1.php">Cani</a>
        <ul>
          <li><a href="2-1-1.php">Domestic dogs</a></li>
          <li><a href="2-1-2.php">Wolves</a></li>
        </ul>
    </li>
    <li><a href="2-2.php">Felidae</a>
        <ul>
          <li><a href="2-2-1.php">Domestic cats</a></li>
          <li><a href="2-2-2.php">Wild cats</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>

the css is as follows:

Code:

div#s1 {
width: 200px;          /* menu width */
}

div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0;             /* no padding */
margin:0;              /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}

div#s1 ul li a {
display: block;         /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
margin-left: 20px;     /* indent level 1 */
}

div#s1 ul ul ul li a {
margin-left: 40px;     /* indent level 2 */
}

div#s1 ul ul ul ul li a {
margin-left: 60px;     /* indent level 3 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
display: none;         /* collapse */
}

div#s1 li.open ul {
display: block;        /* expand */
}

div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red;            /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white;          /* fix lower levels */
}

div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}

and finally the javascript:

Code:

var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";

//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;

//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
 var url = location.href;
 if (url.lastIndexOf("/") == (url.length-1)) {
   url = url+menu_default_page;
 }
 if (url.lastIndexOf("?") >= 0) {
   url = url.substring(0, url.lastIndexOf("?"));
 }
 if (url.lastIndexOf("#") >= 0) {
   url = url.substring(0, url.lastIndexOf("#"));
 }
 menu_url = url;

 var main = document.getElementById(menu_id);
 if (!main) alert("No element with id '"+ menu_id +"' found");
 menu_traverse(main);
 }

 /* Walks down the subtree and on the way back
 sets properties.
 returns bit set
         1: set = element is a node, unset = element is a leaf
         2: set = element contains the active node
         4: set = element is the active A node
*/
function menu_traverse(element) {
var props  = 0;

// walk down
for (var i=0; i<element.childNodes.length; i++) {
  var child = element.childNodes[i];
  props |= menu_traverse(child); // aggregate bits
}

// on the way back now
switch (element.tagName) {
  case "UL":
    props |= 1;
    break;

  case "LI":
    var c1 = (props & 1) ? 
               ((props & (2|4)) ? menu_open_class : menu_closed_class)
             : menu_leaf_class; 
    element.className = element.className ? element.className+" "+c1 : c1;
    if (props & 4) {
      if (!(props & 2)) element.className += " "+menu_active_class;
      props |= 2;
      props &= 1 | 2; // reset bit 4
    }
    break;

  case "A":
    if (props & 2) break; // once is enough
    var href = element.getAttribute("href");
    if (menu_isSameUrl(menu_url, href)) props |= 4;
    break;
  }

  return props;
}

//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
  if (b[j] == "..") { j-=2; continue; }
  if (a[i] == "..") { i-=2; continue; }
  if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  if (! (a[i] == b[j])) return false;
  i--;
  j--;
 }
 return true;
}

New to this forum but hope this will explain my problem, any help is much appreciated!

thanks!!

Jesper

Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

Dear Forum guys, i need a serious help of something

i am making a website for a client, and as you can see the picture by clicking on this link

http://user3.jabry.com/davidasp/pic.html


i've made a navigation bar with javascript and underneath it is a flash swf file however when my mouse is over the navigation bar the drop down sub menu is appearing behind the flash as you can see in the picture.

Please... what is wrong ???? why isn't it appearing infornt of the flash file.

the code of the page is
....
<body>
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="../menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->

<div id="container">
<div id="header"></div>
<div id="navig"><span id="awmAnchor-menu">&nbsp;</span></div>
<div id="nav-submenu" ></div>

<div id="mainContent">
<div id="homeflash">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="786" height="200">
<param name="movie" value="../uploads/flash/en-main.swf" />
<param name="quality" value="high" />
<embed src="../uploads/flash/en-main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="786" height="200"></embed>
</object>
</div>
....


and also as you can see in the picture the background is also breaking apart.
Please help me guys, i can't figure out why is this happening???

Thank you

Hi all,

I wasn't sure of the proper search terms to use to find an answer in the JS forums. I'm trying to create a floating navigation bar which only becomes visible at a certain scroll point on a page - specifically, when the static navigation row is scrolled out of view.

I have a floating navigation bar already. And I suspect I'd need to give the static menu an ID to reference in the JS. I'm just not certain on how to proceed.

Any help would be greatly appreciated. Thanks.

This navigation is going to be the death of me, and I think I'm sliding back to noob status....

I've done a navigation, that works just wonderfully. There are three dropdowns in the top row, and one down below. The three on the top populate the one below it.

The nav js script goes as follows:

Code:

var cacheobj=document.dynamiccombo.stage2

function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}



populate(combo1)

The upper three dropdowns are set up like so:

Code:

<select name="usstage1" size="1" onchange="showDiv(this.value);window.open(this.options[this.selectedIndex].value,'_top');" >
        <option selected="selected" value="javascript:populate(combo1)">United States</option>
        <option value="javascript:populate(combo2)">Alabama</option>
        <option value="javascript:populate(combo3)">Alaska</option>
        <option value="javascript:populate(combo4)">Arizona</option>
        <option value="javascript:populate(combo5)">Arkansas</option>
        <option value="javascript:populate(combo6)">California</option>
etc...

Which populates the bottom dropdown with the locales of that area.

Once an option is selected in the bottom dropdown, it goes to the respective page depending on selection.

So if you select California from the upper list, the dropdown below populates the list of cities. If you select Los Angeles, it navigates to the LA page. So...none of this is the problem...the problem is, I need it to keep the last selected state of all 4 dropdown boxes as it changes pages...

I went with a couple different cookie options and failed miserably. One of them messed it all up by populating the top three boxes with the position of the last selected state of the "city" dropdown. So if I chose LA, it selected from the top 3 boxes the 5th position in their menu and then populated it with that area...anywho....

Help, a solution, or a positive kick in the bum in the right direction would be truly appreciated.

Hi, I'm using the following javascript to allow users to navigate through my various picture galleries on my blog http://exp212.blogspot.com/

Quote:
<script type="text/javascript">
function show(what)
{var find = "Img" + what.id.substring(4); for ( var i = 1; i < 99999; ++i )
{var cur = "Img" + i; var img = document.getElementById(cur); if ( img == null ) return; img.style.display = ( find == cur ) ? "block" : "none"; }}
</script>

<div id="pix">

<img id="Img1" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7oLQJNII/AAAAAAAABpI/fJMx9Gp0AWU/s320/night1.jpg" style="display: block;" />
<img id="Img2" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7o5484JI/AAAAAAAABpM/1ZMn1wRbAB8/s320/night2.jpg" />
<img id="Img3" src="http://3.bp.blogspot.com/_P6fRcsNpSXY/S8Y7pSrB94I/AAAAAAAABpQ/KKIQQH0uJz4/s320/night3.jpg" />
<img id="Img4" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7p7eUA6I/AAAAAAAABpU/MMy7MrIvZcg/s320/night4.jpg" />
<img id="Img5" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7qtRJVnI/AAAAAAAABpY/zFMRSGb8Qhk/s320/night5.jpg" /></div>

<div id="names">

<div id="Name1" onmouseover="show(this);">001</div>
<div id="Name2" onmouseover="show(this);">002</div>
<div id="Name3" onmouseover="show(this);">003</div>
<div id="Name4" onmouseover="show(this);">004</div>
<div id="Name5" onmouseover="show(this);">005</div>
</div>


As you can see (if you visit the blog) each picture is brought up by hovering over the next number in the sequence, but in order to save space I'd like to change this so it uses a simple 'Next' and 'Previous' function. How would I adapt the above javascript in order to achieve this?

Thank you in advance.

Hi guys,

This is the first site I have tried to make with Javascript because I thought it was about time I learned it properly. Apologies if my code is extremely ugly. Suggestions are more than welcome.

I have a single large page that the Javascript controls so the viewing screen 'focuses' on the div referenced by the link. It is a 3x3 array of divs with each div being its own 'page' as far as the user is concerned.
It would be nice if it worked something like this site only with the links inside each 'pages' div instead of around the outside in a separate frame. I looked at their code and realised it would work well for what I wanted with some modifications (it is a free code tutorial thing so no rage). Turned out it basically needed to be re-written.

The navigation I am using works fine so long as the links on the central 'home' div are used but as soon as I copy + paste the working code into one of the other divs they cease to work as links, they still appear but they don't do anything while the ones on the 'home page' still work fine.
I have no idea why but I feel like it might have something to do with object oriented coding. I read the two posts on the subject in the FAQ's and can understand the difference between the two styles but don't really know where to go from here.

The relevant html code goes like so:
Code:

             
<div id="one" class="elements">
   <div class="block25">
     <span class="go1"><img src="images/go1.png" alt="One"><h4>ONE</h4></span>
   </div>

While the javascript is as thus:
Code:

$('.go1').click(function(){
 $('#one').click();
 });

 $('#one').click(function(){;
 	currentId = $('selected').attr('id');
	goId = section[0][0];
	$target = $('div[id=' + goId +']');
	$paneTarget.stop().scrollTo($target, 800, { margin: true } );
	$('div[id=' + currentId +'], div[id=' + goId +']').toggleClass('selected');
});

I tried making separate function names for each div's links and calling them something like go11, go12, etc but that didn't seem to fix anything. I just realised that I only duplicated and renamed the first part of the code eg. Code:

$('.go12').click(function(){
 $('#one2').click();
 });

and not the rest. I suppose if I did all of it, the navigation would probably work but I would have 9x more code than I have right now.
Edit : Turns out it still doesn't work. I am incredibly stumped by this.
Why would it not work even if the function names are different? The only thing that is remaining the same is the div id that is being referenced and animated to.

How difficult would it be for me to convert what I have into object oriented code? Would this even be what I need to do?

If anyone can help me out then I would be really grateful. Thanks!
I know I should take the time to go through tutorials and learn it properly but this site is supposed to be part of a project for uni that is due soon so I don't really have the time. Later I will do some more learning and figure it all out.


I'm also wondering how I would go about applying easing to the animation between div's. Should I use some sort of jQuery library or some custom code like this article suggests?