JavaScript - Menu Links To Control Multiple Sliding-divs, Desperate For Some Code!!

Hi, I'm relatively new to javascript, I am trying to create a sliding menu, everything is working fine other than the hyperlinks are not working, they open if you right click and select open link, but not with a normal click.

Any help will be very appreciated,

you can acsess the javascript he http://justifi.co.uk/menu.js
the css he http://justifi.co.uk/menu.css
and the html he http://justifi.co.uk/menu.html

Thank you in advance;

James

How do I store an object reference inside a variable when I want the object reference to to reference the first "ul" html element nested inside the current object (as referenced by this keyword)?

var slideList = ???

I am trying to create a sliding menu.

I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates.

The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps.

Here is the entire Javascript code that goes into the head tag:
Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -


var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118

var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1

var menuismoving="no"

function gotourl(thisurl) {
    alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}

function inite() {
	if (document.layers) {
        document.About.left=menuleft
        document.News.left=menuleft
        document.Profiles.left=menuleft 
        document.Issues.left=menuleft
        document.Extras.left=menuleft
        document.Links.left=menuleft
        document.Forum.left=menuleft
        document.About.top=Abouttop
        document.News.top=Newstop
        document.Profiles.top=Profilestop
        document.Issues.top=Issuestop
        document.Extras.top=Extrastop
        document.Links.top=Linkstop
        document.Forum.top=Forumtop
	}	
	if (document.all) {
        document.all.About.style.posLeft=menuleft
        document.all.News.style.posLeft=menuleft
        document.all.Profiles.style.posLeft=menuleft
        document.all.Issues.style.posLeft=menuleft
        document.all.Extras.style.posLeft=menuleft
        document.all.Links.style.posLeft=menuleft
        document.all.Forum.style.posLeft=menuleft
        document.all.About.style.posTop=Abouttop
        document.all.News.style.posTop=Newstop
        document.all.Profiles.style.posTop=Profilestop
        document.all.Issues.style.posTop=Issuestop
        document.all.Extras.style.posTop=Extrastop
        document.all.Links.style.posTop=Linkstop
        document.all.Forum.style.posTop=Forumtop
	}
}

function getmenuname(clickedmenu) {
    if (menuismoving=="no") {
	    if (document.layers) {
            thismenu=eval("document."+clickedmenu)
	    }	
	    if (document.all) {
            thismenu=eval("document.all."+clickedmenu+".style")
	    }
        step=pace
        checkdirection()
	    movemenu()
    }
}

function checkdirection() {
	if (document.layers) {    
        if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}     
	}	
	if (document.all) {
        if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}   
	}
    menuismoving="yes"
}

