|
JavaScript - Tab Active In Menu
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? 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... 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; } 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 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, 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...... 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 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! 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, Here's the slideshow embed code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one. I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated! Best regards Mike Hello, Is there any way I can prevent IE from displaying the "active X controls and script prevention message" when I load my web page into the browser. Firefox, Safari and Chrome, allow my scripts to run without displaying the message when the page is loaded into the respective browsers. Any tips would be really useful. Many thanks Nonye I'm getting an '$active is not defined' error, which makes sense because the method that defines it isn't called till 10 seconds after I check if it is defined below. But that's the point. I'm actually checking to see if it is defined, and if it's not, then I defined. However, firebug still gives me the error for this: Code: if ($active == undefined) {
$active = $('.paging a.active');
}
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
I also tried: if ($active === undefined) if (!$active) But nothing works. I'm just trying to check if it's not defined, then define it. Yet it won't let me check if it is undefined because it is telling me it's undefined despite the fact I'm checking for that very reason. Thanks for any response. Hi everyone I have some problems with assigning a class to my included navagation menu. I would like to give the last clicked menu item a active class so I can style it but i have no clue how that works with javascript. as you can see i have three files two pages which included the same menu. Now I would like to set the first page to active because it would be the page the would start. but then when someone clicks the second page it should become inactive and set the active class to the secone link. if that makes sens. Is this possible with javascript? my pages: Page 1 PHP Code: <HTML> <BODY> <?php include "menu.php" ?> PAGE </BODY> </HTML> Page 2 PHP Code: <HTML> <BODY> <?php include "menu.php" ?> PAGE 2 </BODY> </HTML> menu.php PHP Code: <a href="page.php" class="active">page1</a> <a href="page2.php" class="noactive">Page2</a> I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu. What needs to be added to, or modify if I would like to use it also for "nav2" on the same page? Thank you, Peter window.onload=function() { setPage(); } function extractPageName(hrefString) { var arr = hrefString.split('/'); return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); } function setActiveMenu(arr, crtPage) { for (var i=0; i < arr.length; i++) { if(extractPageName(arr[i].href) == crtPage) { if (arr[i].parentNode.tagName != "DIV") { arr[i].className = "current"; arr[i].parentNode.className = "current"; } } } } function setPage() { hrefString = document.location.href ? document.location.href : document.location; if (document.getElementById("nav") !=null ) setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString)); } I've successfully implemented custom images for LinkedIn and Tweet share buttons for a static HTML website - static web pages. They work fine, but the only problem is that I have to manually enter the URL and the Metadata. That's a lot of work. So, what's the best way for JavaScript and or LinkedIn/Twitter to grab the active URL, title, and summary? Any help would be appreciated. The following is what I have at the moment: Code: <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.mydomain.com/&title=Page Title Goes Here&summary=The Summary of My Page Goes Here&source=Page Name" rel="nofollow" onclick="NewWindow(this.href,'template_window','550','400','yes','center');return false" onfocus="this.blur()"> <img src="images/linkedin_ico.png" title="Share this on LinkedIn" alt="Share this on LinkedIn" width="35" height="35" border="0" /> </a> Code: <a href="https://twitter.com/share?url=http://www.domain.com/&text=The Summary of My Page Goes Here" rel="nofollow" onclick="NewWindow(this.href,'template_window','500','400','yes','center');return false" onfocus="this.blur()"><img src='images/twitter_ico.png' border="0" title="Share this on Twitter" alt="Share this on Twitter"/></a> Hi.. I don't know if my idea is possible and if how can I do that. I have functions for button onclick. I have 3 buttons and I want to change the color of my button if it is active here is my code Code: <script type="text/javascript">
//=========display parameter settings==========//
function display_PS(){
document.loading_kanban.action="ParameterSettings.php";
document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(){
document.loading_kanban.action="kanban_report.php";
document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR){
document.loading_kanban.action="StockRequisition.php";
document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>
Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is. Thank you Hi, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works: Code: <A HREF="http://www.cnn.com" onMouseOver="document.pic1.src='menu1on.gif'" onMouseOut="document.pic1.src='menu1off.gif'"> <IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"> </a> The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="careers.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="contactus.html"> <img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td> <td colspan="2" style="height: 148px"> </td> <td style="width: 148px; height: 148px"> Any ideas? I hope the code displays ok on your screen. thanks anyway
Hello, i wanna use NiceEdit text editor in my site. but when i load the editor page, always i find the editor non-active, i have to click inside the textarea to active the textarea and the editor. have a look at the demo here http://nicedit.com/demos.php so i want to set the editor default status active without clicking inside the textarea to active it, so how can i do that please ?? thanks |
|||||||