SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
Thread: how to display onclick result?
-
Oct 14, 2008, 10:05 #1
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how to display onclick result?
hi,
I have a drop down menu, I want the item in the menu displays in a div tag when chosen. any one knows how ?
Code JavaScript://Contents for menu 2, and so on var menu2=new Array() menu2[0]='<a href="http://cnn.com">Singapore</a>' menu2[1]='<a href="http://msnbc.com">australia</a>' menu2[2]='<a href="http://news.bbc.co.uk">france</a>' menu2[3]='<a href="http://cnn.com">new zealand</a>' menu2[4]='<a href="http://cnn.com">england</a>' var menuwidth='162px' //default menu width var menubgcolor='white' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu
HTML Code:<div> <input type="radio" name="radio" id="radio" value="radio" /> <label for="radio">America</label> </div> <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">Change region </a>
the chosen item should appear in div above as a radio button option
-
Oct 14, 2008, 16:22 #2
- Join Date
- Oct 2008
- Location
- Banned
- Posts
- 506
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why are you using code for internet explorer 4 and (i asume NS6 is netscape 6) netscape? No one uses them
-
Oct 14, 2008, 19:43 #3
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 14, 2008, 21:35 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Why not? Because all code gets old and out of date.
This is how easy it is to do now-a-days, in this case with jquery.
If you don't want to use jquery then standard javascript isn't much more complex than what's shown.
Code javascript:$(document).ready(function () { var select = '#mySelect'; $(select).change(function () { $(select + ' option').each(function () { $('#' + this.value).hide(); }); $(selected + ' option:selected').each(function () { $('#' + this.value).show(); }); }).change(); });
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 14, 2008, 21:53 #5
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am not sure how to implement the code above correct, as i added it to the code flow, run the code, nothing changed in the div box.
I am learning php, i find that javascript is very similar to php , in my design involving pretty much java script and PHP is essential part to get my site running as intended. Should I learn javascript first instead of learning php then go back to javascript ?
-
Oct 14, 2008, 21:59 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The above code is jquery code, so you will require the jquery plugin too.
jQuery is designed to handle all of the strange quirks of the web browsers that it runs on (like most libraries out there), so that you can code in an clear and understandable manner.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 14, 2008, 22:10 #7
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
jQuery is designed to handle all of the strange quirks of the web browsers that it runs on (like most libraries out there), so that you can code in an clear and understandable manner.[/QUOTE]
so why would people still using javascript ?
-
Oct 14, 2008, 22:20 #8
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
You might as well ask why do people speak in [language] when [other-language] is so much better.
The answer to both that and your question is, because people differ.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 20, 2008, 06:03 #9
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well Paul, I am still ambiguous. You need to show me the trick.
Base on this code below can you help me to get the result of drop down menu put into the div with id="two" ?
Code CSS:#dropmenudiv { position:absolute; border:1px solid #3B5998; line-height:20px; z-index:100; text-align:left; padding:7px 0 8px 0; } #dropmenudiv a { width: 100%; display: block; text-indent: 26px; text-decoration: none; }
HTML Code:<div id="one"> <input name="radio" type="radio" id="globe" value="globe" checked="checked" /> <label for="globe">GLOBE</label> </div> <div id="two"> <input name="radio" type="radio" id="USA" value="USA" /> <label for="USA">USA</label> </div> <span class="fltlft"><a href="default2.htm" onclick="return dropdownmenu(this, event, menu2, '120px')" onmouseout="delayhidemenu()">Khu vực khác </a></span>
Code JavaScript:var menu2=new Array() menu2[0]='<a href="http://badede.com">Singapore</a>' menu2[1]='<a href="http://badede.com">England</a>' menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>' menu2[3]='<a href="http://badede.com">NewZealand</a>' var menuwidth='162px' //default menu width var menubgcolor='white' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu
-
Oct 20, 2008, 07:13 #10
- Join Date
- Oct 2008
- Location
- Banned
- Posts
- 506
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Can jquery do everything that javascript can?
-
Oct 20, 2008, 14:11 #11
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Add an event handler to the dropdown menu
Code javascript:function dropdownmenu(obj, e, menucontents, menuwidth){ ... if (ie4||ns6){ ... dropmenuobj.onclick = processDropDownMenu; } return clickreturnvalue() }
When someone clicks on one of the dropmenu links, get the name of it and add an option to the two section.
Code javascript:function processDropDownMenu(evt) { evt = evt || window.event; var targ = evt.target || evt.srcElement; addOptionToTwo(targ.innerHTML); return false; } function addOptionToTwo(name) { var el = document.getElementById('two'); el.appendChild(newLabelledInput(name)); }
When creating a lebelled input, from your current design it means returning more than one element, so we'll put them together in a document fragment that can contain multiple objects.
Code javascript:function newLabelledInput(name) { var container = document.createDocumentFragment(); var label = document.createElement('label'); var input = document.createElement('input'); var text = document.createTextNode(name); input.name = name; input.type = 'radio'; input.id = name; input.value = name; label.forName = name; label.appendChild(text); container.appendChild(input); container.appendChild(label); return container; }
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 20, 2008, 18:24 #12
- Join Date
- Jul 2006
- Location
- Augusta, Georgia, United States
- Posts
- 4,194
- Mentioned
- 17 Post(s)
- Tagged
- 5 Thread(s)
Code:Can jquery do everything that javascript can?
-
Oct 20, 2008, 20:27 #13
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
when I click on the link it leads to an error page
This is the script
Code JavaScript:var menu2=new Array() menu2[0]='<a href="http://badede.com">Singapore</a>' menu2[1]='<a href="http://badede.com">England</a>' menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>' menu2[3]='<a href="http://badede.com">NewZealand</a>' var menuwidth='162px' //default menu width var menubgcolor='white' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ dropmenuobj.onclick = processDropDownMenu; } return clickreturnvalue() } function processDropDownMenu(evt) { evt = evt || window.event; var targ = evt.target || evt.srcElement; addOptionToTwo(targ.innerHTML); return false; } function addOptionToTwo(name) { var el = document.getElementById('two'); el.appendChild(newLabelledInput(name)); } function newLabelledInput(name) { var container = document.createDocumentFragment(); var label = document.createElement('label'); var input = document.createElement('input'); var text = document.createTextNode(name); input.name = name; input.type = 'radio'; input.id = name; input.value = name; label.forName = name; label.appendChild(text); container.appendChild(input); container.appendChild(label); return container; } if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu
-
Oct 20, 2008, 21:03 #14
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Don't forget about the ... stuff after the ie4||ns6 line
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 20, 2008, 21:42 #15
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
what should i place in that ... ?
-
Oct 20, 2008, 21:49 #16
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The original code was:
Code javascript:if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" }
and I was saying to update it to
Code javascript:if (ie4||ns6){ ... dropmenuobj.onclick = processDropDownMenu; }
so that in the end it should be (have included semicolons here too)
Code javascript:if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth); dropmenuobj.x=getposOffset(obj, "left"); dropmenuobj.y=getposOffset(obj, "top"); dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"; dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"; dropmenuobj.onclick = processDropDownMenu; }
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 20, 2008, 22:03 #17
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how can i make the onlick result replace the primarily option
For instance, I click singapore in the dropdown menu, the usa will be replaced by singapore. And singapore is automatically checked. there should be no more than one onclick result applying to the div element.
I forgot to include USA in the dropmenu so the modified list code below
Code JavaScript:var menu2=new Array() menu2[0]='<a href="http://badede.com">Singapore</a>' menu2[1]='<a href="http://badede.com">England</a>' menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>' menu2[3]='<a href="http://badede.com">NewZealand</a>' menu2[4]='<a href="http://badede.com">USA</a>'
-
Oct 20, 2008, 22:24 #18
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
You would do that by emptying the contents of "two" and placing the labelled input in there instead.
I've tidied up processDropDownMenu so that the "two" element, the link text and what we're doing with them is clear.
Code javascript:function processDropDownMenu(evt) { var el = document.getElementById('two'), linkText = eventTarget(evt).innerHTML; replaceContentWithOption(el, linkText); return false; }
Getting the target element from an event is a very common piece of code, so it's out as a separate function now.
I'm actually going to add this in to my common.js library because it will be very useful there.
Code javascript:function eventTarget(evt) { evt = evt || window.event; return evt.target || evt.srcElement; }
Instead of adding an option we are now replacing the existing content. Emptying the contents of an element is also a common task so it's broken out into a separate function too. The labelled input isn't an input as such, but an option, so a name change has occured here too.
Code javascript:function replaceContentWithOption(el, name) { emptyContent(el); el.appendChild(labelledOption(name)); }
It's quite common to want to empty the contents of an element. Using a separate function here helps to remove the clutter of what's being done, so that with the previous function we can focus more clearly on the intent of what's being done instead.
Code javascript:function emptyContent(el) { while (el.hasChildNodes()) { el.removeChild(el.firstChild); } }
And to finish we have the same function as newLabelledContent, just with a different name to better respresent what the function does. This function really should be split into separate functions for creating the elements with appropriate properties, but I think that what we have here for now should do perfectly well.
Code javascript:function labelledOption(name) { var container = document.createDocumentFragment(); var label = document.createElement('label'); var input = document.createElement('input'); var text = document.createTextNode(name); input.name = 'radio'; input.type = 'radio'; input.id = name; input.value = name; label.forName = name; label.appendChild(text); container.appendChild(input); container.appendChild(label); return container; }
Last edited by paul_wilkins; Oct 21, 2008 at 14:34.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 21, 2008, 00:37 #19
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry Paul it isn't working, nothing happens when click on one of the array item.
the current script
Code JavaScript:var menu2=new Array() menu2[0]='<a href="#">Singapore</a>' menu2[1]='<a href="#">England</a>' menu2[2]='<a href="#">Australia</a>' menu2[3]='<a href="#">NewZealand</a>' menu2[4]='<a href="#">USA</a>' var menuwidth='162px' //default menu width var menubgcolor='white' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth); dropmenuobj.x=getposOffset(obj, "left"); dropmenuobj.y=getposOffset(obj, "top"); dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"; dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"; dropmenuobj.onclick = processDropDownMenu; } function processDropDownMenu(evt) { var el = document.getElementById('two'), linkText = getEventTarget(evt).innerHTML; replaceContentWithOption(el, linkText); return false; } function getEventTarget(evt) { evt = evt || window.event; return evt.target || evt.srcElement; } function replaceContentWithOption(el, name) { emptyContent(el); el.appendChild(newLabelledInput(name)); } function emptyContent(el) { while (el.hasChildNode()) { el.removeChild(el.firstChild); } } function newLabelledInput(name) { var container = document.createDocumentFragment(); var label = document.createElement('label'); var input = document.createElement('input'); var text = document.createTextNode(name); input.name = name; input.type = 'radio'; input.id = name; input.value = name; label.forName = name; label.appendChild(text); container.appendChild(input); container.appendChild(label); return container; } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu
-
Oct 21, 2008, 17:34 #20
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
First there was a spelling mistake, for which I apologize. hasChildNode should be hasChildNodes
Second, my testing so far has just been on Firefox, and when I looked at things on IE I saw just how horrible IE is as manipulating forms. Needless to say, there are some issues with IE that need to resolved.
When IE adds radio buttons to the page it sees them as belonging to a separate group, even though they have the same name as the other radio buttons. The problem that this causes is that you will have two radio options, both of which will be selected, which is a bad idea.
The solution to this comes from a blog posting called IE DOM Bugs which takes you through how to do things in a special IE only way, and if that fails to then do it in a more compatible way for other browsers.
First of all though here's the updated processDropDownMenu function
Code javascript:function processDropDownMenu(evt) { var el = document.getElementById('two'), linkText = getEventTarget(evt).innerHTML, option = labelledOption('radio', linkText); replaceContent(el, option); selectRadio(el); return false; }
The getEventTarget, replaceContent and emptyContent functions remain unchanged
Code javascript:function getEventTarget(evt) { evt = evt || window.event; return evt.target || evt.srcElement; } function replaceContent(el, content) { emptyContent(el); el.appendChild(content); } function emptyContent(el) { while (el.hasChildNodes()) { el.removeChild(el.firstChild); } }
And now we get to where the big changes occur.
To simplify things I've used separate createLabel and createInput functions, because when creating form elements we should use the techniques from that blog posting so that IE doesn't have a heart attack on us.
Code javascript:function labelledOption(name, value) { var container = document.createDocumentFragment(); var label = createLabel({'text': value, 'for': value}); var input = createInput({'name': 'radio', 'id': value, 'value': value}); var text = document.createTextNode(value); container.appendChild(input); container.appendChild(label); return container; } function createLabel(args) { var label = document.createElement('label'); label.appendChild(document.createTextNode(args.text)); label.htmlFor = args['for']; return label; } function createInput(args) { var input = createFormElement('input', args.name); setElementType(input, 'radio'); input.id = args.id; input.value = args.value; return input; }
The createElement function uses the techniques from the blog posting about IE DOM bugs. Unfortunately this is necessary to keep IE happy, but hopefully you can tell from the above coding structure that we've tried to hide the ugly parts away as best as possible.
Code javascript:function createFormElement(tag, name) { var el = null; try { el = createIEElement(tag, name); } catch (e) { el = createDOMElement(tag, name); } return el; } function createIEElement(tag, name, type) { var args = [tag]; if (name) { args[args.length] = 'name="' + name + '"'; } if (type) { args[args.length] = 'type="' + type + '"'; } return document.createElement('<' + args.join(' ') + '>'); } function createDOMElement(tag, name, type) { var el = document.createElement(tag); el.type = type; el.name = name; return el; }
It's not over yet though, because we still need to tell the form object what type it is (a radio button) without causing IE to fall over either. Here's the code for that.
Code javascript:function setElementType(el, type) { var newEl; var name; try { el.setAttribute('type', type); } catch (e) { newEl = null; name = el.getAttribute('name'); try { newEl = createElement('input', name, type); } catch (e) {} if (!newEl) { newEl = document.createElement('input'); newEl.setAttribute('type', type); newEl.setAttribute('name', name); } if (tempStr = element.getAttribute('value')) { newEl.setAttribute('value', name); } el.parentNode.replaceChild(newEl, el); } }
And finally, now that we have a form element that IE is capable of working with, we can select it. Because it's the only input element inside the "two" element, we can just click on the first input element.
Code javascript:function selectRadio(el) { el.getElementsByTagName('input')[0].click(); }
Sorry for the trouble there. IE causes many headaches and hassles, but this one where we are dealing with dynamically created radio or checkbox elements is one of the hardest to bang your head against.
Edit: in setElementType function an old reference to newElement renamed to newElLast edited by paul_wilkins; Oct 22, 2008 at 16:04.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Oct 22, 2008, 10:54 #21
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah, its really banging my head eventhough i am just resembling the code block
But its absolutely brilliant. It works perfectly in IE.
You're genius, Paul.
Bookmarks