Need help finishing this pop up code

[andrewliu]

Hello,

I'm trying to create a list of categories and have a link with "more categories" and when a user clicks on it, a div table pop up will show. So far I've hidden a div tag and had it show and close if a user clicks on the link. But its not a pop up. I was wondering if anyone can help me modify my code where it will pop up. But also, be able to drag the pop up from the top of the table.

Here is what I have so far.

<script type="text/javascript">
  function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
document.getElementById(div).style.display='none';
return false
}</script>

<a href="#" onclick="return pop('pop1');">more...</a>

<a href="#" onClick="return hide('pop1')">Close</a>

thanks

[almostbob]

the element you wish to show can be styled a layer, in css with a higher z-index than the underlying text it will appear floating over it

div is not a good descriptor for your function, it is a reserved word and may cause problems, the functions are ok

/* css possibility for hidden elements, can also style them relatively or absolutely or fixed positioning to make them appear in particular place */
#pop { display:none; z-index:10; }

[andrewliu]

hmm i set it to z-index:100 and position:absolute. It looks great as I wanted, but it doesn't allow me to move it around. How do I create a moveable bar like the one in yelp.com: http://www.yelp.com/search?find_desc=restaurants&ns=1&find_loc=los+angeles

If you click on one of the "more..." listings in the refining search, a pop up will show and you can move it around.

Thanks

[almostbob]

jquery and mootools scripts have that functionality, you may as well examine them as try to code it from scrathc