|
JavaScript - Menu Image Dependant On Page Issue
Good Morning Everyone,
My first post here so hope i get the format right The problem I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image. The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows: Code: var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if (filename = 'about.php')
{
$('#about').attr('src', 'images/Nav/about_selected.png')
}
else
{
$('#about').attr('src', 'images/Nav/about_over.png')
}
I am using jQuery for this project thus the jQuery code being thrown in there. The logic of the code iv made is, IF the page is 'About' then the 'About' menu button should display 'about_selected.png'. I hope this makes sense and a solution would be much appreciated. Thanks! Similar TutorialsMy question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. Hi there I've created a nav bar for this site - http://web11.3essentials.com/~cp27358/ - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image: menu1buttonup = new Image(); menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ; menu1buttondown = new Image() ; menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ; followed by.... function buttondown( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "down.src" ); } } function buttonup ( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "up.src" ); } } and this is what my list items look like: <a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')" onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a> thank you I have a form that has several dependant drop down boxes and copies all of the selections to a text box so you can paste the results to another location. I am using this in training to simulate the selections they will make in the actual system. I would like for the last selection to be a link instead of another drop-down box so that I can direct them to more information (a step by step) based on their selections. I am including a scaled down version of my code below. It actually has 8 possible selections for code 1 and 83 for code 6. I have looked at http://www.outfront.net/tutorials_02/faq.htm#DropDown but am not sure how to adapt it to work with the dependant boxes. Any help would be greatly appreciated! Code:
<html>
<head>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
var arrItems6 = new Array();
var arrItemsGrp6 = new Array();
arrItems6[500] = "http";
arrItemsGrp6[500] = 244
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
<script language='Javascript'>
function listChoices() {
var textStr='';
var aSel=document.getElementsByTagName('select');
for(var i=0; i<aSel.length; i++) {
if(aSel.length>1) {
textStr+=aSel.name+": "+aSel[aSel.selectedIndex].text+",";
}
}
document.form.text1.value=textStr;
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="listChoices(); selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
</select></font></font></td>
<td width="220" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="listChoices(); selectChange(this, 2); "></select></font></td>
<td width="220" align="center" rowspan="5">
<TEXTAREA name="text1" cols="24" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="listChoices(); selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="listChoices(); selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="listChoices(); selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<p><font face="MS Sans Serif" size="2"> Code 6: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="listChoices(); selectChange(this, 6); alert('Reminder') " size="1"></select>
</font></p></td>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2"> Link: </font> <font size="3" face="Courier">
<select id="seventhChoice" name="Choice6"></select></font></td>
<td width="220" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</table>
</div>
</form>
</body>
</html>
I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi, Sorry to bother you all with this but I'm really new to JavaScript and can't figure this out but I'm sure it's probably quite simple for you guys. I've been using this bit of code to limit the number of characters in a text field (taken from http://www.shiningstar.net/articles/...reacounter.asp: Code: <SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<form name="myForm"
action="/articles/articles/javascript/dynamictextareacounter.asp?ID=<%=siteID%>"
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>
<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>
What I'd like to do is make the background colour and maybe the font colour change on the 'characters left' field depending on the value of that field. So most of the time the colour is green but when the field = 0, the background colour changes to red. Can I just add to the function above or will I need a new one? If anyone could help, that would be great Cheers 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); New to Javascript and been reading a lot of tutorials on the various things im trying to do with my website. One thing i cant figure out is my my menu doesnt dropdown as I want to have sublinks. I know this all has to do with my style.css. Here is the code I have, cant figure out where I got this wrong. [CODE] .menu {width:100%; height:67px; background:url(images/tail-menu.gif) 0 0 repeat-x #f00;} .menu li {float:left; font-size:1.333em; line-height:1.5em; text-transform:uppercase;} .menu li a {display:block; padding:21px 27px 22px 27px; color:#818080;} .menu li .active, .menu li a:hover {color:#fffefe; background:#f31301;} .menu .last-item a {padding:21px 32px 22px 27px; } .menu li span {width:100%; height:67px; background:url(images/tail-menu.gif); no-repeat center top;float: left} .menu li span.subhover {background-position: center bottom; cursor: pointer;} .menu li ul.subnav {list-style: none; position: absolute; left:0; top:35px; background:#f31301; margin:0; padding:0; width:170px;float:left; display:none; border: 1px solid #111} .menu li ul.subnav li{margin:0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 100%;} [CODE] Any help is greatly appreciated. Can someone explain to me why my dropdown menu works on all my subpages but not on my home page? Just about done with this site to present to my client and need to get this working asap. PM me and I'll give you the URL. Thanks in advance! Respectfully, Len Hi all, I'm having an issue with a slide out menu and would appreciate some assistance. I feel like its most likely an easy fix which has escaped me over the last couple of days. Basically, I'm using tabbed navigation panes in the center column of a 3-column CSS layout. I'm wanting to place a functional slide out menu in EACH tab. As of now, I have one working perfectly in the intial tab, but I'm unable to achieve the same functionality in the remaining tabs. I can get the content loaded, but it is completely expanded...losing the collapsing/slide out action(s). I have added code for the content to be loaded into the 2nd tab, but have left the rest blank. I figure if the issue for tab 2 is resolved, I can apply it to the rest of the tabs. I am 99% sure the issue resides in the slide-out-menu-new.js file, but I can't seem to figure out where the functionality is being lost. Please assist if you would like. It would be GREATLY appreciated...this is the last hurdle I have before adding real content to the site. Please find the zip file containing all associated code/files by visiting the link below (a quick page posted for storage purposes only). http://www.truckerslifeline.com/siteHelp Thanks! Hi there, My last 2 little annoyances are related to my Cufon main menu. I could use some assistance. http://www.lyricoperala.org/index3.html Sub-menu items are spaced too far apart. I've tried to set the top padding to 0px, but that doesn't seem to have made a difference. Finally, the last item is a CSS issue, but I'll mention it here just in case you, my code savior, happen to know the answer. I guess it's a z-index thing, but I haven't mastered this yet. My sub-sub-menu items are appearing UNDER the ticket image. I'd prefer that they show up above it, obviously. Thanks so much in advance! Best forum helpers EVER here! ~Laura Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li
{
background-color:Gray;
float:left;
width:120px;
height:40px;
line-height:40px;
border:solid 1px black;
position:relative;
}
#navMenu li a {
z-index:20;
display:block;
height:40px;
position:relative;
color:Black;
}
#navMenu li .left {
background-color:Green;
position:absolute;
width:20px;
height:40px;
top:0px;
z-index:0;
display:none;
}
#navMenu li .right {
background-color:Red;
position:absolute;
width:100px;
height:70px;
top:0px;
z-index:0;
display:none;
}
#navMenu li.selected {
background-color:Blue;
}
</style>
</head>
<body>
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</body>
</html>
I would appreciate any help given! Thanks Hello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? The left-hand (main) menu for my website (www.displaycentre.co.uk) is extremely slow on IE8 on some PCs yet fine on others. No problems with other browsers at all. I know that the menu is huge but cannot understand why the speed is fine on some (even low spec) PCs and yet it is painfully slow on others. It is slow on all of my work PCs (some with 512Mb RAM others have 2GB!) and also my PC at home (which is brand new this weekend, 2Gb RAM and only Windows XP + all updates loaded so far). Any body out there got any ideas? My developer is simply putting it down to the way in which IE8 copes with such huge menus? Thanks in anticipation. Chris Hi all I'm a real newbie to Java script, I've literally been teaching myself for about 2 days now, but I've come across a bit of a problem which I'm sure is easy to fix so I was hoping for some pointers. Heres the problem: What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected. In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down) Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that. Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing! Thanks Code:
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
//Code to prints out the current product matrix
function print_top_biochill_list(){
var topx=0
var topy=0
for (topi=0;topi<top_biochill.length;topi++)
{
document.write(top_biochill[topx][topy]+" "+top_biochill[topx][topy+1]+" "+top_biochill[topx][topy+2]+" "+top_biochill[topx][topy+3]+" "+top_biochill[topx][topy+4]+"<br />");
var topx=topx+1;}}
//Code to create Drop Down Menu to select top Biochill
function top_biochill_addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);}
//Code to populate Top Biochill Drop Down Menu based on which size EPS is selected
function top_biochill_addOption_list(selectbox){
var itop2=0
for (var itop=0; itop < top_biochill.length;++itop){
if (top_biochill[itop2][3]==1){
top_biochill_addOption(document.top_biochill_drop_list.top_biochill_list, top_biochill[itop][0], top_biochill[itop][0]);
itop2=itop2+1
}}}
function addtop_biochill(){
}
</script>
</head>
<body onLoad="addtop_biochill();top_biochill_addOption_list()";>
<script type="text/javascript">
//Creates an array to describe top biochill
var top_biochill = new Array();
{
//0=Name, 1=EPS10, 2=EPS15, 3=EPS30, 4=EPS45
top_biochill[0] = new Array(1212,1,1,1,1 );
top_biochill[1] = new Array(1515,1,1,1,1 );
top_biochill[2] = new Array(2020,0,1,1,1 );
top_biochill[3] = new Array(3015,0,0,1,1 );
top_biochill[4] = new Array(3020,0,0,0,1 );
top_biochill[5] = new Array(3040,0,0,0,1 );
}
//Runs the prints the matrix code
print_top_biochill_list();
</script>
<!--Select EPS Size Drop Down Menu-->
<form name="box_size" onsubmit="CheckForm()">
<select name="box_size_jump_menu" onchange="document.box_size.EPSshowvalue.value=this.value">
<option value=0>Please select a Box Size</option>
<option value=1>EPS 10</option>
<option value=2>EPS 15</option>
<option value=3>EPS 30</option>
<option value=4>EPS 45</option>
</select>
<input type="number" name="EPSshowvalue">
<script type="text/javascript">
top_biochill_addOption_list();
</script>
</form>
<!--Select Top Biochill Drop Down Menu-->
<FORM name="top_biochill_drop_list" onsubmit="CheckForm()">
<SELECT NAME="top_biochill_list" onchange="document.top_biochill_drop_list.top_biochill_showvalue.value=this.value">
<Option value="" >Select Biochill</option>
</SELECT>
<input type="text" name="top_biochill_showvalue"><br>
</form>
</body>
</html>
Hello I have several issues with my multilevel drop down menu The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does This clearly means that the menu is not coming out of the iframe Please help me bring it on top of everything of the page Note: i have placed the menu in one iframe and a page opens below it in another iframe. The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should be there and hence he/she can edit it And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they see the page their way. For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100 go to tweetup.com Please help me, it will be really appreciable. Thank you very much in advance! I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hey, I'm not very good with JavaScript, I'm a beginner. I'm wondering why my image won't appear? This is the script: PHP Code: <script> function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img src="localhost/haha.jpg">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img src="localhost/haha.jpg">'; } } </script> And this is the HTML: PHP Code: <div id="headerDivImg"> <div id="titleTextImg">Click below!</div> <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="localhost/haha.jpg"></a> </div> <div id="contentDivImg" style="display: none;"> <form> <input type="text"> </form></div> What's the issue here? Thanks. I have an issue with my div visibility toggling Code: function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
I call it from an image map he Code: <area shape="rect" coords="234,-12,480,203" href="#peripherala" onclick="toggle_visibility('peripherala');toggle_visibility('shadow');return false"/>
and I do the return false to stop the thing from jumping all over the place, but where i click next, the page scrolls down to center on that point, which is really annoying. How do I stop it? Thanks for any help.... I am in desperate need for help as I'm pulling my hair out! I'm pretty sure this is JavaScript related. I'm incorporating a WordPress header into Opencart. Its pretty basic. I copied the WordPress header source code into the header of the Opencart and all is well in Firefox & Chrome and Safari. In IE however...If you enter the product page through the categories on the left the product page left aligns and breaks...I can't figure this out for the life of me. I tried to debug it with explorers tools but I don't know enough about Java script to understand why its breaking. Can anyone PLEASE help me on this?!!! My site is http://www.sterlingportable.com/store/ I have two simple forms on the site, each captures an email address they are for two separate languages. However when I try to validate, only one validates and the other one doesn't Javascript: Code: <script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
// ** END **
return true ;
}
</script>
<script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email2.value == "") {
alert( "Please enter your email address." );
form.email2.focus();
return false ;
}
// ** END **
return true ;
}
</script>
Form 1- It Validates Just Fine Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td>
<input name="email" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td> <input style="border:none" type="image" name="imageField" id="image" src="submit.jpg" />
</td>
</form>
Form2 Doesn't Validate Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td><input name="email2" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td>
<input style="border:none" type="image" name="imageField2" id="image2" src="submit2.jpg" />
</td>
</form>
|
|||||||