|
JavaScript - Go Back To Active Menu On Mouse Out
Similar TutorialsHi 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 trying to get this to work... I have a menu which has a submenu which is activated on mouse over with javascript and that part works just fine, but... I want to be able to have the submenu showned if the mainmenu is clicked... So if, as in example below, the page home is selected, the submenu is activated untill trhe mouse is hoovering over the "Cars" link, and when the mouse goes off the Cars link again the home submenu is activated... Hope this makes sense... Example below: Code: <script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul class="navbar">
<li><a href="index.php?page=home">Home</a>
<ul class="sub">
<li><a href="index.php?page=account">Account</a></li>
<li><a href="index.php?page=profile">Profile</a></li>
</ul>
</li>
<li><a href="index.php?page=cars">Cars</a>
<ul class="sub">
<li><a href="index.php?page=smallcars">Small Cars</a></li>
<li><a href="index.php?page=bigcars">Big Cars</a></li>
</ul>
</li>
</ul>
Hope this makes sense... Any help is appreciated... Hi everyone! I'm making a tab menu with HTML, CSS and JavaScript. I have this HTML: <ul class="tabmenu"> <li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Información</a></li> <li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li> <li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li> <li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">Cómo llegar</a></li> </ul> Then I added some CSS to it (if you need to see it please tell). And the JavaScript: <script type="text/javascript"> function tbs(id){ return document.getElementById(id); } function tabsen(){ tbs("1").style.display = "none"; tbs("2").style.display = ""; tbs("3").style.display = ""; tbs("4").style.display = ""; } function tabs(id) { tabsen(); var e = tbs(id); e.style.display = ( e.style.display == '' ) ? 'block' : '' ; } function byId(id) { return document.getElementById ? document.getElementById(id) : document.all[id]; } var prevLink = ""; function changeActiveStates(ele) { if (prevLink) byId(prevLink).className = ""; ele.className = 'active'; prevLink = ele.id; } </script> The problem is: I don't know how to set active the first tab. I've tried with class='active', but when I use that atribute and click on another tab, the first one doesn't deactivate... Can anybody help me? I'm new to javascript. Can someone help me with this menu? Here is my html code: <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alaska Fur Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="JavaScript" src="js.js"></script> <link rel="stylesheet" type="text/css" href="activemenu.css" /> <script src="jquery-activemenu.js" type="text/javascript"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#fancybox").fancybox({ 'titleShow' : false, type:'image' }); //show the footer $("#footer").css("visibility","visible"); //initialize activeMenu initMenu(); }); </script> </head> <body> <div id="container"> <div id="header"> <a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a> <div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div> <div id="underlinemenu" class="ulmhead"> <ul> <li><a href="index.html" style="border:0;">Home</a></li> <li><a href="content2e96.html?id=431503">About</a></li> <li><a href="content9bf1.html?id=431504">Services</a></li> <li><a href="find_location.html">Locations</a></li> <li><a href="ct.html">Contact Us</a></li> </ul> </div> <div class="clear"></div> <div id="topmenu"> <ul id="activeMenu"> <li style="top: 0; left:0px"><a href="shopa146.html?action=cat&catID=20529" id="furs">Furs</a></li> <li style="top: 0; left:66px"><a href="shop52df.html?action=cat&catID=20541" id="leather">Leather & Fur</a></li> <li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&catID=20575" id="cashmere">Cashmere & Fur</a></li> <li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&catID=21239" id="outerwear">Outerwear</a></li> <li style="top: 0; left:493px"><a href="shop0376.html?action=cat&catID=20544" id="plus">Plus Sizes</a></li> <li style="top: 0; left:604px"><a href="shop2060.html?action=cat&catID=20580" id="accessories">Accessories</a></li> </ul> </div><!-- topmenu --> </div><!-- header --> <!--submenu divs--> <div id="furs_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;"> <span>Women's Furs</span> <li><a href="shopde5e.html?action=cat&catID=20572">Mink</a></li> <li><a href="shop2705.html?action=cat&catID=20574">Sable</a></li> <li><a href="shop5c0d.html?action=cat&catID=20570">Chinchilla</a></li> <li><a href="shopdfa7.html?action=cat&catID=20568">Beaver</a></li> <li><a href="shop04fa.html?action=cat&catID=20571">Lynx</a></li> <li><a href="shop65dc.html?action=cat&catID=20569">Bobcat</a></li> <li><a href="shopc9fc.html?action=cat&catID=20622">Coyote</a></li> <li><a href="shop65f8.html?action=cat&catID=20539">Fox</a></li> <li><a href="shop3276.html?action=cat&catID=20573">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop2ef6.html?action=cat&catID=20531">Mink</a></li> <li><a href="errorfe10.html?action=cat&catID=20532">Sable</a></li> <li><a href="errorfe10.html?action=cat&catID=20533">Chinchilla</a></li> <li><a href="errorfe10.html?action=cat&catID=20534">Beaver</a></li> <li><a href="errorfe10.html?action=cat&catID=20535">Lynx</a></li> <li><a href="errorfe10.html?action=cat&catID=20536">Bobcat</a></li> <li><a href="shopfc5b.html?action=cat&catID=20618">Coyote</a></li> <li><a href="shop88e4.html?action=cat&catID=20537">Fox</a></li> <li><a href="errorfe10.html?action=cat&catID=20540">Rabbit</a></li> </ul> </div> <div id="leather_submenu"> <ul class="dropdown"> <li><a href="shop973d.html?action=cat&catID=20542">Women's Leather & Fur</a></li> <li><a href="shop4cc6.html?action=cat&catID=20543" style="border:0;">Men's Leather & Fur</a></li> </ul> </div> <div id="cashmere_submenu"> <ul class="dropdown"> <li><a href="shop3f01.html?action=cat&catID=20576">Coats</a></li> <li><a href="shopd4d8.html?action=cat&catID=20577">Strollers</a></li> <li><a href="shop7899.html?action=cat&catID=20578">Jackets</a></li> <li><a href="shopcba4.html?action=cat&catID=20579" style="border:0;">Capes</a></li> </ul> </div> <div id="plus_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;"> <span>Women's Furs</span> <li><a href="shop2530.html?action=cat&catID=20564">Mink</a></li> <li><a href="shop807e.html?action=cat&catID=20566">Sable</a></li> <li><a href="shopbc8f.html?action=cat&catID=20557">Chinchilla</a></li> <li><a href="shopcb16.html?action=cat&catID=20553">Beaver</a></li> <li><a href="shop3cb8.html?action=cat&catID=20561">Lynx</a></li> <li><a href="shopb6e3.html?action=cat&catID=20555">Bobcat</a></li> <li><a href="shop1e6c.html?action=cat&catID=20621">Coyote</a></li> <li><a href="shopc08b.html?action=cat&catID=20559">Fox</a></li> <li><a href="shop0495.html?action=cat&catID=20562">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop9b23.html?action=cat&catID=20565">Mink</a></li> <li><a href="shop10dc.html?action=cat&catID=20567">Sable</a></li> <li><a href="shop8154.html?action=cat&catID=20556">Chinchilla</a></li> <li><a href="shop0b63.html?action=cat&catID=20551">Beaver</a></li> <li><a href="shopa40f.html?action=cat&catID=20560">Lynx</a></li> <li><a href="shopd843.html?action=cat&catID=20554">Bobcat</a></li> <li><a href="shopa2c0.html?action=cat&catID=20620">Coyote</a></li> <li><a href="shopb0b2.html?action=cat&catID=20558">Fox</a></li> <li><a href="shopd3b0.html?action=cat&catID=20563">Rabbit</a></li> </ul> <div class="clear"></div> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;"> <span>Leather & Fur</span> <li><a href="shop91d6.html?action=cat&catID=20549">Women's Leather & Fur</a></li> <li><a href="shop8605.html?action=cat&catID=20548">Men's Leather & Fur</a></li> </ul> <ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;"> <li><a href="shope478.html?action=cat&catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li> </ul> </div> <div id="accessories_submenu"> <ul class="dropdown"> <li><a href="shop2f26.html?action=cat&catID=20581">Fur Hats</a></li> <li><a href="shop9989.html?action=cat&catID=20582">Fur Headbands</a></li> <li><a href="shop935f.html?action=cat&catID=20583">Fur Earmuffs</a></li> <li><a href="shopd2bf.html?action=cat&catID=20584">Gloves with Fur</a></li> <li><a href="shop2c08.html?action=cat&catID=20585">Fur Boot Toppers</a></li> <li><a href="shop9f4f.html?action=cat&catID=20586">Fur Scarves & Flings</a></li> <li><a href="shop3d06.html?action=cat&catID=20587">Fur Blankets</a></li> <li><a href="shop4bf4.html?action=cat&catID=20588">Fur Handbags</a></li> <li><a href="shop611a.html?action=cat&catID=20589" style="border:0;">Mink Teddy Bears</a></li> </ul> </div> Here is the javascript: /* jQuery ActiveMenu v1.0 Author: Miguel Sanchez 12/2009 */ var timeouts = []; //for hiding the menu purposes function initMenu(){ var offclass; var menuAnchor; $("#activeMenu").find("li").each(function() { //get a reference to the anchor inside the li menuAnchor = $(this).children(":first"); //get the name of the offclass offclass = $(menuAnchor).attr("id")+"_off"; //assign off class to item $(menuAnchor).addClass(offclass); //assign hover event handler to main menu $(menuAnchor).hover( function (event) { submenu_show(event.target); }, function (event) { submenu_hide(event.target); } }); //assign hover events to submenu $("div [id$=_submenu]").hover( function (event) { submenu_over(event.target); }, function (event) { submenu_out(event.target); } } function submenu_show(caller){ //hide all the submenus $("div [id$=_submenu]").hide(); //get the id of the main menu item var mainMenuItemId = $(caller).attr("id") //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove off class to item $(caller).removeClass(offclass); //assign on class to item $(caller).addClass(onclass); // get the id of the submenu var targetSubMenuId = mainMenuItemId+"_submenu"; //show the submenu $("#"+targetSubMenuId).slideDown("fast"); } function submenu_hide(caller){ //get the id of the main menu item var mainMenuItemId = $(caller).attr("id"); //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove on class to item $(caller).removeClass(onclass); //assign off class to item $(caller).addClass(offclass); timeouts[mainMenuItemId] = setTimeout(function() { $("#"+mainMenuItemId+"_submenu").slideUp("fast"); }, 200); } function submenu_over(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); //show the div $(subMenuDiv).show(); //get the id of the main menu var mainMenuItemId = $(subMenuDiv).attr("id"); mainMenuItemId = mainMenuItemId.replace("_submenu",""); clearTimeout(timeouts[mainMenuItemId]); //remove the "off" class $("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off"); //add the "on" class $("#"+mainMenuItemId).addClass(mainMenuItemId+"_on"); } function submenu_out(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); $(subMenuDiv).hide(); //get the id of the main menu var menuAnchorId = $(subMenuDiv).attr("id"); menuAnchorId = menuAnchorId.replace("_submenu",""); //remove the "on" class $("#"+menuAnchorId).removeClass(menuAnchorId+"_on"); //add the "off class $("#"+menuAnchorId).addClass(menuAnchorId+"_off"); } Here is the CSS styling: /* graphical menu codes */ #topmenu ul { list-style: none; width: 738px; height:52px; padding:0; margin: 0px; position: absolute; top:94px; right:0; overflow: hidden; } #topmenu li { display: inline; position: absolute; } #topmenu li a{ float: left; font-size:11px; line-height: 14px; white-space: nowrap; text-transform: uppercase; text-align:center; padding: 0 0 0 0; text-indent:777px; overflow:hidden; height:52px; } #topmenu li a:hover { color: #bceffa; } a.on { color: #bceffa; } #topmenu a { color: #ffffff; text-decoration: none; } #topmenu a:hover { color: #bceffa; text-decoration: none; } .furs_off { background: url("graphics/topmenu2.gif") 0 0 no-repeat; width:66px; } .furs_on { background: url("graphics/topmenu2.gif") 0 -52px no-repeat; } .leather_off { background: url("graphics/topmenu2.gif") -66px 0 no-repeat; width:144px; } .leather_on{ background: url("graphics/topmenu2.gif") -66px -52px no-repeat; } .cashmere_off { background: url("graphics/topmenu2.gif") -210px 0 no-repeat; width:165px; } .cashmere_on{ background: url("graphics/topmenu2.gif") -210px -52px no-repeat; } .outerwear_off { background: url("graphics/topmenu2.gif") -374px 0 no-repeat; width:119px; } .outerwear_on{ background: url("graphics/topmenu2.gif") -374px -52px no-repeat; } .plus_off { background: url("graphics/topmenu2.gif") -493px 0 no-repeat; width:111px; } .plus_on{ background: url("graphics/topmenu2.gif") -493px -52px no-repeat; } .accessories_off { background: url("graphics/topmenu2.gif") -604px 0 no-repeat; width:133px; } .accessories_on{ background: url("graphics/topmenu2.gif") -604px -52px no-repeat; } ul.dropdown { list-style: none; margin: 0; padding: 0; border: none; z-index:10000; position:relative; } ul.dropdown li span { display: block; _display:inline-block; text-decoration: none; } ul.dropdown li a { display: block; position: relative; _display:inline-block; /* so IE doesn't add space between elements */ _width: 83%; /* makes block fill width in IE */ padding: 6px 10px 6px 10px; font-size: 13px; color: #ffffff; text-decoration: none; border-bottom:1px solid #b78833; } ul.dropdown li a:hover{ color: #ffffff; background: #e3a73a; text-decoration: none; } .dropdown span{ font-weight:bold; color:#64450f; margin:0 0 0 10px; } #furs_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 260px; display: none; z-index:1000; } #leather_submenu { width:166px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 325px; display: none; z-index:1000; } #cashmere_submenu { width:192px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 470px; display: none; z-index:1000; } #plus_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 698px; display: none; z-index:1000; } #accessories_submenu { width:158px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 840px; display: none; z-index:1000; } I have an assignemnt due next week and i am running into a problem of the webpage not sliding out the menus when the mouse is hovered over it. The directions were split up by each function code. Open the slidingmenu.js file and insert a command to run the function makeMenus when the browser has completed loading the page. Add the following three global variables to the file: currentSlide- used to reference the sliding menu currently displayed in the document. Set its initial value to null. timeID- used to reference timed interval commands. Set its initial value to null. leftPosition- used to store the left coordinate of the active sliding menu. Set its initial value to 0. Code: window.onload = makeMenus; var currentSlide = null; var timeID = null; var leftPosition = 0; 8. Add the makeMenus() function. The purpose of this function is to create a reference to all sliding menus in the document and to apply event handlers to objects in the document. Add the following commands to the function: a. Create an instance of the array object named slideMenus. b. Use the getElementsByTagName() method to store all of the elements in the document in an array named allElements. c. Loop through the elements in the allElements array, pushing all of the elements belonging to the slideMenu class into the slideMenus array. d. Loop through all of the items in the slideMenus array and apply the onmouseover event handler to those objects to run the showSlide() function. Also, for each object in the slideMenus array, reference the first ul element within that object and set the value of the ul elements left style property to 0px. This command moves all sliding menus (enclosed in unordered lists) to the far left of the page. That can be accomplished with this line of code, where j is the counter variable in a for loop: slideMenus[j].getElementByTagName("ul")[0]style.left="0px"; e. Add onclick event handlers to the elements with ID values of head and main, running the closeSlide function. Code: function makeMenus() {
var slideMenus = new Array();
var allElements = document.getElementsByTagName("*");
for (var i = 0; i < allElements; i++) {
if (allElements[i].className == "slideMenu") slideMenus.push(allElements[i]);
}
for (var i = 0; i < slideMenus.length; i++) {
slideMenus[i].onmouseover = showSlide;
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
}
document.getElementById("head").onclick = closeSlide;
document.getElementById("main").onclick = closeSlide;
}
9. Add the showSlide() function to the file. The purpose of this function is to display a sliding menu on the Web page. In the first line of the function, create a variable named slideList that stores an object reference to the first ul element nested within the current object (as referenced by the this keyword). slideList=this.getElementByTagName("ul")[0]; 10. Add an if statement to the showSlide() function. The purpose of the if statement is to test whether a sliding menu is currently displayed on the page. If the currentSlide object is equal to null OR the ID of the currentSlide is not equal to the ID of the slideList variable, then do the following: . Run the closeSlide() function. a. Set the currentSlide variable equal to the slideList variable. b. Set the display style of the currentSlide variable to block. c. Run the moveSlide() function repeated at intervals of 1 millisecond. Store the ID of the timed function in timeID. Code: function showSlide() {
var slideList = this.getElementsbyTagName("ul")[0];
if ((currentSlide = null) || (currentSlide != slideList)) {
closeSlide();
currentSlide = slideList;
currentSlide.style.display = "block";
timeID = setInterval("moveSlide()", 1);
}
}
11. Add the closeSlide() function. The purpose of this function is to close any active sliding menu. Use object detection to confirm that the currentSlide variable is not equal to null and then run the following commands: . Clear the timed function referenced by the timeID variable. a. Set the left style of the currentSlide object to 0px and set the display style to none. b. Set the value of currentSlide to null Code: function closeSlide() {
if (currentSlide) {
currentSlide.style.display = "none";
currentSlide = null;
}
clearInterval(timeID);
currentSlide.style.left = "0px";
currentSlide.style.display = "none";
currentSlide = null;
}
12. Add the moveSlide() function. The purpose of this function is to move a sliding menu horizontally across the page until the left coordinate of the menu exceeds 220 pixels. Add the following commands to the function: . Increase the value of the leftPosition variable by 5. a. If the value of the left position of the currentSlide object is less than or equal to 220: if parseInt((currentSlide.style.left) <=220) { then set the left style of that object to the coordinates leftPositionpx where leftPosition is the value of the leftPosition variable. b. Otherwise, clear the timed function referenced by the timeID variable and reset the value of the leftPosition variable to 0. Code: function moveSlide() {
leftPosition = leftPosition + 5;
if (parseInt(currentSlide.style.left) <= 220) {
object.style.left = leftPosition + "px";
} else {
clearInterval(timeID);
leftPosition = 0;
}
}
Where did i go wrong? The website is hosted here. Does anyone know how to create the kind of menu in this site? A http://www.fullyillustrated.com/ Also do anyone know of a easy tutorial/free code covering how to do this? 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 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 Help! I am using a shopping cart solution that my clients had set up. The back end makes it close to impossible to upload my own files for use on the page IE .xml files, or any files other than images. The biggest problem is that the links they provide that lead to my product categories are text links, and they are heanous looking. I would like to spruce it up, throw the Product Category Links into a categorized drop down menu across the top. I am new to javascript and php and xhtml and coding in general. I NEED SOME HELP. Here is a copy of the header code where i assume i would place the drop down menu. <code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title><ss:value source="$page.title"/></title> <link rel="icon" href="$store.images['favicon.ico']" type="image/x-icon"> <link rel="shortcut icon" href="$store.images['favicon.ico']" type="image/x-icon"> <ss:if test="$page.hasMetaDescription()"><META NAME="description" CONTENT="$page.meta.description"></ss:if> <ss:if test="$page.hasMetaKeywords()"><META NAME="keywords" CONTENT="$page.meta.keywords"></ss:if> <style type="text/css"> <!-- /* Style Sheet */ body { margin : 0px 0px 0px 0px; background-color:<ss:value source=$storeVersion.colorScheme.background/>; } .nav A:link {text-decoration:color:#000000} .nav A:visited {text-decoration:underline;color:#000000} .nav A:hover {text-decoration:none;color:#000000} .nav A:active {text-decoration:underline;color:#000000} .nav2 A:link {text-decoration:color:#000000} .nav2 A:visited {text-decoration:underline;color:#000000} .nav2 A:hover {text-decoration:none;color:#000000} .nav2 A:active {text-decoration:underline;color:#000000} .title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph/> ;color:#000000;background-color:#FFCCCC;text-align:left;} .content {font-family:<ss:value source=$font.paragraph.face/> ;padding:8px 8px 8px 8px;text-align:left;} .nav {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/> ;color:#000000;background-color:#FFCCCC;} .nav2 {padding:5px 5px 5px 5px;font-size:9pt;font-family:<ss:value source=$font.paragraph.face/> ;color:#000000;} .footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/> ;color:<ss:value source=$font.paragraph.color/>;text-align:center;} --> </style> </head> <body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellspacing="0" cellpadding="0" width="100%" > <tr> <td class="nav" valign="middle"> <font class="title"></font> <ss:if test="$storeVersion.storeLogoName"> <ss:link source="$storeVersion.homePage"><ss:image border="0" alt="" source="$storeVersion.storeLogo"/></ss:link> </ss:if> <ss:value source="$store.name"/> <font size="+0"></font></td> <td class="nav" valign="bottom" align="right"> <ss:link source="$storeVersion.catalog">Advanced Search</ss:link> | <ss:link source="$storeVersion.cart">View Cart</ss:link> | <ss:link source="$storeVersion.checkout">Checkout</ss:link> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="75%" > <tr> <td colspan="3"><ss:image border="0" alt="" width="1" height="1" source="$storeVersion.images['pixel.gif']"/></td> </tr> <tr> <td class="nav2" bgcolor="#ccff99" colspan="2"> <ss:if test="$storeVersion.templateExists('About Us')"> <ss:link source="$storeVersion.aboutUs">About Us</ss:link> </ss:if> <ss:if test="$storeVersion.templateExists('Customer Service')"> | <ss:link source="$storeVersion.customerService">Service</ss:link> </ss:if> <ss:if test="$storeVersion.templateExists('Store Policy')"> | <ss:link source="$storeVersion.storePolicies">Policies</ss:link> </ss:if> </td> <td class="nav2" bgcolor="#ccff99" align="right"> <ss:if test="$storeVersion.templateExists('Home Page')"> <ss:link source="$storeVersion.homePage">Home</ss:link> </ss:if> </td> </tr> <tr valign="top"> <td class="nav2" rowspan="2" width="140" background="$storeVersion.images['yellow.gif']"><ss:image border="0" alt="" width="20" height="14" source="$storeVersion.images['greenstream.gif']"/> <ss:image border="0" alt="" width="20" height="23" source="$storeVersion.images['pinkstream.gif']"/> <ss:image border="0" alt="" width="20" height="15" source="$storeVersion.images['bluestream.gif']"/> <form method="post" action="$storeVersion.searchResults"> Search <ss:button source="$storeVersion.images['go.gif']" alt="GO" border="0"/> <br /><input size="12" name="keyword" /> </form> <font size="6"><font face="Comic Sans MS"><strong>Products</strong><br /></font></font> <ss:foreach item="category" within="$catalog.categoryList()"> <ss:sortby item="categorypriority" direction="asc"/> <ss:if test="$category.treeLevel == '1'"> <ss:link source="$category"/><br /><ss:else /><span style="POSITION: relative; LEFT: 8px"><ss:link source="$category"/><br /></span> </ss:if> <font face="Comic Sans MS"></font> </ss:foreach> <p> </p> <ss:if test="$store.isFeatureEnabled('ShowAffiliateLink')"> <ss:link source="$storeVersion.affiliate">Become an Affiliate</ss:link><br /> </ss:if> <ss:if test="$store.isFeatureEnabled('ShowMembersOnlyLink')"> <ss:link source="$storeVersion.searchMembersOnly">Members Only Catalog</ss:link><br /> </ss:if> <ss:if test="$store.isFeatureEnabled('ShowStoreSubscriptionLink')"> <ss:link source="$storeVersion.subscribe">Become a Member</ss:link><br /> </ss:if> <ss:image border="0" alt="" width="140" height="300" source="$storeVersion.images['pixel.gif']"/> </td> <td class="content" width="100%"><br /><!-- header ends --> </code> That's the header code the dude with customer service told me that the sites werent generated in html, but that can't be entirely true can it? The guy was a duesche. So I guess what i really need to know is what do i need to move the <code> <ss:foreach item="category" within="$catalog.categoryList()"> <ss:sortby item="categorypriority" direction="asc"/> <ss:if test="$category.treeLevel == '1'"> <ss:link source="$category"/><br /><ss:else /><span style="POSITION: relative; LEFT: 8px"><ss:link source="$category"/><br /></span> </ss:if> <font face="Comic Sans MS"></font> </ss:foreach> <code/> To make that into an overhead drop down menu? I am a script kiddie noob, you are the greatest, you are smart and i am not, you are atrractive and i am ugly lol Thanks very much to who ever can possible help me! I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Hello Everyone Smarter Than Me! Before I get to the question first a little History on what I am working with. I am a Software Engineer currently working under a contract in a highly customized environment. The IDE that I am using (Not by my choice as I am a Java developer by Trade) uses a "JavaScript Runtime Environment" to treat JavaScript as a complied language. Needless to say this is a little odd and it was created because my employer had trouble finding enough developers that know other languages (This also seems odd) but there always seemed to be a ton of JavaScript people around. Anyway now to the question. The code I am writing is product testing automation code that is going to save testing dollars eventually. Initially the testing was done by a team of testers whom would log into a website, run some tests by interacting with the website, and then get the results from the tests via the product that they are testing. My code will do all the interaction with the device and the website and then compile all the results in an Ms. Excell spreadsheet for viewing. The problem is that my employer doesn't own the website that the testing is done from and there has been some changes lately that I am trying to overcome. The problem is as follows. I have been using a Microsoft.XMLHTTP ActiveX Object to login to the website and do all the test manipulation and form submitting. The recent changes to the website have broken the automation code. The original form that I was working with contained a submit button as follows [ICODE]<input id="submitReq" type="submit" value="task device"/>[ICODE] and the id allowed the ActiveX control to find the button and submit the form. Now the page has changed as follows. There is no longer a submit button instead there is a standard button calling a javascript onclick which is then used to submit the form. The button and the javascript are below and as you can see the button has no id which makes finding and submitting the button very difficult. [CODE] <input type="button" class="button" value="Task Devices" onclick="submitRequestForm()"/> <script type="text/javascript"> <![CDATA[ function submitRequestForm() { var validations = new Object(); var fieldNames = ["devices", "profile", "priority"]; for (var key in fieldNames) { try { document.getElementById("errorMessageSpace_" + fieldNames[key]).innerHTML = ""; } catch(ex) { } } validations["devices"] = [ {type: "required", errorAction: displayTaskingParamError, errorMsg: "Devices field cannot be empty!"}, {type: "mask", regExp: /^(([!]?[\+]?([*?0-9A-Fa-f]{0,30}))|(([!]?[\+]?[0-9A-Fa-f]{0,30})?\/([0-9A-Fa-f]{0,30})?\/([*?0-9A-Fa-f]{0,30})?))(\s(([!]?[\+]?([*?0-9A-Fa-f]{0,30}))|(([!]?[\+]?[0-9A-Fa-f]{0,30})?\/([0-9A-Fa-f]{0,30})?\/([0-9A-Fa-f]{0,30})?)))*$/, errorAction: displayTaskingParamError, errorMsg: "Invalid devices list specification!"}]; validations["profile"] = [ {type: "required", errorAction: displayTaskingParamError, errorMsg: "Profile field cannot be empty!"}, {type: "mask", regExp: /^[0-9]*$/, errorAction: displayTaskingParamError, errorMsg: "Invalid profile specification!"}]; validations["priority"] = [ {type: "required", errorAction: displayTaskingParamError, errorMsg: "Priority field cannot be empty!"}, {type: "mask", regExp: /^[+-]?[0-9]*$/, errorAction: displayTaskingParamError, errorMsg: "Invalid priority specification!"}, {type: "numberBetween", low: 0, high: 1000, errorAction: displayTaskingParamError, errorMsg: "Priority value must be between 0 and 1000!"}]; var taskingRequestForm = document.getElementById('taskingForm'); taskingRequestForm.elements["devices"].value = normalizeDevicesList(taskingRequestForm.devices.value); if (new FormValidator(taskingRequestForm, validations).validate(false)) { taskingRequestForm.submit(); } } function displayTaskingParamError(field, validation) { try { document.getElementById("errorMessageSpace_" + (field.name || field.id)).innerHTML = "*" + validation["errorMsg"]; } catch(ex) { alert(validation["errorMsg"]); } } ]]> </script> [CODE] Can anyone tell me how to submit this page after the form is filled out using the Microsoft.XMLHTTP ActiveX Object? Is there a way? Thanks in advance for any help that any of you can be. Regards, Hi, Please help....... i am working on a project which has left side menu (dhtml and javascript)sliding menu with submenus and,in the right side,i have placed an empty div where i will be calling html files externally by storing all the html files in a folder called "Htmlfiles". so say for eg: in the homepage.html, i have header,left menu,center white content area, and the footer and i will be calling all the html files into this homepage.html right side content area(into the div) using javascript function. So when i click Home in the leftside menu.. the home.html which is stored in htmlfiles folder opens inside the homepage.html center area inside the blank div. Now my problem is.. when i click the home button text.. i have given the css as a:active{ color: #ff3000; } .. so when i click the home button text, the font color changes to red but when i click outside the menu or ie nearer to the menu or any other place inside the page.. the active color vanishes.. so that i am not able to guess in what page i am now. So please guide me.. so that wherever i click on the page..the active color should stay on page unless i click the next button link. And moreover, as i am loading the html files externally, when i click on that content which is loading in the right side div .. also, the active color vanishes and the original color comes for the font. So please help me... how do i do this...... hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
See http://forums.mathannotated.com/gui-...-layout-4.html. When you click the "More" tab, the browser forgets the active tab styling and current tab contents; I don't want these to change - all I want to change on the click "More" tab action is the navigation tab. But my browser should maintain the styling for the last active tab and continue to display its corresponding tab contents. Yet it forgets these details when the user clicks "More". In particular, when user navigates back and forth between the two tab sets, whatever was the last styled active tab remains styled as such. Browser should remember this. Code: $(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
//Your additions
//When page loads...
$("#button_set_2").hide(); //Hide 2nd button set; added by YOU
//On Click Event: hide 1st button set, show 2nd
$("li#more_forward").click(function() {
$("#button_set_1").hide();
$("div#button_set_2").show();
})
//On Click Event: hide 2nd button set, show 1st again
$("li#more_backward").click(function() {
$("#button_set_2").hide();
$("div#button_set_1").show();
})
});
Hi all, I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS. Can someone point me in the right direction as far as documentation? Thanks a bunch! I wrote this code for 1 image, and it is working perfectly fine: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
the problem starts when I want to use this code for 4 images, can anyone correct it please: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
{
document.getElementById("facebook").src = "images/gfacebook.png";
}
{
document.getElementById("google").src = "images/ggoogle.png";
}
{
document.getElementById("twitter").src = "images/gtwitter.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
{
document.getElementById("facebook").src = "images/facebook.png";
}
{
document.getElementById("google").src = "images/google.png";
}
{
document.getElementById("twitter").src = "images/twitter.png";
}
Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... I have a pop-up message box, that I'd like help changing to a mouse-over message box. Any help would be appreciated. Thanks Code: <style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>
<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">
<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>
|
|||||||