Results 1 to 9 of 9

Thread: Make Rss Feed Preview invisible when mouseover

  1. #1
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default Make Rss Feed Preview invisible when mouseover

    Hello,

    How would I use Javascript to make the RSS Feed Preview invisible while mousing over the drop down menus and have the preview reappear when not mousing over the drop down menus?

    Thanks for your help, Elbee

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm assuming you mean that page where you have the RSS Feed in an iframe. As the page may have changed location and/or code since we last looked at it, or you may be talking about a different page:

    Please post a link to the page.

    That said, we should be able to add code to the menu's script somewhere to set the display or visibility style property of the iframe to none or hidden respectively and then remove that visa vis the mouse being over or out of a trigger for the menu.

    BTW, if this is the same page I' thinking about, that's a good solution if it works. I probably should have thought of it myself when we were discussing this earlier. If I remember correctly though, this was only a problem in some browsers. If so, we could probably tailor the solution (if it works) so that it isn't applied in those browsers we know don't require it.

    I still think that switching to an iframe shim menu as I mentioned before would be better. That way a part of your page wouldn't have to be frequently appearing and disappearing.

    Even without that, there's no modern browser I'm aware of that should be behaving like this. Perhaps it's something on the page in the iframe that could be counteracted with z-index for the menu.

    Like I say, give me a link to the page so I can see what can be seen (pun intended).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default Make Rss Feed Preview invisible when mouseover

    Hey John!

    http://jpl.coj.net/redesign2.html

    It's Internet Explorer 7 and 8 that are causing the problem. I have heard that they have corrected this in IE9. I'll be dead before our library gets IE9!
    The page looks great in Firefox; however, our library system is using IE7 and that's what I have to work with.

    Oh, about the iFrame Shim.....I couldn't get that menu to do what I wanted.
    I guess the menus I'm using currently are easier to get to work. I had a difficult time with the other menu you suggested.

    I appreciate all your help. Elbee (Linda)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I think I see why IE is the only one affected like this. Opera BTW won't even show the feed, not sure what's up with that, perhaps if an object tag were used instead of an iframe tag - I'll look into that later, might help IE too. Anyways, IE's support for xml is poor. The feed is written in xml. So it's a miracle that it shows it at all. IE 9 is said to correct the poor xml support. But that might not fix this issue in IE. For now I'll just assume that it will. We can easily change things if that turns out to be incorrect.

    Add an id to the iframe:

    Code:
     <iframe id="feedframe"
    src="http://jplcalendar.coj.net/evanced/lib/eventsxml.asp?lib=0&nd=60&dm=rss2"  
    width="72%" height="450" scrolling="auto" code border="0" frameborder="0"></iframe>
    Add to the menu table:

    Code:
    <table id="drop_menu_parent_parent">
            <tr>
                 <td>
                 
    <div id="drop_menu_parent" class="drop" align="center">General Library Info</div>
    <div id="drop_menu_child">
    <a class="drop" href="http://jpl.coj.net/lib/about.html">About the Library</a>
    
    <a class="drop" href="http://jpl.coj.net/lib/branches/index.html">Locations and Hours</a>
    <a class="drop" href="http://jpl.coj . . .
    Add this (highlighted) as shown just after the tag for the menu script:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/redesign-new3.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <base href="http://jpl.coj.net/" />
    <script type="text/javascript" src="/common/javascripts/dropdown3.js"></script>
    
    <!--[if lt IE 9]>
    <script type="text/javascript">
    window.attachEvent('onload', function(){
    	function killIframe(){clearTimeout(at_hide.timer); document.getElementById('feedframe').className = 'killframe';};
    	function liveIframe(){at_hide.timer = setTimeout(function(){document.getElementById('feedframe').className = '';}, 333);};
    	drop_menu_parent_parent.attachEvent('onmouseenter', killIframe);
    	drop_menu_parent_parent.attachEvent('onmouseleave', liveIframe);
    });
    </script>
    <style type="text/css">
    .killframe {display: none!important;}
    </style>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Jacksonville Public Library </title>
    <!-- InstanceEndEditable -->
    
    <link rel="search" type="application/ope . . .
    Last edited by jscheuer1; 09-20-2010 at 06:25 PM. Reason: found better way
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default Make RSS Feed Preview invisible when mouseover

    Hey John!

    It did work!!!!!!!!!!!!!!

    It was a little strange at first because if you access the blue menu first, it falls behind the preview....then you access one of the other menus and they work making the preview invisible...then go back to the blue menu and it works the second time making the preview invisible.

    You're such a genius!

    Thank you so much, Elbee (Linda)

  6. #6
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default

    So that you can see you're genius in action:

    http://jaxpubliclibrary.org/redesign2.html

    Elbee

  7. #7
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default

    I cleared cache and displayed it again. The menus fall behind the preview the first time you mouseover....then when you mouseover them the second time they make the preview invisible.

    I don't know what that's all about...I'm just happy it works on the second time!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's because it's waiting for the page to load. We can speed things up. I also see that the script could be a little more efficient. So, get rid of:

    Code:
    <!--[if lt IE 9]>
    <script type="text/javascript">
    window.attachEvent('onload', function(){
    	function killIframe(){clearTimeout(at_hide.timer); document.getElementById('feedframe').className = 'killframe';};
    	function liveIframe(){at_hide.timer = setTimeout(function(){document.getElementById('feedframe').className = '';}, 333);};
    	drop_menu_parent_parent.attachEvent('onmouseenter', killIframe);
    	drop_menu_parent_parent.attachEvent('onmouseleave', liveIframe);
    });
    </script>
    <style type="text/css">
    .killframe {display: none!important;} 
    </style>
    <![endif]-->
    And place this as shown, just after the iframe:

    Code:
     <iframe id="feedframe"
    src="http://jplcalendar.coj.net/evanced/lib/eventsxml.asp?lib=0&nd=60&dm=rss2"  
    width="72%" height="450" scrolling="auto" code border="0" frameborder="0"></iframe>
    <!--[if lt IE 9]>
    <script type="text/javascript">
    (function(){
    	var iframe = document.getElementById('feedframe').style,
    	par = document.getElementById('drop_menu_parent_parent').attachEvent;
    	function killIframe(){clearTimeout(at_hide.timer); iframe.display = 'none';};
    	function liveIframe(){at_hide.timer = setTimeout(function(){iframe.display = '';}, 333);};
    	par('onmouseenter', killIframe);
    	par('onmouseleave', liveIframe);
    })();
    </script>
    <![endif]-->
    Last edited by jscheuer1; 09-21-2010 at 01:32 AM. Reason: more code efficiencies
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default Make Rss Feed Preview invisible when mouseover

    Hey Mr. Genius!

    As far as I can see, it is working perfectly with your changes.

    See if you agree:

    http://jaxpubliclibrary.org/redesign.html

    Thanks Oh Great One!!!!!

    Elbee (Linda)

Bookmarks

Posting Permissions

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