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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Changing style through DOM causes overlap of floating object

    So I have this:

    Code:
    <div style="position:fixed;bottom:-35px; right:-25px; background-color:white; border:2px solid blue; padding:15px 35px 35px 15px; border-radius:25px; " id="menu" onclick="bringBack()"><div style="height:200px; overflow:auto; background-color: #white; padding:15px 25px; color:blue;" class="menu"><center><h2 style="font-family:'Courier New', Courier, monospace;">EGC SKIN CREATOR ALPHA 0.1.1</h2>Please report any errors to Featherdance</center><br /><br />
    
    <table...
    
    ...
    
    ...</table></div></div>

    Which makes this:



    Then I have this script, which is in use with onmouse on the "Table Width" table cell:

    Code:
    function hiTWidth( ident ){
    	var plusC = ident + '_c';
    
    	document.getElementById(plusC).style.border='2px solid red';
    	document.getElementById(plusC).style.position='relative';
    	
    	var tset = document.getElementById(plusC).style.width;
    	
    	if (tset == '100%'){
    		document.getElementById(plusC).style.right='2px'; 
    		document.getElementById(plusC).style.bottom='2px'; }
    	else {
    		document.getElementById(plusC).style.left='0px'; 
    		document.getElementById(plusC).style.bottom='2px'; }	
    	bringBack()
    }
    When the script is run, (which creates a border around the main body of the forum page), the floating segment in the bottom right hides behind the forum body (but not disappearing behind the background completely). Is there something I can run in my script that will make it come back to the front?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    You didn't set a z-index in the style for the overlay div, so it has the same z-index as the rest of the page and so of course the resulting "priorities" are unreliable.

    Just add z-index: 100; (or some other high number?) to that first <div> you show there.

    But then consider moving all the style info to the <style> section, instead of making the inline code so ugly looking. You are already doing class="menu". Why can't you put all that style info into menu? Or, if you can't, create another style class. You know you *CAN* do class="menu zamboni foobar" to apply 3 different (or however many) style classes to one tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Flight (09-21-2012)


  •  

    Posting Permissions

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