Forums
FAQ • Search • Login
Register
View unanswered posts | View active topics It is currently Sat May 25, 2013 1:47 pm

Board index » Troubleshooting Help: 1.0.x

All times are UTC - 7 hours [ DST ]



Reply to topic  Page 1 of 1
  [ 3 posts ] 
Print view Previous topic | Next topic 
 Solved: Issue with position:absolute/display:block|none & JS 
Author Message
jenniferaslan

Joined: Mon Mar 21, 2011 10:52 am
Posts: 2
Post Solved: Issue with position:absolute/display:block|none & JS
I'm using CSS3 PIE to apply round corners and drop shadows to a navigation “flyout.” The flyout elements start out display:none and switch to display:block when their parent element is moused over. The navigation is comprised of nested <ul>, and a <ul> whose ancestor is an <li> also has a <div> around it. The <div> is there to deal with an issue where the container wants to appear in its original position before it jumps to its relative position. I let the thing that jumps be invisible so that its contents will show up in the right place while the invisible outer container jumps. My problem is that I can mouse over each navigation item once after I refresh the page and its flyout will appear in the right place (albeit with an undesirable delay before the round corners and drop shadow appear after the element itself appears). After the first mouseover, any subsequent mouseovers will make the flyout display with its <li> elements in the right place, while the surrounding <ul> (which is styled with the round corners, drop shadow and background color) appears a bit to the left of where it ought to be and then jumps to its correct position. The flyouts appear to the left of the navigation in this design. The odd thing is that I have this same functionality for navigation flyouts on another template in the site where the navigation flyouts appear to the right of the navigation, instead of the left, and there is no issue.

I should also mention that as soon as I remove the PIE.htc, the flyouts appear and disappear as expected. They just don't look nearly so nice without their round corners and drop shadow.

Does anyone have a way to fix this? Is it a bug within PIE? Since the site is still in development at a "staging" link that we don't want to have in Google Search results, I won't give the URL here (although I could probably send it in response to a PM from anyone who was willing to try to help me), but here's the code I'm dealing with (the PIE effects are applying fine, so I know I have my .htc file in the right place with the right path):

The HTML for the navigation:

Code:
<ul class="main">
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="first hasChildren"><a href="/home/unified-communications/" class="main current first"><span>Solutions</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/unified-communications/contact-center/"><span>Contact Center</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/unified-communications/data-center/"><span>Data Center</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/unified-communications/network-infrastructure-lan-wan/"><span>Network Infrastructure  LAN/WAN</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/unified-communications/messaging/"><span>Messaging</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/unified-communications/mobility/"><span>Mobility</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/unified-communications/network-security/"><span>Network Security</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link last"><a href="/home/unified-communications/video-collaboration/"><span>Video Collaboration</span></a> </li>
      </ul>
    </div>
  </li>
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class=" hasChildren"><a href="/home/services/" class="main link "><span>Services</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/services/planning-and-assessment-services/"><span>Planning and Assessment Services</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/services/design-and-integration-services/"><span>Design &amp; Integration Services</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/services/support-services/"><span>Support Services</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link last"><a href="/home/services/training-services/"><span>Training Services</span></a> </li>
      </ul>
    </div>
  </li>
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class=" hasChildren"><a href="/home/about-us/" class="main link "><span>About Us</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/about-us/news/"><span>News</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/about-us/cerium-s-preferred-manufacturer-partners/"><span>Cerium's Preferred Manufacturer Partners</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/about-us/careers/"><span>Careers</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link last"><a href="/home/about-us/our-element-is-communication/"><span>Ce58</span></a> </li>
      </ul>
    </div>
  </li>
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class=" hasChildren"><a href="/home/people-and-processes/" class="main link "><span>People &amp; Processes</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/people-and-processes/people/"><span>People</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link last"><a href="/home/people-and-processes/process/"><span>Process</span></a> </li>
      </ul>
    </div>
  </li>
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class=" hasChildren"><a href="/home/courses-and-events/" class="main link "><span>Courses &amp; Events</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/courses-and-events/upcoming/list/"><span>Upcoming Courses &amp; Events</span></a> </li>
      </ul>
    </div>
  </li>
  <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="last hasChildren"><a href="/home/support-center/" class="main link last"><span>Support Center</span></a>
    <div style="display: none;" class="flyout level1">
      <ul class="flyout level1">
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link first"><a href="/home/support-center/contact-support/"><span>Contact Support</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/support-center/rma-request-form/"><span>Returns</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link"><a href="/home/support-center/submit-feedback/"><span>Submit Feedback</span></a> </li>
        <li onMouseOver="setSubNav(this,'show')" onMouseOut="setSubNav(this,'hide')" class="link last"><a href="/home/support-center/document-downloads/files/"><span>Document Downloads</span></a> </li>
      </ul>
    </div>
  </li>
