Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 9th, 2006, 10:31 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default show div over top of selects (drop downs)

I have drop down menus on my page.

When I mouseover an image a floating DIV appears at the foot of the screen.

However, the <selects> dropdowns show through the div when the div is positioned over the selects????

Is there a way to have the div appear over the dropdowns, without hiding the drop downs???

Thanks.
Picco

www.crmpicco.co.uk
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
Reply With Quote
  #2 (permalink)  
Old February 9th, 2006, 11:17 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

To solve the problem in IE, you can create an iframe in the same position as your div with opacity of 0 using a filter. This will hide the part of the select box that would normally show through.

HTH,

Chris


Reply With Quote
  #3 (permalink)  
Old February 9th, 2006, 11:27 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

im not overly sure what you mean chris,this is the CSS i am using
Code:
.demo {color:#000000; border-color:#666666; background-color:<%=minirules%>; font-family:Verdana, Arial, Helvetica, sans-serif;    font-weight:bold; layer-background-color:#cccccc; position:absolute; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
The div is always positioned at the foot of the page, should the selects be wrapped in a DIV?

Thanks.

Picco

www.crmpicco.co.uk
Reply With Quote
  #4 (permalink)  
Old February 9th, 2006, 12:11 PM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

This should get you started...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>div over select</title>
        <style type="text/css">
        #myDiv, #myIframe{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        #myDiv{
            background-color: lightgrey;
            z-index: 10;
        }
        #myIframe{
            filter: "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";
            z-index: 9;
        }
        #mySelect{
            width: 300px;
            height: 200px;
        }
        </style>
    </head>
    <body>

    <form>
        <select id="mySelect" multiple="multiple"></select>
    </form>


    <div id="myDiv">some text</div>
    <iframe id="myIframe"></iframe>

    </body>
</html>
HTH,

Chris

Reply With Quote
  #5 (permalink)  
Old February 10th, 2006, 05:21 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

thanks chris, i'll give it a try.
so you are saying put the iframe underneath my div?

www.crmpicco.co.uk
Reply With Quote
  #6 (permalink)  
Old February 10th, 2006, 05:40 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hi Picco,

Yep, exactly that - it obscures the select element and using a filter on it stops it showing through your div.

Cheers,

Chris

Reply With Quote
  #7 (permalink)  
Old February 10th, 2006, 06:23 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

ok, when you say obscure you mean it is not actually hidden? the div is just shown on top of it?

www.crmpicco.co.uk
Reply With Quote
  #8 (permalink)  
Old February 10th, 2006, 06:31 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Yep, try the example, it shows the div over a select element without hiding the select element.

Reply With Quote
  #9 (permalink)  
Old February 10th, 2006, 06:56 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

great, i am working on a bit of database work at the mo, but will get back to it

www.crmpicco.co.uk
Reply With Quote
  #10 (permalink)  
Old February 13th, 2006, 12:29 PM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

a new problem i am experiancing is that because the DIV is built dynamically the height changes, sometimes it is 100px sometimes is is 300px?? So is there a way to make the CSS dynamic?

www.crmpicco.co.uk
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Drop downs - 2 col socoolbrewster CSS Cascading Style Sheets 5 December 22nd, 2007 05:32 AM
dealing with drop downs lisabb ASP.NET 2.0 Basics 5 May 28th, 2007 12:29 AM
dependent drop downs p2pMember ASP.NET 1.0 and 1.1 Professional 0 July 19th, 2006 05:25 AM
Day of week Drop Downs jeffbarclay Javascript How-To 5 November 17th, 2003 08:28 PM



All times are GMT -4. The time now is 02:53 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.