JavaScript - Inserting A Dynamic Js File Into A Script Source - Chrome Error
Hello,
i'm trying to insert a dynamic js file which contains multiple functions in it (for the example : function x, function y) and it seems that my google chrome doesn't really like it so much is there anyway you know i can bypass it and make it work and both web browsers code examples: // this is where the js file supposed to go <script id="ScriptFile"> </script> //1.js contains function x and function y document.getElementById('ScriptFile').src = "/Mysite/js/1.js" later on i need to preform some actions with function x & y. Couple more issues i need to explain first there are number of js files (1,2,3 .... n ) which all contain the same functions but with different data so i cant register them hard-coded if i type the function x into the "ScriptFile" block, it does work.. its not the function problem. same goes if i include it as source in the "ScriptFile" block (<script id="ScriptFile" src="/Mysite/js/1.js") this only gives me an error while using chrome, works perfectly fine under explorer the error says it cant find function x. thanks alot! Similar TutorialsI want to insert "mu" character after "Output in <here i want to insert mu character> " in following JavaScript line Code: paper = new Raphael(document.getElementById('dialog2'), 500, 500); var a= paper.text(345,384,"Output in <here i want to insert mu character> ").attr({'font-size':13}); Hey. I've been trying to get this page working with dynamically loaded iframe sources passed by URL, but I can't seem to get it working. Here's the relavent code: Code: <script type="text/javascript"> function delineate(str) { URL = str.indexOf("=") + 1; return(str.substring(URL)) } </script> Then there's a form/submit button that simply return the name of a type of item, for example "german" or "french" Using the form attributes method="link" and action="pageURL.html", where pageURL is the page that all of this is on. Code: <form name="hack"><input type="hidden" name="selector" /></form> <script language="javascript"> var url=window.location; document.hack.selector.value=url; var url_select=document.hack.selector.value; var selectedURL="../types/" +delineate(url_select) +".html"; document.write (selectedURL); frames['middleframe'].location.href=selectedURL; </script> <iframe id="middleframe" name="middleframe" src="../types/default.html" width="100%" scrolling="auto" height="1000" frameborder="0" style="display: inline;" /> I used the hidden form to change the url to text - advice from another website. I'm sure there are better ways to do it, but I'll explore them as soon as this thing actually works.. The types are in a subfolder named types, as shown. The document.write was placed in as a debug helper, and it displays the proper file location of whatever I select with the combo box, but the iframe doesn't change it's src to the selected page! I've tired the last line of the last <script> with several different methods, none of them producing any effect whatsoever. What am I doing incorrectly? Any help? Thanks. Is it possible to self source a javascript file? I have a file with code that opens a javascript window and document.writes to it. I want to run some code in this file attached to window.onload. Code: function someWindow() { var openedWindow = open(/* relevant vars */); openedWindow.document.write(/*doctype and html head markup*/) openedWindow.document.write("<script type=\"text/javascript\" src=\"(this file)\"></script>"); openedWindow.document.write("<script type=\"text/javascript\">window.onload = function(){ /* sourced code */}</script>") openedWindow.document.write(/*html body markup*/) openedWindow.document.close(); } then in the same file have code defining object constructors and such that attach events to various elements. I realize I can write a long string variable with all the code, but that would be visible a browser window -> view source window ( I know it won't hide the code in a separate source file) The object is to have a widget all in one file, rather than having a separate html, css file and another javascript code file. Thanks for advice, suggestions, encouragement, JK How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox: this would be the original source: <script type="text/javascript" src="Includes/eng_chars.js"></script> it would be swapped for this souce file on checkbox checked: <script type="text/javascript" src="Includes/heb_chars.js"></script> and then returned to <script type="text/javascript" src="Includes/eng_chars.js"></script> when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed Thanks Hi there. I am not all that great at coding, but would like to put together a windows sidebar gadget that keeps track and logs specific activities. Some daily, some weekly, some monthly, ect. I need to find a way to refresh a small imported java script every time a button is pressed without refreshing the entire form. Would also like to have it refresh automatically every hour if possible. The line of code to reload is <script src="http://www.dgdevelco.com/quotes/quotestxt.js"></script>. Here is the entire code: <html> <head> <title>Form</title> <style> body { margin: 0; width: 130px; height: 400px; background-image: url(bg.jpg); } </style> <script type="text/javascript"> /*Enable Gadget Setting Functionality.*/ System.Gadget.settingsUI="settings.html"; </script> </head> <g:background style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" /> <form name="Form"> <table width="128" style="position: absolute; left: 1px; top: 1px;"> <tr> <td><input type="checkbox" name="item" value="01"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 1</td> </tr> <tr> <td><input type="checkbox" name="item" value="02"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 2</td> </tr> <tr> <td><input type="checkbox" name="item" value="03"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 3</td> </tr> <tr> <td><input type="checkbox" name="item" value="04"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 4</td> </tr> <tr> <td><input type="checkbox" name="item" value="05"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 5</td> </tr> <tr> <td><input type="checkbox" name="item" value="06"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 6</td> </tr> <tr> <td><input type="checkbox" name="item" value="07"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 7</td> </tr> <tr> <td><input type="checkbox" name="item" value="08"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 8</td> </tr> <tr> <td><input type="checkbox" name="item" value="09"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 9</td> </tr> <tr> <td><input type="checkbox" name="item" value="10"></td> <td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 10</td> </tr> <tr> <td colspan="2"> <input type="submit" value="Submit" style="font-family: 'Arial Narrow'; font-size: 10px; float: left;"> <input type="reset" value="Reset" style="font-family: 'Arial Narrow'; font-size: 10px; float: right;"> </td> </tr> <tr> <td colspan="2" align="right"> <input type="button" name="Report" value="Report" style="font-family: 'Arial Narrow'; font-size: 10px;"> </td> </tr> <tr> <td colspan="2"> <font style="font-family: 'Arial Narrow'; font-size: 10px; text-align: center;"> <script src="http://www.dgdevelco.com/quotes/quotestxt.js"></script> </font </td> </tr> </table> </body> </html> I have tried iframe and while it looks nice for text wrapping, it will still reload the entire gadget. Any suggestions (preferably simple so my little mind and wrap around it) would be great! Thanks for looking. :) Script runs fine in latest stable release of Firefox 3 but breaks in chrome Code: function fixCSS(){ var styles={ 'Yotsuba':'http://static.4chan.org/css/yotsuba.9.css', 'Yotsuba B':'http://static.4chan.org/css/yotsublue.9.css', 'Futaba':'http://static.4chan.org/css/futaba.9.css', 'Burichan':'http://static.4chan.org/css/burichan.9.css' } for(i in document.getElementsByTagName('link')){ for(j in styles){ if(document.getElementsByTagName('link')[i].title==j)document.getElementsByTagName('link')[i].href=styles[j]; } } // if all else fails just delete every link tag and replace with the default linkset // this may be commented out later on if(document.defaultView.getComputedStyle(document.body,'').getPropertyValue('background-color')!='rgb(255, 255, 238)'){ for(i=0;i<document.getElementsByTagName('link').length;i++){ document.getElementsByTagName('link')[0].parentNode.removeChild(document.getElementsByTagName('link')[0]); } var linkHTML='<link rel="shortcut icon" href="http://static.4chan.org/image/favicon.ico"/><link rel="shortcut icon" href="http://static.4chan.org/image/favicon.ico" /><link rel="stylesheet" type="text/css" href="http://static.4chan.org/css/yotsuba.9.css" title="Yotsuba"><link rel="alternate stylesheet" type="text/css" href="http://static.4chan.org/css/yotsublue.9.css" title="Yotsuba B"><link rel="alternate stylesheet" type="text/css" href="http://static.4chan.org/css/futaba.9.css" title="Futaba"><link rel="alternate stylesheet" type="text/css" href="http://static.4chan.org/css/burichan.9.css" title="Burichan">'; document.getElementsByTagName('head').innerHTML=document.getElementsByTagName('head').innerHTML+linkHTML; } var changer='<tr><td>Style [<a href="#" onclick="setActiveStyleSheet(\'Yotsuba\'); return false;">Yotsuba</a> | <a href="#" onclick="setActiveStyleSheet(\'Yotsuba B\'); return false;">Yotsuba B</a> | <a href="#" onclick="setActiveStyleSheet(\'Futaba\'); return false;">Futaba</a> | <a href="#" onclick="setActiveStyleSheet(\'Burichan\'); return false;">Burichan</a>]</td></tr>'; if(document.getElementsByClassName('deletebuttons')[0].parentNode.parentNode.innerHTML.indexOf('setActiveStyleSheet')==-1)document.getElementsByClassName('deletebuttons')[0].parentNode.parentNode.innerHTML+=changer; } function killCotten(){ for(i in document.getElementsByTagName('embed')){ document.getElementsByTagName('embed')[i].parentNode.removeChild(document.getElementsByTagName('embed')[i]); } } killCotten(); fixCSS(); Error message reported by Chrome's "JavaScript Console": Uncaught TypeError: Cannot call method 'removeChild' of undefined killCotten Screenshot of debugger: Hello all, I'm back with more silly newbie questions. I'm building a website that includes 3 javascript codes: 1. Onmouseover image switch for the nav bar. 2. On a specific page, onmouseover display of hidden divs. 3. Particletree's Dynamic Resolution Dependent Layout script (http://particletree.com/features/dyn...ndent-layouts/) All three scripts work fine in firefox, but the 2nd script doesn't work in safari and chrome, and the 3rd one doesn't work in safari, chrome and IE(8). Since the 1st one works fine in all browsers, I'm guessing this isn't a problem with my javascript link or anything like that. The website is: www.sheket.co.il/index4.html The specific page that runs the 2nd code is: www.sheket.co.il/services.html My javascript is: http://www.sheket.co.il/javascript.js And my default stylesheet is: http://www.sheket.co.il/style.css (I apologize for possible jibrish- the website is in Hebrew...) Any help with these two problems would be greatly appreciated! Hi, I was wondering if anyone could help me out with a script I'm trying to create/customize. The idea is to scroll an image by dragging of the mouse (like you have with Google maps for example), instead of the scrollbars. Right now I'm using a script that does the job perfectly fine under IE, but not so much under FireFox, and definitely not under Chrome. Some additional code is probably needed but I have no clue how to write proper JavaScript. Everything I try gives errors and leaves me baffled. Here's a hands-on example of what I mean (works only under IE!): http://home.wanadoo.nl/r.a.dekk/kaart/kaart.html This is the script I'm using now: Quote: <!-- <script type="text/javascript"> document.onmousedown = function(){ var e=arguments[0]||event; var x=document.body.scrollLeft+e.clientX; var y=document.body.scrollTop+e.clientY; document.onmousemove=function(){ scroll(x-e.clientX, y-e.clientY); return false; } document.onmouseup=function(){ document.onmousemove=null; } return false; } </script> //--> Any help will be appreciated. Thanks. hi, i want to create a extension for chrome using which i can save the current tab url in a text file. thanks sanjay recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source." this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before? Hi, "This happens only in chrome browser" I am trying to design a website and it has a couple of radio button on the first page. I selected one radio button and navigated to the next page. On my second page, if i hit back button, the first page show the radio option that i selected(which is correct) but when I hit save and continue it throws a JS error "please select one option". Chrome forces me to re-click the radio option again. The application is MVC 3.5, C# Here is the snippet of the ascx Code: <%= Html.RadioButton("radAccnt", "abc", Account != null ? (entity != string.Empty ? (entity.Substring(0, 3).Equals("abc") ? true : false) : false) : false, new { id = "radAbc", onClick = "SetEntity('abc');", onBlur = "javascript:ValidateOnBlur(\"ValidateAccount('true');\");" })%> I had a alert in SetEntity(Value) function and value is empty when the back button is clicked. I did some research and found that Chrome does not cache the form data. If this is true is there a work around for this? Please help. Thanks. Hi, I'm trying to call a Js function from a test.js located in a HTML file. I'm getting error message "Object has no method..." in Chrome. But no issues are seen in Firefox. Can any one please let me know how i can fix this. <html> <head> .... .... .... <div> <html> <head> <script src="test.js"></script> <script> function aFunc() { alert ("Inside aFunc"); } </script> </head> <body> </html> .... .... .... </div> </head> </html> test.js function bFunc () { aFunc (); } I am trying to work out how to use Google Chrome DevTools to simulate a timeout on a JavaScript file on my site. I can use the 'Toggle Device Mode' to introduce throttling but that doesn't target a specific script. Is there a way to do this with DevTools? I am using Chrome 38. Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end. In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content. Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code: (function() { var as,ae; as = document.getElementsByTagName("img"); for (var i = 0; i < as.length; i++) { ae = as[i]; ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail"); } })(); Hi, I am using this script Code: <script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=14; var splittercolor="none"; var relatedpoststitle="Related Results"; </script> As you can see it has a variable that lets me give a name to the results, in this case I have used Related Results. This code is used once at the back and in that way it used by my every page. So e-g if I change it to More Results it will changed everywhere on all pages. I don't want it like this, I want to be able to give a different name to every page like on one it is like 'More Images Results' while on 2nd it is something else. you can see a demo here at this page http://bloghutsbeta.blogspot.com/201...ng-slider.html Hello Friend, I am using a javascript code installed with Dreamweaver for this page: http://www.alpinelakesair.com/newsite/charters.php When you open the page, (the script element is on the right), the first tab is already open. I would like none of the tabs to be open, so that you have to first click on a tab to open it. Also, when you start clicking on the tabs, a blue focus ring surrounds the active elements. I do not like the blue focus ring. Finally, you may notice that when you click on the tabs there is a slight jumping action that takes place among the tabs, a slight skip before the tab starts sliding up. So my questions a 1. how to not have any tabs open from the start. 2. how to get rid of the blue focus ring. (if you are seeing it) 3. not a big deal, but it would be nice to get rid of that skipping action so the sliding elements moved smoothly. My HTML is: Code: <div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab">DHC-3 Turbo Otter Charter Rate</div> <div class="AccordionPanelContent"> <ul> <li>Fuel included</li> <li>Rate based out of Smithers, B.C.</li> <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li> </ul> </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab">EADS Wilga 2000 Charter Rate</div> <div class="AccordionPanelContent"> <ul> <li>Fuel included</li> <li>Rate based out of Smithers, B.C.</li> <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li> </ul> </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab">Cessna 185 Charter Rate</div> <div class="AccordionPanelContent"> <ul> <li>Fuel included</li> <li>Rate based out of Smithers, B.C.</li> <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li> </ul> </div> </div> </div> My CSS is: Code: .Accordion { overflow: hidden; width: 250px; height: 250px; } .AccordionPanel { margin: 0px; padding: 0px; } .AccordionPanelTab { background-color: #000; border: thin solid #363535; margin: 0px; margin-bottom: 5px; padding: 5px 10px; cursor: pointer; font-size: 0.9em; text-transform: uppercase; -moz-user-select: none; -khtml-user-select: none; } .AccordionPanelContent { overflow: auto; margin: 0px; margin-bottom: 5px; padding: 5px 10px; border: thin solid #363535; } .AccordionPanelOpen .AccordionPanelTab { background-color: #7f0202; margin-bottom: 0; } .AccordionPanelTabHover { background-color: #7f0202; } .AccordionPanelOpen .AccordionPanelTabHover { color: #555555; } .AccordionFocused .AccordionPanelTab { } .AccordionFocused .AccordionPanelOpen .AccordionPanelTab { } And my JS is: Code: var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {}; Spry.Widget.Accordion = function(element, opts) { this.element = this.getElement(element); this.defaultPanel = 0; this.hoverClass = "AccordionPanelTabHover"; this.openClass = "AccordionPanelOpen"; this.closedClass = "AccordionPanelClosed"; this.focusedClass = "AccordionFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.currentPanel = null; this.animator = null; this.hasFocus = null; this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP; this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN; this.useFixedPanelHeights = true; this.fixedPanelHeight = 0; Spry.Widget.Accordion.setOptions(this, opts, true); this.attachBehaviors(); }; Spry.Widget.Accordion.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.Accordion.prototype.addClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.Accordion.prototype.removeClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps) { if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; } }; Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel) { if (panel) this.addClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel) { if (panel) this.removeClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex) { var panelA = this.currentPanel; var panelB; if (typeof elementOrIndex == "number") panelB = this.getPanels()[elementOrIndex]; else panelB = this.getElement(elementOrIndex); if (!panelB || panelA == panelB) return null; var contentA = panelA ? this.getPanelContent(panelA) : null; var contentB = this.getPanelContent(panelB); if (!contentB) return null; if (this.useFixedPanelHeights && !this.fixedPanelHeight) this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { if(contentA) { contentA.style.display = "none"; contentA.style.height = "0px"; } contentB.style.display = "block"; contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto"; } if(panelA) { this.removeClassName(panelA, this.openClass); this.addClassName(panelA, this.closedClass); } this.removeClassName(panelB, this.closedClass); this.addClassName(panelB, this.openClass); this.currentPanel = panelB; return panelB; }; Spry.Widget.Accordion.prototype.closePanel = function() { // The accordion can only ever have one panel open at any // give time, so this method only closes the current panel. // If the accordion is in fixed panel heights mode, this // method does nothing. if (!this.useFixedPanelHeights && this.currentPanel) { var panel = this.currentPanel; var content = this.getPanelContent(panel); if (content) { if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { content.style.display = "none"; content.style.height = "0px"; } } this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.currentPanel = null; } }; Spry.Widget.Accordion.prototype.openNextPanel = function() { return this.openPanel(this.getCurrentPanelIndex() + 1); }; Spry.Widget.Accordion.prototype.openPreviousPanel = function() { return this.openPanel(this.getCurrentPanelIndex() - 1); }; Spry.Widget.Accordion.prototype.openFirstPanel = function() { return this.openPanel(0); }; Spry.Widget.Accordion.prototype.openLastPanel = function() { var panels = this.getPanels(); return this.openPanel(panels[panels.length - 1]); }; Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel) { if (panel != this.currentPanel) this.openPanel(panel); else this.closePanel(); if (this.enableKeyboardNavigation) this.focus(); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.onFocus = function(e) { this.hasFocus = true; this.addClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.prototype.onBlur = function(e) { this.hasFocus = false; this.removeClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.KEY_UP = 38; Spry.Widget.Accordion.KEY_DOWN = 40; Spry.Widget.Accordion.prototype.onKeyDown = function(e) { var key = e.keyCode; if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true; var panels = this.getPanels(); if (!panels || panels.length < 1) return false; var currentPanel = this.currentPanel ? this.currentPanel : panels[0]; var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling; while (nextPanel) { if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */) break; nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling; } if (nextPanel && currentPanel != nextPanel) this.openPanel(nextPanel); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel) { if (!panel) return; var tab = this.getPanelTab(panel); if (tab) { var self = this; Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false); } }; Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {} }; Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) { var content = this.getPanelContent(panel); if (isDefault) { this.currentPanel = panel; this.removeClassName(panel, this.closedClass); this.addClassName(panel, this.openClass); // Attempt to set up the height of the default panel. We don't want to // do any dynamic panel height calculations here because our accordion // or one of its parent containers may be display:none. if (content) { if (this.useFixedPanelHeights) { // We are in fixed panel height mode and the user passed in // a panel height for us to use. if (this.fixedPanelHeight) content.style.height = this.fixedPanelHeight + "px"; } else { // We are in variable panel height mode, but since we can't // calculate the panel height here, we just set the height to // auto so that it expands to show all of its content. content.style.height = "auto"; } } } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); if (content) { content.style.height = "0px"; content.style.display = "none"; } } this.attachPanelHandlers(panel); }; Spry.Widget.Accordion.prototype.attachBehaviors = function() { var panels = this.getPanels(); for (var i = 0; i < panels.length; i++) this.initPanel(panels[i], i == this.defaultPanel); // Advanced keyboard navigation requires the tabindex attribute // on the top-level element. this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex")); if (this.enableKeyboardNavigation) { var self = this; Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false); } }; Spry.Widget.Accordion.prototype.getPanels = function() { return this.getElementChildren(this.element); }; Spry.Widget.Accordion.prototype.getCurrentPanel = function() { return this.currentPanel; }; Spry.Widget.Accordion.prototype.getPanelIndex = function(panel) { var panels = this.getPanels(); for( var i = 0 ; i < panels.length; i++ ) { if( panel == panels[i] ) return i; } return -1; }; Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function() { return this.getPanelIndex(this.currentPanel); }; Spry.Widget.Accordion.prototype.getPanelTab = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[0]; }; Spry.Widget.Accordion.prototype.getPanelContent = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[1]; }; Spry.Widget.Accordion.prototype.getElementChildren = function(element) { var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children; }; Spry.Widget.Accordion.prototype.focus = function() { if (this.element && this.element.focus) this.element.focus(); }; Spry.Widget.Accordion.prototype.blur = function() { if (this.element && this.element.blur) this.element.blur(); }; ///////////////////////////////////////////////////// Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts) { this.timer = null; this.interval = 0; this.fps = 60; this.duration = 500; this.startTime = 0; this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition; this.onComplete = null; this.panel = panel; this.panelToOpen = accordion.getElement(panel); this.panelData = []; this.useFixedPanelHeights = accordion.useFixedPanelHeights; Spry.Widget.Accordion.setOptions(this, opts, true); this.interval = Math.floor(1000 / this.fps); // Set up the array of panels we want to animate. var panels = accordion.getPanels(); for (var i = 0; i < panels.length; i++) { var p = panels[i]; var c = accordion.getPanelContent(p); if (c) { var h = c.offsetHeight; if (h == undefined) h = 0; if (p == panel && h == 0) c.style.display = "block"; if (p == panel || h > 0) { var obj = new Object; obj.panel = p; obj.content = c; obj.fromHeight = h; obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0; obj.distance = obj.toHeight - obj.fromHeight; obj.overflow = c.style.overflow; this.panelData.push(obj); c.style.overflow = "hidden"; c.style.height = h + "px"; } } } }; Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.Widget.Accordion.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer); // If we're killing the timer, restore the overflow // properties on the panels we were animating! for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; obj.content.style.overflow = obj.overflow; } } this.timer = null; }; Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime; var i, obj; if (elapsedTime >= this.duration) { for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; if (obj.panel != this.panel) { obj.content.style.display = "none"; obj.content.style.height = "0px"; } obj.content.style.overflow = obj.overflow; obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto"; } if (this.onComplete) this.onComplete(); return; } for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); obj.content.style.height = ((ht < 0) ? 0 : ht) + "px"; } var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Thank you very much to whomever can help. and by the way I have no knowledge in javascript. Alex Hello all! I am hoping for some coding help as I have been trying to figure out my problem for a couple of days without resolve. I am new to Javascript so this is just test code that eventually will go into a larger project. Here goes: I have a form that initially creates two select boxes. The 2nd select box option values are determined onchange of the first boxes value using mysql to pull the data from a database. That all works fine. I also have an add button that adds a second set of select boxes dynamically and assigns names and values, etc. This also works fine. My goal is to have the 2nd set of select boxes act the same as the first so that when an option is chosen in the first box the 2nd dynamically populates. This does not work. The first box is created fine but when it tries to create the values in the 2nd from an onchange event I have a problem. This is the code that returns a valid object with the first set of select boxes but is null with the 2nd set. Code: var selbox = document.getElementById(exep); The entire piece of spaghetti code is below. Any help is appreciated. Please be nice as I am still trying to figure out this Javascript stuff. Thanks for any help... Code: <html> <head> <title>Workout testing</title> <SCRIPT language="javascript"> function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> <script language="javascript"> function setOptions(chosen, form_num) { var musc = "musc_"+form_num; var exep = "exep_"+form_num; //var str = ''; // var elem = document.getElementById('form1').elements; // for(var i = 0; i < elem.length; i++) // { // str += "<b>Type:</b>" + elem[i].type + "  "; // str += "<b>Name:</b>" + elem[i].name + " "; // str += "<b>Value:</b><i>" + elem[i].value + "</i> "; // str += "<BR>"; // } // document.getElementById('lblValues').innerHTML = str; var selbox = document.getElementById(exep); selbox.options.length = 0; if (chosen == "0") { selbox.options[selbox.options.length] = new Option('First select a muscle group','0'); } <? $car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); while(@($c=mysql_fetch_array($car_result))) { ?> if (chosen == "<?=$c['muscle'];?>") { <? $c_id = $c['muscle']; ; $mod_result = mysql_query("SELECT exercise FROM work_exercise WHERE muscle='$c_id'") or die('Something is wrong: ' . mysql_error()); while(@($m=mysql_fetch_array($mod_result))) { ?> selbox.options[selbox.options.length] = new Option('<?=$m['exercise'];?>','<?=$m['exercise'];?>'); <? } ?> } <? } ?> } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>create DOM table</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function makeTable() { //give the new table unique name var form_num = document.getElementsByTagName("table").length; row=new Array(); cell=new Array(); row_num=1; //edit this value to suit cell_num=6; //edit this value to suit tab=document.createElement('table'); var table_id = 'newtable_'+form_num; tab.setAttribute('id',table_id); tbo=document.createElement('tbody'); for(c=0;c<row_num;c++){ row[c]=document.createElement('tr'); for(k=0;k<cell_num;k++) { cell[k]=document.createElement('td'); //cont=document.createTextNode((c+1)*(k+1)) //cell[k].appendChild(cont); row[c].appendChild(cell[k]); } tbo.appendChild(row[c]); } tab.appendChild(tbo); document.getElementById('mytable').appendChild(tab); changeBorder(table_id, form_num); } function changeBorder(table_id, form_num){ document.getElementById(table_id).border="1"; pop_cells(table_id, form_num); } function pop_cells(table_id, form_num) { var table = document.getElementById(table_id); var colCount = table.rows[0].cells.length; //create the first checkbox var selcheck = document.createElement("input"); selcheck.type = "checkbox"; selcheck.name = "chk[]"; //create the first select box var selbox = document.createElement("select"); var musc_opt = "musc_"+form_num; selbox.name = "musc_"+form_num; selbox.id = "id_"+form_num; //var test_ops = javascript:setOptions(document.form1.'+musc_opt+'.options [document.form1.'+musc_opt+'.selectedIndex].value,'+selbox.name+'); //selbox.setAttribute("onchange", function(){setOptions(test_ops);}); selbox.onchange = function(){setOptions(this.value,form_num);}; selbox.options[selbox.options.length] = new Option('Select a muscle group','0'); <? $car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); while(@($c=mysql_fetch_array($car_result))) { ?> selbox.options[selbox.options.length] = new Option('<?=$c['muscle'];?>','<?=$c['muscle'];?>'); <? } ?> //create the 2nd select box var selbox2 = document.createElement("select"); selbox2.name = "exep_"+form_num; selbox2.id = "id_"+form_num; selbox2.size = "1"; selbox2.options[selbox2.options.length] = new Option('First select a muscle group','0'); //<? //$car_result = mysql_query("SELECT exercise FROM work_exercise") or die('Something is wrong: ' . mysql_error()); //while(@($c=mysql_fetch_array($car_result))) { //?> // selbox2.options[selbox2.options.length] = new Option('<?=$c['exercise'];?>','<?=$c['exercise'];?>'); //<? //} //?> var target0 = table.rows[0].cells[0]; var target1 = table.rows[0].cells[1]; var target2 = table.rows[0].cells[2]; // fire target1.appendChild(selcheck); target1.appendChild(selbox); target1.appendChild(selbox2); } </script> </head> <body> <form name="form1"><div align="center"> <INPUT type="button" value="Add Row" onclick="makeTable()" /> <INPUT type="button" value="Delete Row" onclick="javascript:deleteRow(this)" /> <TABLE id="newtable" width="350px" border="1"> <TR><TD><INPUT type="checkbox" name="chk[]"/></TD> <td><select name="musc_0" size="1" onchange="javascript:setOptions(document.form1.musc_0.options [document.form1.musc_0.selectedIndex].value, 0);"> <option value="0" selected>Select a muscle group</option> <? $result = mysql_query("SELECT * FROM work_muscle") or die(mysql_error()); while(@($r=mysql_fetch_array($result))) { ?> <option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option> <? } ?> </select></td> <td> <select name="exep_0" size="1"> <option value=" " selected>First select a muscle group</option> </select></td></tr> </div></table><div id="mytable"></div><div id="lblValues"></div> </form> </body> </html> is there any way to set the path that is dynamically obtained in javascript to the <file> field in html form...???
something like this ( java ) http://www.jgraph.com/layout.html hello, i am writing a script that will update a dropdown list based on the selection of a previous list. the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script. the hierachy is: category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead) everything works correctly, except for one major issue: you can not change the selection of the third (brand) box this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help. here is an example script, sorry it is so long Code: <script language="javascript"> function fillprodCat(){ // this function is used to fill the category list on load addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories"); } function SelectprodSubCat(){ // on selection of category, this is called removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects"); } } function SelectprodBrand(){ // ON selection of category, sub category, or brand this is called removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries"); } } } function removeAllOptions(selectbox) { var i; for(i=selectbox.options.length-1;i>=0;i--) { //selectbox.options.remove(i); selectbox.remove(i); } } function addOption(selectbox, value, text ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } </script> please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up |