Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS multiple menu problem - might be CSS or function

    I've been racking my brain on this one. It seems like it should work. I don't know where it's hanging up.

    I'm having what I believe is a Javascript conflict between two functions. This has caused one of my two forms (a jump menu with CSS formatting) not to function properly.


    Here is the problem:

    I have two drop down menu forms.

    The first has 3 pieces:
    - a text box for user entry
    - a drop down to select a location
    - and submit button

    The first drop down menu works fine. When you click on the submit button, you are redirected to the results.php page and that works fine.


    The second form/menu seems to hang.

    It's a simple jump menu with the some of the same formatting as above. The drop down portion works fine, it just doesn't jump anywhere when you make a selection. Note: it also is formatted via the javascript and CSS. And the jump menu works by itself unformatted on it's own.



    To make it simpler, I removed all of the extra code and posted the menus on a temporary staging server:

    There is a url which has both menus:

    http://emeraldmotionwebhosting.com/t...nu/index10.php

    Here are the Javascript and CSS files:

    http://emeraldmotionwebhosting.com/t...u/myscripts.js

    http://emeraldmotionwebhosting.com/t...tylesheet1.css
    you can disregard some of the styles, as they are for other portions not relevant to the menu.

    Any help would be greatly appreciated!!

    Thanks so much!! - VN

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    The list is masking the onchange event.

    For accessibility, a submit button or image as in the first form for non-js clients might be something to consider.

    You may be able to fire the onchange from the list/options handling, but, since the selected option in the second form amounts to a link, why not just use the list instead of a form.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    the fake select code is not complete and has much redundant code but to get the same functionality as the original select

    Code:
    	function selectReplacement(obj) {
          obj.className += ' replaced';
          var ul = document.createElement('ul');
          ul.className = 'selectReplacement';
          ul.select=obj;
          var opts = obj.options;
          for (var i=0; i<opts.length; i++) {
            var selectedOpt;
            if (opts[i].selected) {
              selectedOpt = i;
              break;
            } else {
              selectedOpt = 0;
            }
          }
          for (var i=0; i<opts.length; i++) {
            var li = document.createElement('li');
            var txt = document.createTextNode(opts[i].text);
            li.appendChild(txt);
            li.selIndex = opts[i].index;
            li.selectID = obj.id;
            li.onclick = function() {
              selectMe(this);
            }
            if (i == selectedOpt) {
              li.className = 'selected';
              li.onclick = function() {
                this.parentNode.className += ' selectOpen';
                this.onclick = function() {
                  selectMe(this);
                }
              }
            }
            if (window.attachEvent) {
              li.onmouseover = function() {
                this.className += ' hover';
              }
              li.onmouseout = function() {
                this.className =
                  this.className.replace(new RegExp(" hover\\b"), '');
              }
            }
            ul.appendChild(li);
          }
          obj.parentNode.insertBefore(ul,obj);
        }
    
        function selectMe(obj) {
    obj.parentNode.select.selectedIndex=obj.selIndex
    MM_jumpMenu('parent',obj.parentNode.select,0)
          var lis = obj.parentNode.getElementsByTagName('li');
          for (var i=0; i<lis.length; i++) {
            if (lis[i] != obj) {
              lis[i].className='';
              lis[i].onclick = function() {
                selectMe(this);
              }
            } else {
              setVal(obj.selectID, obj.selIndex);
              obj.className='selected';
              obj.parentNode.className =
              obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
              obj.onclick = function() {
              obj.parentNode.className += ' selectOpen';
                this.onclick = function() {
                  selectMe(this);
                }
              }
            }
          }
        }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much! Super helpful!! What a great forum!!

    Here is another way via adding the "if line" on the bottom

    function setVal(objID, selIndex) {
    var obj = document.getElementById(objID);
    obj.selectedIndex = selIndex;
    if (obj.onchange) obj.onchange();
    }

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    as this function is not currently used plaese explain the objective.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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