473,287 Members | 1,492 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

dropdown menu over text

jw
I would like for users to be able to select from a small number of options
that come from a little drop down menu which then closes.

http://www.geocities.com/jweinberg19...on_text00.html

the thing is that I don't want for the whole space in the paragraph to be
empty. I just need for the little menu to show and then go away without
disturbing the text and/or other HTML around it

After the user makes a selection it should just nicely close.

Also I can't figure out how to make the menu close if the user does not make
an selection for a period of time

how could you do this?

J

Mar 28 '06 #1
4 1373
I forgot to say that in order to see the behavior you should "mouseover"
the white-on-black text segment that says "omnis dolor repellend"
..
Thanks
jw

Mar 28 '06 #2
I forgot to say that in order to see the behavior you should "mouseover"
the white-on-black text segment that says "omnis dolor repellend"
..
Thanks
jw

Mar 28 '06 #3
sorry for the spamming. I use knoppix for developing and KNode was telling
me the messages weren't posted without an error message.
..
jw
Mar 28 '06 #4
For this, you have to use the style attributes and
z-index attributes of HTML objects. Also, to
automatically hide a popup after some time, you can
use "window.setTimeout" ....

Given below is a sample html code:

Just have a look at the style attribute of "popup_div"
and also the function "autoHidePopupAfter".

Hope this helps.

-Venkatesh

HTML
---------

<html>
<head>
<title>Test script showing a popup</title>
<script>

function isDomObjDisplayed(domObj){
if (domObj != null) {
return(domObj.style.display != 'none');
}
return(false);
}

function showDomObj(domObj){
domObj.style.display='';
}

function hideDomObj(domObj){
domObj.style.display='none';
}

function findPosX(obj) {
var curleft = -1;
if (obj != null) {
curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
}
return curleft;
}

function findPosY(obj) {
var curtop = -1;
if (obj != null) {
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
}
return curtop;
}

function showPopup(popupX, popupY, popupObj) {
if (popupObj != null) {
popupObj.style.top = popupY;
popupObj.style.left = popupX;
showDomObj(popupObj);
}
}

function hidePopup(popupObj){
if (popupObj != null) {
hideDomObj(popupObj);
}
}

function showHidePopupBelow(titleId, popupId){
var titleDomObj = document.getElementById(titleId);
if (titleDomObj != null) {
var popupX = findPosX(titleDomObj);
var popupY = findPosY(titleDomObj) +
titleDomObj.offsetHeight;

var popupObj = document.getElementById(popupId);
if (!isDomObjDisplayed(popupObj)) {
showPopup(popupX, popupY, popupObj);
} else {
hidePopup(popupObj);
}
}
}

function autoHidePopupAfter(popupId, time){
var popupObj = document.getElementById(popupId);
if (isDomObjDisplayed(popupObj)){
window.setTimeout(("hidePopupWithId('" + popupId +
"')"), time);
}
}

function hidePopupWithId(popupId) {
var popupObj = document.getElementById(popupId);
hidePopup(popupObj);
}

function setSelectedPopupItem(spanId, selectedItemText){
var span = document.getElementById(spanId);
if (span != null) {
span.innerHTML = selectedItemText;
}
}

</script>
</head>
<body>

<div><span><b>Previously selected value: </b></span><span
id="prevSelection"></span>
<a href="javascript:showHidePopupBelow('popup_title_d iv'
,
'popup_div');autoHidePopupAfter('popup_div', 5000);">
<div id="popup_title_div" onclick="">
Popup...
</div>
</a>
<div>More text....</div>
<div id="popup_div" style="border: 1px; border-style: solid;
position: absolute; top: 100px; left:
200px;display: none;
z-index: 1; background-color: white;">
<table style="width: 75px;">
<tr>
<td>
<div
onclick="javascript:setSelectedPopupItem('prevSele ction', 'Item
1');hidePopupWithId('popup_div');">
Item 1
</div>
</td>
</tr>
<tr>
<td>
<div
onclick="javascript:setSelectedPopupItem('prevSele ction', 'Item
2');hidePopupWithId('popup_div');">
Item 2
</div>
</td>
</tr>
<tr>
<td>
<div
onclick="javascript:setSelectedPopupItem('prevSele ction', 'Item
3');hidePopupWithId('popup_div');">
Item 3
</div>
</td>
</tr>
</table>
</div>

</body>
</html>

Mar 28 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: middletree | last post by:
For an ASp Intranet app, I have some code that should work, but I am not able to make it happen for some reason, after spending considerable time on this. I am pretty thick when it comes to...
1
by: Mosher | last post by:
Hi all, I am looking for some event handler auto-calc help on a form that takes user input through text fields and dropdown menus. I would like some of the text fields to be auto populated when...
4
by: Tim | last post by:
Hi, I've been searching the web for hours now and found lots and lots of javascript files with which you can create dropdown menu's, but with all of them you have to specify the width of the...
1
by: GatorBait | last post by:
Hi all, I'm using the new ToolStrip control in a project and I'm running into a problem that I'm hoping someone can help me with. I am building the toolstrip in code by adding buttons,...
6
by: nishac | last post by:
Can anyone suggest me how to make my drop down menu work in IE7 too.Its working in other browsers.On mouse over the submenus should be displayed.Am attaching my css code hereby.Anyone please check...
4
torquehero
by: torquehero | last post by:
Hi all :) I have created a horizontal navbar using Xara Menumaker. The Menu items have several dropdown menus. Its a javascript. When the mouse cursor is moved over any menu item, a dropdown...
1
by: William Youngman | last post by:
I have a gridview displaying data and would like to use the AJAX dropdown extender so that when the user clicks on a record a dropdown menu will display providing the user with a menu of selections...
1
by: Aad vd Naad | last post by:
Hi, I have create a dropdown menu which looks as expected in Safari (Mac). Viewing it in FF (Mac) or IE6 (Windows) it's a bit messed up. It also seems that when the top level links are clicked...
1
SHOverine
by: SHOverine | last post by:
Recently my web host decided to "upgrade". This change rendered many of my pages useless and I am scrambling to fix the issues, so you may see several posts from me in the coming days. My first...
19
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.