HTML - Problems With Javascript And Dynamic Menus
Hello,
I'm having trouble with javascript on my website. Hopefully somebody here can help me out. The website is http://www.mm-theory.com The problem arises when you click on the little asterix in the left-hand margin, the one that says "click me" underneath. It tells you you need to have javascript enabled even though you may already have it enabled. I get this problem only when I have the omni slide menus at the top and the right side (the ones that say "quick links" and "papers" and open up when you move the mouse cursor over them). I got the code from http://www.dynamicdrive.com/dynamici...lide/index.htm and followed their instructions to the letter. I don't get this problem when I remove the menus. The code for the asterix link is as follows: Code: <a class="margin_icon" onclick="openWin('deeper_problem.htm','',600,1);return false;" href="enablejs.htm" target=_blank> <img class="margin_icon" src="icons/side.gif" alt="side.gif" border=0> <br> <span class="margin_icon"> Click Me! </span> </a> The code for the openwin function is as follows: Code: function openWin(url,name,wid,hgt) { sw=(screen.width-wid)/2; sh=(screen.height-hgt)/2; newwin=window.open(url,name,'width='+wid+',height='+hgt+',top='+sh+'+sh+',left='+sw+',scrollbars=0,menubars=0,toolbars=0,directories=0,location=0,address=0'); mewwin.focus(); } This function is made available on the home page I linked you to (http://www.mm-theory.com) by the following code in the head section: Code: <script language="javascript" type="text/javascript" src="openwin.txt"></script> Can anyone tell me why it says I need to enable javascript when javascript is already enabled? Similar TutorialsHi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> I have a problem with my website basically I have a drop down menu and when you click on a specific name it should bring the name/catcode in the next box I have done a primitive example below also I have copied the html code from the page below some of them work and some dont which is really confusing me I havent got a clue what I have to do to get them all to work. I would really appreciate any help or pointers. Example: Drop down menu catcode Action Force A LEGO L Below is part of the pages html which I think is causing the issue. <td style="background-color: #7f7f7f" valign="middle"> <table id="archiveSearch"> <tr> <td style="padding-right:10px"><img id="archiveSearchImage" name="archiveSearchImage" src="images/archiveSearch.gif" alt="Search Archive" width="144" height="37" border="0" /></td> <td style="padding-right:10px"> <select id="categoryDropDown" name="categoryDropDown" size="1" onchange="selectCategory(this)"> <!--<option value="Example" >Example</option>--> <!--<option value="Examples" >Examples</option>--> <option value="A-Team" >The A-Team</option> <option value="Action Force">Action Force</option> <option value="Bionic Six" >Bionic Six</option> <option value="Buck Rogers">Buck Rogers</option> <option value="COF" >Cinema of fear</option> <option value="COTT">Clash Of The Titans</option> <option value="DC Comics">DC Comics</option> <option value="GIJ" > G.I.JOE</option> <option value="LEGO"> LEGO</option> <option value="LOTR"> Lord of the rings</option> <option value="MASK"> M.A.S.K</option> <option value="MISC"> Miscellaneous</option> <option value="MOTU"> Masters Of The Universe</option> <option value="Rock Lords" >Rock Lords</option> <option value="Rocky" >Rocky</option> <option value="SMDM" > Six Million Dollar Man</option> <option value="Star Wars" >Star Wars</option> <option value="Super Heroes" >Super Heroes</option> <option value="Super Powers" >Super Powers</option> <option value="ThunderCats" >ThunderCats</option> <option value="TMNT" >TMNT</option> <option value="Transformers" >Transformers</option> <option value="Visionaries" >Visionaries</option> </select> </td> <td style="padding-right:10px"> <!--<input id="mostRecentButton" type="button" value="Most Recent" />--> <input id="catCode" type="text" style="width:45px" readonly="readonly" /> Would anyone mind sharing a hint as to how i might go about making this dymanic? i thought i could just use "elementid" but i didn't have much luck... or just a different script all together, just something simple and light to slide a div from point "a" to point "b" with thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> x=50 y=0 distanceX = 0 distanceY = 0 function slideDown() { if (document.getElementById) {document.getElementById("mydiv").style.top = x + "px";} if (distanceX > 50) {clearTimeout('slideDown()'),x=parseInt(x),distanceX=parseInt(distanceX);} else {x=parseInt(x) + 1,distanceX=parseInt(distanceX) + 1,timer1=setTimeout('slideDown()', 15);} } </script> </head> <body> <div id="mydiv" style="position:absolute; width:50px; height:50px; top:50px; background-color:#F00;"></div> <a href="#" onclick="slideDown('mydiv');">Down</a> </body> </html> ok guys i have a small code on button click i open a popup in that popup i have one radio button to be selected back to my main program how do i check which button has been selected ? should i show code? thank you Ok, so, I have a copy of Macromedia Fireworks. I used it to create a rollover navigation bar for my site (see link at the end of this post). Fireworks exports the file as HTML, and not XHTML, so the JavaScript in the code doesn't validate. The W3C Validator has found 4 problems (there was around 70,but i fixed those all up, because they were just img tag issues): If anyone knows JavaScript and can fix these (or at least help me fix them), please post! Link to the page in question: http://ericsartor.freehostia.com/new-template/ Just view the source to see what I'm talking about. Hi. My entire site is 100% XHTML1.1. Except for some new code I added which causes errors in validation. the code is HTML Code: <a href="http://babelfish.altavista.com/babelfish/" onclick="window.open('http://babelfish.altavista.com/babelfish/trurl_pagecontent?lp=en_it&url='+encodeURIComponent(location.href));return false;" title="Translate to Italian"><img title="Italian" src="http://geekimo.com/licons/it.png" alt="Italian" /></a> I understand maybe CDATA islands can help with this? or making it external? but I have no idea how to do that with it having html code in there too.. I don't know if you can surround it in CDATA tags. There are other lines of code too, exactly the same except have different languages. Any help would be awesome! Hi Folks, I've got my form dynamically generating text fields (which are contained in a form which is in another) and other objects and now I want to give them the "onchange" attribute. I have a lot of code so I'll keep it as small as possible. Here is the function that generates text fields function createText( inputForm, txtName, txtValue, txtWidth ) { var newTxt = document.createElement( "INPUT" ); inputForm.appendChild( newTxt ); newTxt.name = txtName; newTxt.setAttribute( "STYLE", "position:relative; left:20px; width:" + txtWidth + "px;"); newTxt.type = "TEXT"; newTxt.value = txtValue; newTxt.id = txtName; newTxt.onchange = "some_function( this.value )"; return newTxt; } The function for responsible for creating the form is: function createNewForm() { // Main form is a global reference to the main body mainForm = document.getElementById( "adminForm" ); var profileForm = document.createElement( "FORM" ); mainForm.appendChild( profileForm ); profileForm.method = "POST"; profileForm.name = "Profile"; profileForm.id = "ProfileForm"; return profileForm; } This function calls the profile creation form and specifies the objects that will appear on the form. function profileForm() { // Delete and reassign current form if( currentForm != "") deleteForm( currentForm ); currentForm = "ProfileForm"; var newProForm = createNewMenuForm(); newProForm ( menuForm, "Item1", "data1", 140 ); newProForm ( menuForm, "Item2", "data2", 140 ); newProForm ( menuForm, "Item3", "data3i", 140); return newProForm; } I've seen examples of objects being created by JavaScript and they work just fine. Anyone have any suggestions or have an idea where I can find some more info? Thanks! I am trying to add a popup menu to a button on my header that will have two options. I added a hotspot to the button image in Fireworks and made the menu etc, but when I place it in my html page nothing happens. Below is the line of code that displays my button. <a onmouseover="image2.src ='images/Header/OurServices_On.png';" onmouseout="image2.src='images/Header/OurServices_Off.png';" href="OurServicesIndivid.htm" target="_top"><img src="images/Header/OurServices_Off.png" name="image2" width="129" height="22" border="0"></a></TD> PS The button image is 'OurServices_On' or "OurServices_Off", basically the "On" button is shaded darker and it will apear when you hover over it. On a secondary note, I tried to add a popup menu with the dreamworks hotspot tool. I can add the hotspot fine, but everytime I hit "Ok" on the add-popupmenu dialog box, I get a error that states the following. Anyone know the answer to either of these problems? this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon I have a form with 3 drop down menus on the same line. The way I would like it to work is as follows: if I choose for example element 3 on the first menu then the 2nd menu shows only the options of the element in menu 1. How can I do this? Thnks Hi, Is there any way to make the "standard" pull down menu that is predefined in html (the pull down form that front page provides) function with links to different pages WITHOUT USING JAVASCRIPT. I am using sharepoint that has security that blocks links that use scripting. Or, is there any way to use this pull down menu with javascript in sharepoint without a popup blocker interviening? Any help or suggestions much appreciated. thanks, joe sal I'm trying to incorporate drop down menus into a template to clean things up a bit but I can't figure out how. Here's the code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bayside Baptist Church</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> <!-- .style1 {font-weight: bold} .style2 { color: #94A652; font-size: 19px; } .style5 {font-size: 18px; color: #94A652; } .style6 { font-size: 11px } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1>Bayside Baptist Church</h1> </div> <div id="nav"> <div id="menu"> <li><a href="index.html">Home</a></li> <li><a href="index.html">Ministries</a></li> <li><a href="index.html">Calendar</a></li> <li><a href="index.html">Connect</a></li> <li><a href="index.html">FAQ</a></li> <li><a href="index.html">Pictures</a></li> <li><a href="index.html">Contact</a></li> </div> </div> </div> <div id="headline"> <div id="photo"><div> <img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1"> </div></div> <div id="search-news"> <h2 class="downcast">Sermons</h2> <div id="news-box"> <p class="style1"> 01.11.09</p> <p><strong>01.04.09</strong></p> <p><strong>12.28.08</strong></p> </div> <h2 class="downcast">News & Events</h2> <div id="news-box"> <h3><a href="#">12.21.08</a></h3> <p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p> <p class="more"><a href="#">more</a></p> <h3><a href="#">12.24.08</a></h3> <p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p> <p class="more"><a href="#">more</a></p> </div> </div> <div class="clear"></div> </div> <div id="body"> <div id="body-left"> <h2 class="style2">Welcome to Bayside</h2> <p class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</p> <p class="more"> </p> <h2 class="style5">Services</h2> <img src="images/welcome.gif" alt="" width="150" height="114" class="left" /> <p class="style6">Our <strong>9:15 service</strong> combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience.* We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives.**</p> <ul class="plussbullets"> <li><a href="#">Kids Corner</a></li> <li><a href="#">Teen Studies</a></li> <li><a href="#">Christian Education Hour</a></li> </ul> </div> <div id="body-right"> <h2 class="style5">Sermon Series</h2> <p><img src="images/3129504889_fcc5646ba4.jpg" alt="" width="321" height="56" /><span class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</span></p> <p> </p> <p class="more"> </p> <h2 class="style5">Pictures</h2> <div id="gallery"> <a href="#"><img src="images/gal_1.jpg" width="101" height="96" alt="Gal 1"></a> <a href="#"><img src="images/gal_2.jpg" width="114" height="96" alt="Gal 2"></a> <a href="#"><img src="images/gal_3.jpg" width="112" height="96" alt="Gal 3"></a> </div> </div> <div class="clear"> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer"> <p>Bayside Baptist Church - 3915 N 16th Street - Superior, Wisconsin 54880 - 715.394.6002</p> </div> </body> </html> And here's a live sample: http://www.baysidesuperior.org/Bayside I'm using Dreamweaver cs3, looked at some tutorials but can't figure it out. What would you guys suggest? Hello all, I need some help coding link menus. These are menus that pop up to the side of links to show additional links. See this page for what i am looking to achieve. I want a side menu to show up off of my "Media" link that has link options for Photos, AIM Icons, Riot Act, Submit a Picture, and anything else i need a link option for. Here is my current code for my link menu to the left: Code: <div align="left" style=" "><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com" class="mainlevel style1 style4" id="active_menu">Home</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://registeruo.niu.edu/iebms/reg/reg_p1_form.aspx?oc=40&ct=STD&eventid=8491" target="_blank" class="mainlevel style1 style4" >Join</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com/blog/" target="_blank" class="mainlevel style1 style4" >Blog</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="media.htm" class="mainlevel style1 style4" >Media</a></font></td></tr></table></tr> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.ncaabbs.com/forums/forumdisplay.php?fid=468" target="_blank" class="mainlevel style1 style4" >NIU Forum</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="links.htm" class="mainlevel style1 style4" >Links</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="about.htm" class="mainlevel style1 style4" >About Us</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="contact.htm" class="mainlevel style1 style4" >Contact Us</a></font></td></tr></table></tr></table> Also, for the Submit a Picture page. How would i go about adding some type of form system that submits a picture to an email account? Thanks! First off, I have designed one site ever and it's still in progress. I also have no basis in computer training other than graphic design. I am a total beginner, but the site I'm designing is for my personal business, so I'm continually updating it with new features I like. I was hoping to use hover menus (I have no idea if that is the technically correct term, but when you put your mouse over a link, it gives you a drop down menu) on my site, but really have no clue how to do that. Is it possible in HTML or would I have to use javascript or flash? If so how would I incorporate the code into a generally HTML based site? Thanks! :-) I am trying to create menu based website for cars, how to I limit a menu to include only the models for a certain make. If ford is selected I want to be able to select mustang, taurus and f150, but not accord, because accord is made by honda. I am using Make: <select name="Make"> <option value="0">Acura</option> <option value="1">Audi</option> <option value="3">Bently</option> <option value="4">Ford</option> </select> format to create my menus, any reference to a page explaining how this would be helpful as well as defining (proper terminology) what I am trying to do. TIA, James Hi, I use the following HTML for a horizontal navbar: <div align="center"> <p class="navbar" align="center"> | <a class="navbar" href="index.html">Home</a> | <a class="navbar" href="events.htm">Events</a> | <a class="navbar" href="testimonies.htm">Testimonies</a> | <a class="navbar" href="about.htm">About Us</a> | <a class="navbar" href="contact.htm">Contact</a> | </p> </div> with this in the style sheet .navbar { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-decoration:none; color: #ffffff; background-color:#993300 } a.navbar:active { color: #ff00ff; } a.navbar:visited { color: #ffffff; } a.navbar:link { color: #ffffff; } a.navbar:hover { color: #993300; background-color: #ffffff; } But inspecting the code for various web sites it seems that people use the list tag <li>for horizontal menus. However as I can’t see the relevant CSS I don’t understand how it works, and I'm fairly new to CSS anyway (& I got this code from a manual). Should I be using list tags and how does it link with the style sheet? If so, can anyone explain what the code should be or point me to a good tutorial on the topic. Thanks Hi all I am completely stuck as to what to do here. I have a drop down list that I want a different html table to display depending on the option chosen on the drop down list. I know this doesn't make a lot of sense so hopefully this will help... http://www.penzancepokerleague.co.uk/playerstats.html Hi All, I need a html code which deals with cascading menus. 1)For example the page contains 2 menus: Configure,File 2)when I take my mouse over "Configure", it should display submenus "Application","Forms". 3)Again when I take my mouse over "Application" submenu, it should give 2 sub menus "Add" and "View" I have done till 2 nd point, but stuck up with the 3rd part can u pls help me....its very urgent.... Regards, Saras I am a asp.net developer and I have a customer which needs a page written in stictly html. I am not that familar with html anymore, so please bare with me. Last time I did html and used vertical menus, every page had to duplicate the menu code, instead of calling a page or control which holds the menus. Is there a way to have a inbedded html page (which is the page that hold the menus) in all the pages. This way, when I want to add a new menui tem. I don't have modify everypage, I can modify just the menu page. Is this possible in html without using frames? Any help would be appreciated. Thank you, Brandon Hi. I'm over my head. A friend's web person had an emergency, so he asked me to take over and finish his site, which had JQuery Menus. Finally, everything tested okay on MY computer, so I uploaded it. It looks okay on Firefox, but there's a big problem with IE on OTHER computers. Instead of staying in place, the menus wrap to the center and look like a vertical OL in ordinary text. The URL is http://www.trquinn.com. I feel terrible because I've made a mess of his site; any help would be sincerely appreciated. |