Make Rss Feed Preview invisible when mouseover

**Elbee** · 09-20-2010, 02:46 PM

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

**jscheuer1** · 09-20-2010, 03:00 PM

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).

**Elbee** · 09-20-2010, 03:15 PM

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)

**jscheuer1** · 09-20-2010, 05:26 PM

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 . . .

**Elbee** · 09-20-2010, 08:01 PM

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)

**Elbee** · 09-20-2010, 08:06 PM

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

http://jaxpubliclibrary.org/redesign2.html

Elbee

**Elbee** · 09-20-2010, 08:11 PM

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!

**jscheuer1** · 09-20-2010, 09:15 PM

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]-->

**Elbee** · 09-21-2010, 01:16 PM

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)

Thread: Make Rss Feed Preview invisible when mouseover

Thread Tools

Search Thread