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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    firefox blocking content behind a hidden floating-over div

    Dear all,

    I am trying to have a mail-me form on a web page that is hidden at first, but when a user clicks on a link, it appears over some content. However, even when it's hidden, i cannot click any hyperlinks nor select text "behind" it. The site i am talking about is http://www.enlighter.org and the form can be visible if you click on "[+ Add Your News]". This happens only in Firefox - in IE it works ok.


    I am sending you the code as well:

    HTML part:
    <div id='addnews'>
    <A HREF='javascript:toggleLayer(0)' > [+Add Your News]</A>

    <div id='addnewswindow'>
    <form action='";

    <?php bloginfo('template_url');
    echo "/sendEmail.php"; ?>

    method='post'
    enctype='multipart/form-data' name='addNews'>
    <div id='articledata'>
    <p>Image: <br/><input class='addform' type='file' name='filename'></p>
    <p>Title:<br/> <input class='addform' type='text' id='title' name='title' onkeydown='javascript:changeText(this)'></p>
    <p> Description:<br/> <textarea input class='addform' id='desc' name='desc' onkeydown='javascript:changeText(this)' cols='30' rows='26'></textarea></p>
    </div><div id='topright'>Place for the image</div>
    <div id='personaldata'>
    <p>Your name:<br/> <input class='addform' type='text' name='name'></p>
    <p>E-mail: <br/><input class='addform' type='text' name='email'></p>
    <p>Website:* <br/><input class='addform' type='text' name='website'></p>
    <div id='addformtext'>Enlighter thanks You for Your interest in contributing to the Lighting Design Community. As a small token of our gratitute we will publish Your profile with full contact details if You send us 3 News Items.</div>
    <p align='right'><input class='addform' type='submit' name='Submit' value='Submit'></p>
    </div>
    </form>

    </div>
    </div>


    <script type='text/javascript'>
    addNewsWindow=document.getElementById('addnewswindow');
    addNewsWindow.style.display='none';
    </script>";

    CSS part:
    #addnews{
    width:453px;
    text-align:right;
    padding-top:6px;
    margin-right:5px;
    height:570px;
    position:absolute;
    left:152px;

    }

    #addnews a {
    font-size:12px;
    }

    #addnewswindow{
    text-align:left;
    height:545px;
    width:457px;
    margin-top:10px;
    background:#FFFFFF;
    border:1px solid #000000;
    font-weight:bold;

    }

    #articledata{
    width:45%;
    height:100%;
    float:left;
    background-color:#FFCCFF;

    }
    #topright {

    float:right;
    width:50%;
    height:250px;
    background-color:#66FF00;
    }

    #personaldata{
    width:50%;
    float:right;
    height:50%;
    background-color:#99FFFF;


    }

    Javascript:
    function toggleLayer( formNumber ){
    addFormText=document.getElementById("addformtext");
    if(formNumber==0){
    addFormText.innerHTML="Enlighter thanks You for Your interest in contributing to the Lighting Design Community. As a small token of our gratitute we will publish Your profile with full contact details if You send us 3 News Items.";
    }else{
    addFormText.innerHTML="Please fill out and submit the following form and we will contact you shortly to provide other materials";
    }
    whichLayer="addnewswindow";
    var elem, vis;
    if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
    else if( document.all ) // this is the way old msie versions work
    elem = document.all[whichLayer];
    else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
    vis = elem.style;

    // if the style.display value is blank we try to figure it out here
    if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
    vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }


    Thank you so much for Your answers

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Works for me both with IE7 and Firefox2.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Are you sure? You can click on the second, third and fourth image in the top row? Currently these are 2posts from "Lightfair" and one from "Masterplan Vienna". I checked on several computers with firefox 2.0.0.14 and it works on none.

    Please let me know and thank you,
    Mitja

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Well,

    I see what you mean now. I must have been asleep. It is the pictures at the top row as you have already said. Sorry for that. I'll have a look at the code to see if I can help.

    There are many validation errors that you should look at. They are all in the mark-up.

    http://validator.w3.org/check?uri=ht...Inline&group=0

    Frank
    Last edited by effpeetee; 05-12-2008 at 03:08 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sorry, but I have not been able to solve this. I'll have to leave it to better men than I.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mitjaprelovsek View Post
    However, even when it's hidden, i cannot click any hyperlinks nor select text "behind" it. The site i am talking about is http://www.enlighter.org and the form can be visible if you click on "[+ Add Your News]". This happens only in Firefox - in IE it works ok.
    Try adding the code shown below to your style sheet. It should make the problem more apparent.

    Code:
    #addnews { background: red; }
    #addnews * { background: yellow; }
    Some browsers, such as Internet Explorer and Opera, will allow you to select elements behind transparent or translucent elements. Unfortunately, I can’t say that I know why.

    Anyway, you can use a tool such as the Web Developer extension for Firefox to troubleshoot these kind of issues more easily. I just used the Information: Display Element Information (Ctrl+Shift+F) item from the Web Developer extension toolbar, moused over the affected area, then clicked it to get the ID of the element causing the issue. Then I used CSS: Edit CSS (Ctrl+Shift+E) to test the CSS shown above.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    mitjaprelovsek (05-12-2008)

  • #7
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thankx for all the suggested!

    I added the code you suggested and now it doesn't workin IE either - any suggestions?


    Thanx again and please keep trying.
    Mitja P

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mitjaprelovsek View Post
    I added the code you suggested and now it doesn't workin IE either - any suggestions?
    In case I wasn’t clear enough, the CSS that I provided was meant to make the source of the issue obvious so that you could rewrite your code to fix it. It was not meant to be a final solution.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I solved the issue (I wasn't able to try it before). It seems that the problem was that the addnews div shouldnt CONTAIN the hidden div addnewswindow. I closed the addnews window before the addnewswindow div tag.

    Thanks again
    Mitja


  •  

    Posting Permissions

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