CSS dropdowns

Discussion in 'JavaScript' started by Arnold9000, Feb 15, 2007.

0
  1. #1
    I'm doing a CSS onMouseOver dropdown. Normally, I would absolutely position the dropdown that becomes visible on the onMouseOver event, but I cannot because all of the content is center aligned, and therefore the x position of the x, y will change based on the window size (y will not change). Do I use some sort of relative positioning instead? Any suggestions would be great. Thanks.
     
    Arnold9000, Feb 15, 2007 IP
  2. rays

    rays Active Member

    Messages:
    563
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #2
    there are lot of ways to do ... it will be good idea if you post a code snippet ... then people can provide you good help
     
    rays, Feb 16, 2007 IP
  3. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Okay, thanks. Here goes.

    <script src="findDOM.js"></script>

    //findDOM works, returns DOM of an object, additional arg of 1 means with style, no need to pay attention


    <script language="javascript"> //manages swapping in and out of visiblity of dropdown

    var hideit1="true";
    var hideit2="true";

    function swap_visibility(objID, num){
    var domobj = findDOM(objID, 1);
    domobj.visibility = "visible";
    if(num==1){
    hideit1 ="false";
    }
    if(num==2){
    hideit2 ="false";
    }
    }

    function reset_visible(objID, num){
    var dom = findDOM(objID, 1);
    if (hideit1 == "false" || hideit2=="false"){
    dom.visibility = "hidden";
    }
    }
    </script>

    //Linked CSS, dropdown list object


    #DrunkDriving{
    position: absolute;
    top: 114px;
    left: 176px;
    z-index: 2;
    visibility: hidden;
    }

    Calling html code

    <!--hidden html dropdown div referenced in style sheet-->

    <div id="DrunkDriving" onMouseover="swap_visibility('DrunkDriving', '2'); return true;" onMouseout= "reset_visible('DrunkDriving', '2'); return true;">
    <table cellspacing="2" cellpadding="6" border="0" bgcolor="FFFFFF">
    <tr>
    <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/criminallaw.html">Our Past Cases</a></td>
    </tr>
    <tr>
    <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/nhpenalties.asp">Penalties in NH</a></td>
    </tr>
    <tr>
    <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/mapenalties.asp">Penalties in MA</a></td>
    </tr>
    </table>
    </div>


    <!--body of html flow-->

    <body bgcolor="FFFFFF" marginheight="10" marginwidth="0" topmargin="10" leftmargin="0">
    <center>
    <!--main controller table-->
    <table cellspacing="0" cellpadding="0" border="0">

    .......unneccessary code ommited

    <!--cell that calls functions-->
    <td class="nav" onMouseover="this.className='navbright'; swap_visibility('DrunkDriving', '1'); return true;" onMouseout="this.className='nav'; reset_visible('DrunkDriving', '1'); return true;">Drunk Driving</td>

    As you can see, I have absolutely postioned the DrunkDriving object. This is fine for vertical as vertical distance from the top never changes. However, since it is a center aligned table, the horizontal postion of this object needs to change based on window size. So I either need a dynamic way to handle this, or someway to give it an offset based on the postion of the table itself, rather than give it an absolute screen offset.

    http://www.bowserlaw.com/index1.asp
     
    Arnold9000, Feb 16, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Looks like this is a harder one than I thought.
     
    Arnold9000, Feb 16, 2007 IP
  5. cvxdes

    cvxdes Peon

    Messages:
    150
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    you can always make the menu there by default, just make it hidden, and onmouseover show the div.
     
    cvxdes, Feb 18, 2007 IP
  6. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I am already doing that. The problem, is that the horizontal position of the onMouseover div changes as the window size changes.
     
    Arnold9000, Feb 20, 2007 IP