function movemenu() {
	if (document.layers) {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
	}	   
	if (document.all) {
        if (step>=0) {
            thismenu.posLeft+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}
// - End of JavaScript - -->
</SCRIPT>

Code:

This is the CSS code that also goes into the head tag:

<style type="text/css">
	#About {position:absolute;left:-1000px;}
    #News {position:absolute;left:-1000px;}
    #Profiles {position:absolute;left:-1000px;}
    #Issues {position:absolute;left:-1000px;}
    #Extras {position:absolute;left:-1000px;}
    #Links {position:absolute;left:-1000px;}
    #Forum {position:absolute;left:-1000px;}
	.baseline {
		position:absolute;
		left:250px;
		top:100px;
    	font-family:Arial;
    	font-size:9pt;
		color:000000;
	}
</STYLE>

And I'm not sure if this is needed or not, but just in case, here is everything between the body tags
Code:

<body onLoad="inite()" topmargin="0" leftmargin="0"> 

<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>

<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>

<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>

<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>

<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>

<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>

<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg"> 
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>

And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol.
http://www.newwarriors.net

I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much!

I'm an artist working on a project that involves 9 swfs embedded in a html page and placed in tables. Although each swf has it's own volume control and pause/play buttons on mouseover, I need an outside script
like java, that can be used to stop and start a few swf's simultaneously so that 3 or 4 play while the others are paused. There would be a few different combinations of them playing together that would be opted for by a menu choice. The swf's are in an old version of Macromedia Flash MX 6 using Action Script 2.
I have absolutely no experience writing java scripting. None. I would be glad to pay somebody to write it for me. The page is online. If interested, I can forward the link.
Thanks for your time.

Help will be greatly appreciated!

Situation:
I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END.

condition of the frame, fixed width/height, no scroll, no border.

Very new to javascript but need this code to make a page work for BIZ.

Thank you in advance for anyone kind enough to point the right direction!

Hi Experts,

I have a fixed size area.called a container tag.And based on selection of no of divs the area should divide into those many no of equal divs.And is there any other techinic to divide area by multiple divs or parts.

Thanks in advance
Eswaraiah M

Hello there !!

I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript......

I want to show multiple divs on select of a <option> box.
So lets say there are 3 options

Code:

<select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>

And a javascript function to show the div`s

Code:

function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
 
                var selectedvalue = chooser.options[chooser.selectedIndex].value;
			

	        if(selectedvalue == "a")
                {
                        displayDivs(prefix,"a");
			displayDivs(prefix,"c");
			displayDivs(prefix,"d");
                }
               if(selectedvalue == "b")
                {
                        displayDivs(prefix,"b");
						displayDivs(prefix,"c");
                }
               if(selectedvalue == "c")
                {
                        displayDivs(prefix,"d");
                }
		
 
}
 
function displayDivs(prefix,suffix) {
 
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}

And some divs to show

Code:

<div id="diva" style="display:none;">blabla</div>
<div id="divb" style="display:none;">blabla</div>
<div id="divc" style="display:none;">blabla</div>
<div id="divd" style="display:none;">blabla</div>

All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good..

Then I choose option 'c' I get only one div. Thats good..

But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'..

Does anybody understand why??

Thanx allot !!!

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

I have a PHP script that automatically increases a div id number by one. An example would be:

Code:

<div id="globalEventX">

where X is a number from 1 to 1000.

I created a couple of javascript functions to show/hide these divs and it looks like this:

Code:

function hideGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='none';
    }
  }
  
function showGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='block';
    }
  }

I then created a pair of radio buttons to call the show or hide functions. The code looks like this:

Code:

<input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input>&nbsp;&nbsp;

<input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input>&nbsp;&nbsp;

But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong?

Thanks in advance!

Hi guys ,, I am new here

could you please help me in this:

I have multiple divs something like this

PHP Code:
<div id="div1">
<div id="div2">
<div id="div3">
....
</div>
</div> 



I want JavaScript code to print div1 with all nested divs as well

I tried using the following code but it only print div1 content


PHP Code:
var printContent = document.getElementById('div1');

var windowUrl = 'about:blank';

var uniqueName = new Date();

var windowName = 'Print' + uniqueName.getTime();

var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200');

printWindow.document.write(printContent.innerHTML);

printWindow.document.close();

printWindow.focus();

printWindow.print();

printWindow.close(); 



so please tell me how to do such operation ??

hi,
i am totally new to JS and was wondering if anyone could just suggest me a JS code, "THAT WOULD SELECT MULTIPLE LINKS ON MOUSE CLICK"

<div id="container">
<ul id="seatplan">
<li class="seat_01 A"><a href="#row_01" title="01A">01A</a></li>
<li class="seat_02 A"><a href="#row_02" title="02B">02A</a></li>
<li class="seat_03 A"><a href="#row_03" title="03C">03A</a></li>
</ul></div>

Presently, i can select ONE.
these codes are assigned to images, if selected they change color. But i just want help on MULTIPLE SELECTION.

thanks

Is it possible to submit multiple links all at the same time using Javascript? I check all over the web and can't find any examples anywhere.

I would like to click on a button and submit to google, yahoo, msn, etc all at the same time. Like someone physically click on http://google.com, http://yahoo.com, http://msn.com, so on.

For some reason for the life of me I can't figure this out and posting on the forms is my last results.

I'm trying to create something like this http://powerpetsplus.site88.net/guides/clicker.php

You will see on top I'm trying to get a next button that will go to a new page. The url is something like petid1 and clicking next will go to petid2 and so on. (it's the end URL) example http://www.petadoptworld.com/pages/petpage.asp?PETID1 and I need it to go to http://www.petadoptworld.com/pages/petpage.asp?PETID2 and so on.

I was able to do this with a help of a friend: http://o.aolcdn.com/hss/storage/fss/...test_next.html

but for it to work we have to click the button then the link on top.

What are we doing wrong?

This is the coding I'm using now.

<div id="test">

<p>

<input type="button" onclick="update();" value="Click me for the next pet">
- <a id="test_link" href="http://www.petadoptworld.com/pages/petpage.asp?petid=1">
Click Me

<input id="previous" type="hidden" value="1"><br>

</p>

</div>

<script type="text/javascript">

function update()

{

var t1 = document.getElementById('test_link');

var v1 = document.getElementById('previous');

t1.href= "http://www.petadoptworld.com/pages/petpage.asp?petid=" + (parseInt(v1.value) + 1);

v1.value = (parseInt(v1.value) + 1);

}

</script>

I'm also trying to figure it out since 8000 are needed if the page is refreshed it remembers what one they are on.