</ul>


The flyout appears and disappears by means of the following JavaScript:

Code:
function setSubNav(ob,set){
   var i = 0;
   var dropper = ob.childNodes[i];
   while(dropper != null && dropper.nodeName.toLowerCase() != "div"){dropper = ob.childNodes[++i];}
   if (dropper) {
      if (set == "show"){
         dropper.style.display = 'block';
      }
      if (set == "hide"){
         dropper.style.display = 'none';
      }
   }
}


Here's my CSS code:

Code:
#navigation ul { width:170px; margin-left:13px; margin-top:42px; position:relative; }
#navigation ul li { list-style-type:none; display:block; position:relative; font-size:12px; height:21px; padding-top:6px; border-bottom:#d9531e 1px solid; text-transform:uppercase; }
#navigation ul li.last { border-bottom:none; }
#navigation ul li a { color:#005BAB; text-decoration:none; position:relative; left:-20px; padding-left:20px; }
#navigation ul li.hasChildren a:before { content:'‹'; position:relative; left:-5px; }
#navigation ul li.hasChildren a { left:-25px; }
#navigation ul li.hasChildren ul li a:before { content:''; }
#navigation ul li.hasChildren ul li.hasChildren a:before { content:'‹'; position:relative; left:-5px; }
#navigation ul li.hasChildren ul li.hasChildren a { left:-30px; }
#navigation ul li.hasChildren ul li.hasChildren ul li a:before { content:''; }
#navigation ul li.hasChildren ul li.hasChildren ul li.hasChildren a:before { content:'‹'; position:relative; left:-5px; }
#navigation ul li.hasChildren ul li.hasChildren ul li.hasChildren a { left:-30px; }
#navigation ul li a.current,
#navigation ul li a:hover { color:#67ba4a; }
#navigation div.flyout { display:none; position:relative; width:180px; right:194px; top:-65px; z-index:10; background-color:transparent; }
#navigation ul.flyout { background-color:#005BAB; padding:10px 6px 10px 3px; background-image:none;
                                    /* Round Corners */
                                       -moz-border-radius:12px;
                                       behavior:url(/site/css/PIE.htc);
                                       border-radius:12px;
                                    /* Drop Shadow for Firefox, Webkit, etc. */
                                       -moz-box-shadow: 0 5px 5px 3px rgba(0,0,0,0.3);
                                       -webkit-box-shadow: 0 5px 5px 3px rgba(0,0,0,0.3);
                                       box-shadow: 0 5px 5px 3px rgba(166,166,166,0.3); }
#navigation ul.flyout li { line-height:14px; height:auto; padding:6px 6px 6px 16px; border-bottom:none; }
#navigation ul.flyout li a { display:block; line-height:15px; text-transform:none; color:#fff; }
#navigation ul.flyout li a:hover { color:#f77a27; }


Last edited by jenniferaslan on Thu Mar 24, 2011 4:19 pm, edited 1 time in total.
Mon Mar 21, 2011 12:20 pm
Profile WWW
jenniferaslan

Joined: Mon Mar 21, 2011 10:52 am
Posts: 2
Post Re: Issue with position:absolute/display:block/display:none
My coworker and I were able to find a way to fix the issue I was having. We changed the JavaScript so that, instead of changing the display from none to block and back, we're changing the top positioning from -1000px to 0px and back. This means that, as far as the browser is concerned, the elements are always visible, so their round corners and drop shadows are applied as soon as the page loads and they are moved into the viewport when the user hovers over their parent element and we no longer get the strange shifting behavior.
Code:
function setSubNav(ob,set){
   var i = 0;
   var dropper = ob.childNodes[i];
   while(dropper != null && dropper.nodeName.toLowerCase() != "div"){dropper = ob.childNodes[++i];}
   if (dropper) {
      if (set == "show"){
         dropper.style.top = '0px';
      }
      if (set == "hide"){
         dropper.style.top = '-1000px';
      }
   }
}

Here's the changed line in the CSS file:
Code:
#navigation div.flyout { display:block; position:absolute; width:180px; right:194px; top:-1000px; z-index:10; background-color:transparent; }
Thu Mar 24, 2011 4:18 pm
Profile WWW
olalaelaine

Joined: Tue Jan 17, 2012 4:30 pm
Posts: 4
Post Re: Solved: Issue with position:absolute/display:block|none
This is certainly not ideal, but it solved the issue I was having. Just wanted to thank you for this excellent workaround!
Thu Jan 19, 2012 3:23 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   Page 1 of 1
  [ 3 posts ] 

Board index » Troubleshooting Help: 1.0.x

All times are UTC - 7 hours [ DST ]

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 2 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.