SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru
    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

  2. #2
    Non-Member
    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

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BBoardX View Post
    Why are you using code for internet explorer 4 and (i asume NS6 is netscape 6) netscape? No one uses them
    I collected it from the internet.

    It works terrifically why not.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  5. #5
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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();
    });
    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 ?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runrunforest View Post
    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 ?
    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

  7. #7
    SitePoint Guru
    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 ?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  9. #9
    SitePoint Guru
    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&#37;;
    	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&#225;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

  10. #10
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can jquery do everything that javascript can?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  12. #12
    SitePoint Wizard bronze trophy
    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?
    Jquery is a javascript framework not a separate language. In that respect jquery normalizes and provides a host of functions for common tasks. Anything you can accomplish with it could be accomplished without it – given you create the functionality rather then relying on jquery.

  13. #13
    SitePoint Guru
    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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  15. #15
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what should i place in that ... ?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  17. #17
    SitePoint Guru
    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>'

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  19. #19
    SitePoint Guru
    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

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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 newEl
    Last 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

  21. #21
    SitePoint Guru
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •