|
JavaScript - Maintain Active Tab And Tab Contents
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();
})
});
Similar TutorialsHi, I have a a html/PHP page divided into two, on the left div I have a list of subjects and on the right div I have used AJAX to populate this side with a list of questions (taken from database), this list depends on the selection made on the left. Each of the questions in the list has a checkbox, I want to be able to make selections using the checkboxes and then click on the other subjects but if I was to go back to the page with my selections the checkboxes checked previously will already be there. Any ideas on how I can do this? I would appreciate any help. I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be... Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment. What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another. My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself. Let's set up a simple class called "App" to demonstrate what I mean... Code: var myApp = new App("MyFirstApp");
function App(argName) {
this.name = argName;
this.GetDirectory("C:\Program Files");
}
App.prototype.GetDirectory = function(argPath) {
// "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}
App.prototype.GetDirectoryCallback = function(argFilePaths) {
// "this" equals the "window" object (bad!), meaning this.name should equal a null reference
// argFilePaths contains a string of file paths (delimited using ;) returned by the server
var mFilePaths = split(argFilePaths, ";");
// for each file path, add a div to the document body containing that file path, with an onclick handler
for (var i in mFilePaths) {
var mFilePath = mFilePaths[i];
var mFilePathDiv = document.createElement("div");
mFilePathDiv.innerHTML = mFilePath;
mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
document.getElementById("body").appendChild(mFilePathDiv);
}
}
App.prototype.FilePathDivClickHandler = function() {
// I need a reference to the App object instance here, but I'm not sure where to grab it...
// what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
this.GetDirectory(event.target.innerHTML);
}
The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory). Code: App.prototype.GetDirectory = function(argPath) {
// "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
// "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
var instance = this;
Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
function GetDirectoryCallback(argFilePaths) {
// "this" equals the window object (bad!), meaning this.name should equal a null reference
// "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
// argFilePaths contains a string of file paths (delimited using ;) returned by the server
var mFilePaths = split(argFilePaths, ";");
// for each file path, add a div to the document body containing that file path, with an onclick handler
for (var i in mFilePaths) {
var mFilePath = mFilePaths[i];
var mFilePathDiv = document.createElement("div");
mFilePathDiv.innerHTML = mFilePath;
mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
document.getElementById("body").appendChild(mFilePathDiv);
}
}
}
Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object. Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler? Hello Everyone, I am facing problem with divs indexes persistancy on sorting when browser refreshing. checkout this fiddle once and help me. Sortable-arindam - JSFiddle Here how can i maintain the divs persistancy on sorting when page refreshing. Thanks in Advance Satish Chandragiri 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? 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 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'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'm working on stripping specific HTML tags in order to do a selected string comparison. Stripping the tag, done. Re-calibrating the selection start and end points, done. Capturing the tags for re-insertion, done. Getting the start point of the tag, done. What I am having trouble with is finding the content between the tag so that I can put it back after altering the selected text. <span class="something">find this content!</span> Any ideas are more than welcome! Thanks, Hi I need to produce some code to get the contents of the particular TD I am running a function in. I have the following code which works fine up the point of wanting to delete a row. In order to make it work again I have to go into the code and adjust all the numbers in the functions (not sure that's the correct terminology) Code: <head>
<script language='javascript'>
exchRate = '1.12';
function gettheUKP(which) {
// This is the line I think I need to change
var x = document.getElementsByTagName("span")[which].innerHTML;
var s = Math.round(x / exchRate);
document.write('(£' + s + ')')
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="charges">
<tr>
<td><strong><span>368</span>€</strong> <script type="text/javascript">gettheUKP(0);</script></td>
</tr>
<tr>
<td><strong><span>471</span>€</strong> <script type="text/javascript">gettheUKP(1);</script></td>
</tr>
<tr>
<td><strong><span>598</span>€</strong> <script type="text/javascript">gettheUKP(2);</script></td>
</tr>
<tr>
<td><strong><span>720</span>€</strong> <script type="text/javascript">gettheUKP(3);</script></td>
</tr>
<tr>
<td><strong><span>998</span>€</strong> <script type="text/javascript">gettheUKP(4);</script></td>
</tr>
</table>
</body>
So in essence I think I need to change the highlighted line to say "get the contents on the span within this TD". Is this possible? Thanks 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 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> 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)); } 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 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> 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 Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! |
|||||||