PDA

View Full Version : JSFX Fading Image Rollovers? - There's a much better way!



KennyP
11-12-2010, 08:10 AM
JSFX Image Rollovers - translucent Image Problem

Hi guys:

After hitting another bump on the site I'm working on, I hope you can help me solve it.

JSFX Image Rollovers works to display translucent PNG images on a menu. However, there are two problems. One of which I solved, but, at the expense of creating a new problem.

The recommended typical JSFX image menu item code is as follows:


<td background="menu/home_down.png">
<a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')">
<img src="menu/home_down.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>

You'll notice that the td background image is the same image as in the img src.
On page load, until after a link is hovered the first time, both copies of the same image display. When using opaque image, this is not a problem. However, when using translucent PNG images, they double the opacity; being the same image stacked over itself.

I solved that problem by substituting a clear transparent image in the src code, as follows, and it does prevent the above opacity problem on page load.


<td background="menu/home_down.png">
<a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')">
<img src="menu/blank.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>

However, since I substitued the clear transparent image in the src code, it created the following problem:

If you would please take a look at the site, http://www.billyjoeconor.com/ you'll quickly see the following:

If you move your mouse in a vertical direction, and you first hover over "HOME" or "FRIENDS," the fade-in image fades in perfectly.

If you move your mouse from there over the rest of the items, there is a flicker before the fade-in image.

After you hover all the flickering items one time, they no longer flicker the second time you hover them, and thereafter. Unless of course you refresh the page.

I assume that flicker is caused by the clear PNG image which is active on page load.

What I find peculiar is the fact that if you refresh the page, and you hover any of the otherwise flickering items from either side of them, moving your mouse in a horizontal direction, they don't flicker. The flickering occurs only when moving from one item to another with a vertical movement.

Do you guys have any idea how this can be solved?

Thanks,

Kenny

jscheuer1
11-12-2010, 05:46 PM
I'd scrap that script and use jQuery. Replace:


<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="scripts/JSFX_FadingRollovers.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
JSFX.Rollover("home","menu/home_over_down.png");
JSFX.Rollover("biography","menu/biography_over.png");
JSFX.Rollover("discography","menu/discography_over.png");
JSFX.Rollover("estore","menu/e-store_over.png");
JSFX.Rollover("friends","menu/friends_over.png");
//-->
</SCRIPT>

with:


<style type="text/css">
.jqImgFader {
width: 164px;
height: 38px;
}
.jqImgFader img {
visibility: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var finOp = document.body.filters? 0.85 : 1;
$('.jqImgFader').hover(function(){
$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp});
}, function(){
$(this).find('img').animate({opacity: 0});
});
});
</script>

And replace:


<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td background="menu/home_down.png"><a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')"><img src="menu/blank.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td background="menu/biography.png"><a href="biography.php" target="_top" onMouseOver="JSFX.fadeIn('biography')" onMouseOut="JSFX.fadeOut('biography')"><img src="menu/blank.png" class="imgFader" name="biography" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td background="menu/discography.png"><a href="discography.php" target="_top" onMouseOver="JSFX.fadeIn('discography')" onMouseOut="JSFX.fadeOut('discography')"><img src="menu/blank.png" class="imgFader" name="discography" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td background="menu/e-store.png"><a href="rhythmnbootsmusic/e-store/index.php" target="_top" onMouseOver="JSFX.fadeIn('estore')" onMouseOut="JSFX.fadeOut('estore')"><img src="menu/blank.png" class="imgFader" name="estore" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td background="menu/friends.png"><a href="friends.php" target="_top" onMouseOver="JSFX.fadeIn('friends')" onMouseOut="JSFX.fadeOut('friends')"><img src="menu/blank.png" class="imgFader" name="friends" width="164" height="38" border="0"></a></td>
</tr>
</table>

with:


<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td class="jqImgFader" background="menu/home_down.png"><a href="/" target="_top"><img src="menu/home_over_down.png" name="home" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td class="jqImgFader" background="menu/biography.png"><a href="biography.php" target="_top"><img src="menu/biography_over.png" name="biography" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td class="jqImgFader" background="menu/discography.png"><a href="discography.php" target="_top"><img src="menu/discography_over.png" name="discography" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td class="jqImgFader" background="menu/e-store.png"><a href="rhythmnbootsmusic/e-store/index.php" target="_top"><img src="menu/e-store_over.png" name="estore" width="164" height="38" border="0"></a></td>
</tr>
<tr>
<td class="jqImgFader" background="menu/friends.png"><a href="friends.php" target="_top"><img src="menu/friends_over.png" name="friends" width="164" height="38" border="0"></a></td>
</tr>
</table>

KennyP
11-12-2010, 06:56 PM
John:

Thank you for your generous reply. I wasn't aware that the same effect could be achieved with jquery, and your generosity in also showing me exactly how to implement it is a big gift that has taken a big load off my mind. Although I'm able to put a site together, I'm strictly a copy and paste coder.

My gratitude to you, and also to your fellow coders/members here at dynamic drive who kindly and generously give of your expertise.

Kenny

KennyP
11-13-2010, 12:31 AM
Hello again John:

After entering the jquery image fade code in the menu, all the menu items fade perfectly, without the bugs and limitations of the inferior jsfx.

However, although the fading worked perfectly on all pages, after a search was made, the search engine results page was adversely affected by the introduction of jquery
when viewed in IE. The page shifted about a quarter inch to the left of all other pages. In Firefox it did not shift. After trying different doctypes that made no difference, I
finally found the suggestion to add the following to center the page, and it works.


body {margin-left:auto; margin-right:auto;}

I curious tho. Why is this the only page that IE would not center without that addition? Also, when you get the opportunity, would you please let me know how to to set the
fade-in and fade-out time?


Many thanks for the help,

Kenny


PS - Please let me know if donations are accepted. I would like to do something to express my appreciation for your kindness and generosity.

jscheuer1
11-13-2010, 05:26 PM
To really answer the first question I would have to analyze at least two pages, probably more. And I would have to see the page in question with and without this modification. The current page doesn't have it and I'm not even seeing the problem you describe when switching to other pages in IE 8 or IE 8 in IE 7 mode. The answer might be that this one page is the only one that has a set width for the body. But the current page does not, so unless that was added somewhere, there must be another reason. Also, the current page is in quirks mode, so the solution you have there will do nothing in IE unless the page is put into standards mode or the page already had left and right margins. However, your solution is slightly flawed. Instead of setting those and any margin or width properties for the body element (margin for the body should actually be 0), a container element for the entire page should have its properties so set. But it gets more complicated because for the current solution to work, the body must have a set width. That must be coming from somewhere else, but as I say, not on the current page. The new container div would need that set width and the body should no longer. Other things:


You may have something IE less than 8 (or some other particular version) set that I'm not detecting, that could possibly be a factor in this. What version of IE are you testing in?

Regardless of the DOCTYPE, if you preface that page with a comment like you currently have it, IE will always be in quirks mode.


For this particular page though, if setting the margin like that for the body works and causes no problems in any IE version 6+ or in other browsers, it's OK. But I'm not seeing the problem, so perhaps you're over thinking it and should leave it alone. Like maybe once all the pages are cleared from the cache in IE, the situation will right itself.

As for the fade time, I tried to match as closely as possible what you already had. But those times were slightly unequal - one for fade in, one for fade out. The way to control them is here, additions highlighted:


<script type="text/javascript">
jQuery(function($){
var finOp = document.body.filters? 0.85 : 1;
$('.jqImgFader').hover(function(){
$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 500);
}, function(){
$(this).find('img').animate({opacity: 0}, 500);
});
});
</script>

Those are duration (from the manual on animation (http://api.jquery.com/animate/)):


Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

The first one is fade in, the second is fade out. By not setting them, I got the default which appeared close enough to my eye. I believe that's 500 as Ive put in there. It could be anything between 200 and 600, you'd think 400 - I'm just not sure at the moment.

I noticed - Setting the number too low (too fast) and the effect wasn't really noticed. Setting it too high (too slow) and the effect dragged out for so long that any rapid movements of the mouse in the area of the triggers looked pretty bad.

I'm not aware of any donations being accepted at Dynamic Drive. I imagine they do pretty well via ad revenue and private arrangements with clients. I do know that the net worth of the site is quite high insofar as what the domain name would command on the open market. If I were them, I'd sell a non-controlling amount of shares in it, either privately or publicly.

Donations are accepted by me personally (I have no real stake in Dynamic Drive, it's just one of my favorite sites) and by charities. See my signature below each post for donation options. The last two are to me, the others are to two of my favorite charities.

KennyP
11-14-2010, 10:46 AM
As it is working, I'll take your advice and just leave it alone for now.

In the meantime, I've tried sending you a PM, but the messaging system doesn't seem to work. When I click submit, no indication is given that it was sent. Nor does it appear in the Sent messages box.

So, here it is...

[Most of PM deleted, it went through twice]

I'm now curious regarding another feature we wanted to add. When a menu item is clicked, can jquery be used to perform the function of fading out the entire content of the div beneath the menu, down to the red horizontal footer bar, and then fade-in the content of that div which appears on all the other pages?

I'm now barely approximating that look by having a simple fade-in script fade-in the content of that div at every new page load; a very sorry substitute.

jscheuer1
11-14-2010, 07:28 PM
Replace:


<script src="scripts/opacityFade.js" type="text/javascript"></script>
<script>window.onload = opacity('d1', -130, 100, 440)</script>

with:


<script src="scripts/jqOpacityFade.js" type="text/javascript"></script>

in scripts/jqOpacityFade.js put (for onload):


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(window).bind('load', function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 700, 'linear', function(){
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
})(jQuery);

Or put (for document ready, happens sooner, but is perhaps less dramatic):


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 700, 'linear', function(){
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
})(jQuery);

Change:


<div style="margin-left:44px; margin-top:40px; margin-bottom: 22px; height:260px; width:713px; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; overflow:hidden;" id="d1">

to:


<div style="margin-left:44px; margin-top:40px; margin-bottom: 22px; height:260px; width:713px; overflow:hidden;" id="d1">

Those styles can go in the stylesheet.

This not only enables this via jQuery, but also allows the content to be seen in non-javascript browsers.

To that end, make the menu functional in those browsers by adding the highlighted as shown:


. . . ground-color:transparent;
border:none;
cursor: pointer;
}
.theTicker {
font-size:16px; color:white; font-weight:normal;
}
.jqImgFader {
width: 164px;
height: 38px;
}
.jqImgFader a {
width: 164px;
height: 38px;
display: block;
}
.jqImgFader img {
visibility: hidden;
}
-->
</style>

In an unrelated matter, get rid of:


<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

You're not using it and it throws a non-fatal error.

KennyP
11-15-2010, 12:35 AM
Thanks so much John. I entered the new fade code into test pages, and I much prefer it over the previous code, which thinned
out the fonts when viewed in IE.
Unfortunately however, I discovered sevaral problems In IE, the jquery fade code prevents the flexcroll cross-browser custom
scrollbars from displaying. In Firefox, the scrollbars are not affected. Below are the test pages, Biography and Discography, which
do not display the scrollbars as compared to the previous linked pages, which do display custom scrollbars.

http://www.billyjoeconor.com/biography-test-new-fade.php

http://www.billyjoeconor.com/discography-test-new-fade.php

Aso, in IE only, since the addition of jqOpacityFade, it seems to affect the smoothness of jqImageFade in the menu.

The register object code is actually being used for the background sound-effect preceding it. I've not been able to find a non-flash
player that could loop audio without an audible break. If you know of one, I'll gladly get rid of the entire code; I don't like Flash.



<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1">
<param name="movie" value="flash/brook.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="6.0.65.0">
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>



Thanks again,

Kenny

jscheuer1
11-15-2010, 04:06 PM
Last things first, no. There is no swfobject so:



<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

does in fact do nothing but cause a non-fatal error. This is because (from the discography page's source code):


<script type="text/javascript" src="mediaplayer/swfobject.js"></script>

creates a SWFObject, not a swfobject.

You could try changing it to that:


<script type="text/javascript">
<!--
SWFObject.registerObject("FlashID");
//-->
</script>

But by my reading there is no SWFObject.registerObject. So now you would have a different non-fatal error.

Without all that it works fine. So just get rid of:


<script type="text/javascript" src="mediaplayer/swfobject.js"></script>

and:


<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

Or find a version of swfobject.js that supports that code.

________________________

On to the flex scroll, that's complicated. Remove the BOM (highlighted) from the beginning of the file:


/*
This license text has to stay intact at all times:
Author: Emrah BASKAYA @ www.hesido.com

This script is registered for use by:
Billy Joe Conor
On the following domain:
billyjoeconor.com
Under the following licence agreement:
http://www.hesido . . .

and at almost the end of its very long line:


. . . nm'.split('|'),0,{}))

add the highlighted:


. . . nm'.split('|'),0,{}).replace(/fleXenv\.fleXcrollInit\(\);/,''))

And change the scripts/jqOpacityFade.js code to:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
})(jQuery);

We can no longer do it onload. Perhaps we could, but that would require more extensive hacking of the flexiscroll.js file. The TOS appear to allow that. But even just this much may cause it to stop working - I couldn't find the mechanism whereby it enforces the license. If it does some kind of hash calc, even though this worked locally, it might not live.

As for the other problem in IE with the scripts/jqOpacityFade.js file, I see no difference there with the current discography page's code. IE and other browsers have always had trouble 'walking and chewing gum at the same time' with certain script combos. It doesn't appear all that bad to me, hardly noticeable, and as I say - same as the present page. This sort of thing is often browser and/or CPU/RAM specific.

KennyP
11-16-2010, 01:22 AM
John, you are good! That little hack you made to the scrollbar file fixed all. I just uploaded live versions of the Discography (http://www.billyjoeconor.com/discography.php) and Biography (http://www.billyjoeconor.com/biography.php) pages, and as you can see, the scrollbars now display, the div content fades perfectly, and of course the menu's transition fade works as well. I'll now alter all the other pages accordingly.

Regarding the BOM you see, /*, at the start of the scrollbar file, I checked the file and it's not actually there; it simply starts with /*. However, when I did open it (in Dreamweaver), it detects an error on line 17. Maybe that causes the BOM to appear when you view it?

As you suggested, I removed the swfobject references, and the background sound still works. Strange, when I first added that sound, the directions were to include them. Not only did they cause an error, they were totally useless.

Finally, you had made reference to the pages being in Quirks mode. I long removed the link from the doctype, leaving only <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, because the inclusion of the URL made the search field (at the top of the page) display as 179X29 pixels, when it is only 164X22 pixels. I tried all the popularly listed doctypes, and they all caused the same distortion. Not having the expertise to realize the reason for it, I took the easy path and simply chopped off the URL. Is there a problem with the way I entered the size for the search field which causes the doctype to distort it?

Many Thanks!

Kenny

KennyP
11-16-2010, 03:17 AM
John:

I entered all the changes in the rest of the pages, and the fading works well in all of them except for the Friends (http://www.billyjoeconor.com/friends.php) page.
Maybe it's because there's more content on that particular page than on the others? Can jqOpacityFade be ajusted to handle it as well?

The Final problem in on this E-Store (http://www.billyjoeconor.com/rhythmnbootsmusic/e-store/index.php?categoryID=80) page. The following previous fix which prevented those white default scrollbars from displaying before
the custom scrollbars have a chance to load is no longer working...


<div class="flexcroll flexcroll-hide-default"

Other than the above, all is now working perfectly.

Many thanks,

Kenny

jscheuer1
11-16-2010, 05:56 AM
Looking back over this I see that this code I suggested has a problem:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
})(jQuery);

If there is no fleXenv (no flexcroll script), there will be an error. It should be:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
})(jQuery);

About the BOM - It's definitely there. If you view the flexcroll.js script in ISO-8859-1 encoding, you can see it. It should be removed.

As for the height of the search box, that can be changed here:


<input
name="s"
style="border: 1px solid rgb(82, 85, 87);
padding: 2px 0pt 3px 8px;
background: rgb(5, 9, 12) none repeat scroll 0% 0%;
width: 164px;
height: 16px;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;
font-size: 14px;
font-style: italic;
color: rgb(127, 129, 130);"
onblur="this.value = this.value || this.defaultValue;
this.style.color='#75797A';
this.style.background='#000000';"
onfocus="this.value='';
this.style.color='#FF0000';
this.style.background='#450010';"
value="Search">

It was 22px. 16px looked good in standards mode, not identical to 22px in quirks though.

I'll have to get back to you on friends and estore. I can tell you on friends, remove:


<script type='text/javascript'>PublishDate();</script>

It refers to something that's not there (another non-fatal error) and may be interfering.

This:


<script type='text/javascript' src='/friends/../scripts/jquery-c.js'></script>

is a 404 not found, but apparently isn't missed. Might be needed for something.

There's that semitransparent .png background image (friends/images/translucency.png). It could be confusing the browsers, or simply conflicting with the fade in affect.

I also see you have left in:


filter:alpha(opacity=0); -moz-opacity:0; opacity:0;

to the d1 division:


<div class="flexcroll flexcroll-hide-default" align="center" style="margin-left:44px; margin-top:40px; margin-bottom:22px; overflow-y:auto; height:260px; width:712px; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; position:absolute;" id="d1">

That should be removed there and on the other pages.

I'm not sure if any of that will fix it, but it should be attended to.

On estore and elsewhere, the class flexcroll-hide-default doesn't appear to be doing anything. So I'm not sure what the issue is with the scrollbar appearing.

KennyP
11-16-2010, 08:28 AM
The custom scrollbar problem on the E-Store page was entirely my fault. I failed to include <div id="flexcroll-init"></div>
at the bottom of the page, therefore it caused a loading delay in which time the default white scrollbar would make an
appearance.

However, the additional code change you made...

if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
was timely; when I entered all the jquery code on pages not requiring scrollbars (and therefore not having any flexcroll
references), the menu fade would not work until I entered that additional code into jqOpacityFade.js as you suggested.

About the BOM, I deleted the top section of flexcroll.js and re-typed it. I hope it's gone.

Thanks for pointing out the missing "PublishDate" on the Friends page. I used an earlier version of that page which is
unlinked to the script file. I'll now replace it, and the current date will display under "Click 'n' Say Howdy."

Regarding the abrupt fade-in on the Friends page. Assuming there is nothing wrong on the page causing it, how about
adding an array of IDs ('#d1','#d2','#d3', etc.) in jqOpacityFade.js in order to be able to fade-in various divs/elements
using various settings?

With the exception of the custom cell phone screensavers pages (which I'll do later today), all other pages are complete
and they're working just great. Billy will be one happy camper! See for yourself...

www.billyjoeconor.com/ (http://www.billyjoeconor.com/)

Thank you so much John :)

Regards,

Kenny

jscheuer1
11-16-2010, 11:02 AM
Apparently you have no editor that can see the BOM, or if you do, you're not familiar with how to use it to see it.

I'm attaching a copy of the file without the BOM (aka Byte Order Mark). Your editor should at least have an option when saving as UTF-8 to not include the BOM.

[Proprietary Attachment Removed]

KennyP
11-16-2010, 12:17 PM
Thanks John:

You're right on all counts. I couldn't see anything at all before the slash as I couldn't figure out how to see it.
Although I did use the delete key to try to get rid of everything before the slash, obviously it didn't work.

However, I just uploaded your clean copy of flexcroll.js onto the server, and my guess is that the BOM is gone.
Previously there was a subtle left to right movement of the text as it faded in, just before the end of the fade.
Now that movement is gone and the fade-in looks stable and clean. Does it look that way to you as well?

I love it!

Regards,

Kenny

EDIT:
Since all of this is now working so well, I must ask - is it possible to have the same div's content fade-out just before the page closes?
Initially our goal was to have the content of a page's div fade-out and the content of the next page's fade-in, without using Flash.
In other words, a cross-browser simulation of BlendTrans, which only works in IE.

jscheuer1
11-16-2010, 03:42 PM
Yes, the BOM is gone. I've deleted the attachment as it is licensed software. Let me know if you need it again. I suspect that script may have come to you with the BOM. So many people who should know better are as oblivious to the BOM as you are owing to their choice of editor and its settings. As far as I know it's only required for UTF-16. At one time it was thought to be required for UTF-8. That's why so many editors put it in there as a matter of course. If you open the file for editing in UTF-8 mode (the default for many editors or often triggered by the presence of the BOM) the BOM cannot be seen.

As for unloading and fading out, I'll have to get back to you on that. There is an onbeforeunload event. We might be able to use that. I'm not sure how many browsers would support it though, and if it would support an animation. Those kind of effects are interesting. But for users on slower connections they can be very frustrating. And, if you have any links on the page that are href="javascript:something()" onbeforeunload will fire for them, even if they don't switch to another page. I don't think you have any like that. But I haven't seen every inch of code of every page.

jscheuer1
11-16-2010, 09:00 PM
Try this out:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
window.onbeforeunload = function(){
$('#d1').fadeOut();
};
})(jQuery);

KennyP
11-16-2010, 10:40 PM
EDIT:

The fade code is working perfecty, including the time factor. The only thing I needed to do is prevent the height of the pages from

down-sizing on fade-out. Adding a column height seems to prevent it from happening on all pages except when fading out from the

Contact page going to any other page.

Do you know what would make its dimensions be ignored?

Contact Page (http://www.billyjoeconor.com/rhythmnbootsmusic/mail/contact.php)


Thanks,

Kenny

jscheuer1
11-17-2010, 03:45 AM
Height shouldn't be an issue if we fade out using opacity only:


window.onbeforeunload = function(){
$('#d1').animate({opacity: 0});
};

KennyP
11-17-2010, 04:10 AM
Thanks for the reply John. For some reason, on fading-out only, any page which did not have height set for the td containing the fading div, would
partially collapse. When I added the height (which is 322), it no longer collapsed on fading out. That is, except for the Contact page (http://www.billyjoeconor.com/rhythmnbootsmusic/mail/contact.php).

If I remove the fading code from the script, it no longer collapses. But that is something I defoinitely will not do. I love what your script is doing.

When you get the opportunity would you please take a look at it?

Thanks,

Kenny

jscheuer1
11-17-2010, 04:40 AM
I did. Have you tried the new animate opacity only code:


Height shouldn't be an issue if we fade out using opacity only:


window.onbeforeunload = function(){
$('#d1').animate({opacity: 0});
};

KennyP
11-17-2010, 07:49 AM
John:

For as many times as I looked at the above code in your previous posting of it, I thought it referred
to the initial fade-in, which was already working perfectly. Finally I understood...

I tried it, and It's working flawlessly. Not only does the fade-out look better than that created by
the previous code, but it does not create any of the page sizing problems I mentioned earlier.

Out of curiosity, as I look at the code, am I guessing correctly that this same code could probably
function to create various types of animations by substituting their function names into the code?
Maybe scrolling the content down on page open, and scrolling it back up on page close, or an array
of different effects for different pages?

Thank you so much for your help,

Kenny

jscheuer1
11-17-2010, 08:14 AM
Out of curiosity, as I look at the code, am I guessing correctly that this same code could probably
function to create various types of animations by substituting their function names into the code?
Maybe scrolling the content down on page open, and scrolling it back up on page close, or an array
of different effects for different pages?

If by function names you mean property names, yes. There's at least one important restriction. The properties used must be ones that can be incremented/decremented numerically in base 10.

KennyP
11-17-2010, 09:06 AM
Thanks for the info John. In the future maybe some other effect would work for the site design.

Although the code is now working so well, the Friends page still fades-in abruptly. I think it's due to the large content in that div, as all the other pages have little content, and they all fade in smoothly. There are about 150 comments entered, and growing. If you think of a way to deal with it, please let me know?

Many thanks,

Kenny

KennyP
11-22-2010, 10:03 AM
Hello again John:

As you know, I used your following script set at 0.60 : 0.60 in order to retain the translucent style
of the menu. However, on several other pages, in addition to the menu, I'd also like to fade other
images using a 1 : 1 setting. I tried to figure out how to add that variation to work on the same
page for over a day, but failed. When you get the opportunity, would you please show me how it
can be added?

This is just one of the pages showing two images of backward arrows (http://alturl.com/vv5o3) I'd like to fade.


<script type="text/javascript">
jQuery(function($){
var finOp = document.body.filters? 0.60 : 0.60;
$('.jqImgFader').hover(function(){
$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 400);
}, function(){
$(this).find('img').animate({opacity: 0}, 400);
});
});
</script>


Thank you,

Kenny

jscheuer1
11-22-2010, 11:00 AM
The:


$('.jqImgFader')

selects the td elements of the class="jqImgFader" which each must have one background image and then another similar (in dimensions and look) actual image (using an img tag) that gets faded in on top. So for this to be portable to other rollovers, a similar HTML markup must be used. There's also style (the width and height are applied to the td elements but are those of the images):


<style type="text/css">
.jqImgFader {
width: 164px;
height: 38px;
}
.jqImgFader img {
visibility: hidden;
}
</style>

associated with these rollovers. A different class name would probably be the best way to distinguish one type or set of rollovers from another. This class then would be used in the markup, the function as well as in the style.

Since you are using 0.60 : 0.60, you don't really need to test for filters. But with 1 : 1, you may need to. You will if the faded in image is .png and has partial opacity.

So let's say your additional class is jqImgFader2 and the images are 125 x 80 and you have setup a similar HTML markup for them (additions highlighted):


<style type="text/css">
.jqImgFader {
width: 164px;
height: 38px;
}
.jqImgFader2 {
width: 125px;
height: 80px;
}
.jqImgFader img, .jqImgFader2 img {
visibility: hidden;
}
</style>

and:


<script type="text/javascript">
jQuery(function($){
var finOp1 = 0.60, finOp2 = document.body.filters? 0.90 : 1;
$('.jqImgFader, .jqImgFader2').hover(function(){
var el = $(this),
finOp = el.hasClass('jqImgFader')? finOp1 : finOp2;
el.find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 400);
}, function(){
$(this).find('img').animate({opacity: 0}, 400);
});
});
</script>

Both the styles and the script may be made external and be linked/tagged into the head of the page(s) using either of these classes.

Note: This is all untested.

KennyP
11-22-2010, 11:26 AM
Thank you for your reply, especially because of your explanation in addition to the code.

As you can see on this page (http://alturl.com/vv5o3), the additional image class is fading perfectly.

I made the effort to enter the td code as I did for the menu, but for some reason, the fading over image displays
with the effect of a button being pushed in.

The folowing is correct no?

<td class="jqImgFader2" background="/images/back-white.gif" width="232" height="20" style="background-repeat:no-repeat"><a href="$return_link"><img src="/images/back-red.gif" width="232" height="20" border="0"></a></td>

Many thanks for the rescue and Regards,

Kenny

KennyP
01-22-2011, 11:54 PM
Hi John:

Sorry to have to bring this up again... suddenly the onbeforeonload opacity fades only to about 50%, whereas previously it faded entirely. What could have happened? When you get the opportunity would you please take a look? Thanks.

Welcome page (http://www.billyjoeconor.com/welcome.php)

Home page (http://www.billyjoeconor.com/)

jqOpacityFade.js:

(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1300, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
window.onbeforeunload = function(){
$('#d1').animate({opacity: 0});
};
})(jQuery);

KennyP
01-28-2011, 10:59 AM
I tried setting the animate opacity setting to minus numbers, but the fade is lost. So I set it back to 0.



window.onbeforeunload = function(){
$('#d1').animate({opacity:-5});

jscheuer1
01-28-2011, 06:30 PM
Well, if it was working before, perhaps you have a backup. Looking at it, it appears as though there just isn't enough time. The beforeunload is meant for a one shot deal - do something(s) real quickly, as quickly as possible before the page unloads. The animate method requires transformation over time. So if we speed it up, that might allow it to complete:


window.onbeforeunload = function(){
$('#d1').animate({opacity: 0}, 'fast');
};

If that works, we may be able to slow it down again by delaying the loading of the next page. But that would be tricky, so let's do this test first.

KennyP
01-28-2011, 09:42 PM
Thank you for your reply. Yes, it was working flawlessly. Since this problem developed, I tried replacing not only the original jqOpacityFade.js, but the entire website, every file, from a backup of when the fade-in and fade-out was first introduced and working flawlessly. But, it still persists.
Even with the "fast" addition you posted, sometimes it seems to speed up the fade and it does complete. Yet, other times it starts to fade, but still gets stuck half way through it, at about 50%. Something seems to be stopping the fade from completing, even though there is still enough time in which to do so.

Could a change in the server be affecting the script?

jscheuer1
01-28-2011, 10:46 PM
Anything that speeds up the response time, yes. The server being more efficient could contribute, as could browser or computer upgrades on the user end.

As far as you know, are all of the calls to other pages on the site ordinary links?

Like, if I click on Home, or Biography, it's a linked image or linked text, no fancy menu system. If so, we can capture the mouse clicks on those tags and get it to do our bidding, and then load the page. Forget about onbeforeonload.

One thing though, if you have links that open in a new window or to an iframe, or links with href attributes that don't load a page, any of that, they will need to be accounted for somehow, especially visa vis whether or not the should fade out that section. Do you have anything like that as far as you know?

When I get more time, I'll work up a prototype.

KennyP
01-28-2011, 11:56 PM
The only thing that could be different is the server. I've made no changes to my PC in any way; same system, same hardware. All links to other pages are ordinary, except that all main pages redirect to a Welcome splash page if a cookie is not found on the first login. In turn, the Welcome page redirects back to whichever was the referring page. Thereafter, all redirection ends for the duration of the browser session. There are several text links which do open new windows.

Thank you so much for your help,

Kenny

jscheuer1
01-29-2011, 02:21 PM
OK, let's try this. Comment out, like so:


/* window.onbeforeunload = function(){
$('#d1').animate({opacity: 0}, 'fast');
}; */

and add (highlighted) just below it as shown:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
/* window.onbeforeunload = function(){
$('#d1').animate({opacity: 0}, 'fast');
}; */
(function(re){
$(document).click(function(e){
var t = e.target;
while (t.tagName && !re[0].test(t.tagName)){
t = t.parentNode || null;
}
if(t && t.tagName && !t.target || re[1].test(t.target)){
e.preventDefault();
$('#d1').animate({opacity: 0}, function(){
location = t.href;
});
}
});
})([/a/i, /^_(top|self|parent)$/]);
})(jQuery);

KennyP
01-29-2011, 07:14 PM
John:

Not only is the fade-out working again, but it's now smoother than it was previously.

Is it ok to add the time factor to the fade-out, as below, and as you did in the fade-in? It does work.


$('#d1').animate({opacity: 0}, 700, 'linear', function(){

Also, because the Welcome splash page redirects automatically, with no clicks to capture, can the previous
fade-out code be improved to work for that one page, even if not as well as the new code?

Thank you so much!

Kenny

jscheuer1
01-29-2011, 10:12 PM
You're welcome!

I just realized looking at it that in order to avoid errors on click of the audio feature (most browsers), any other element within a table (all browsers), other potential problems, this line:


})([/a/i, /^_(top|self|parent)$/]);

should be:


})([/^(a|area)$/i, /^_(top|self|parent)$/]);

And another important modification for Firefox, perhaps others when hitting the Back button on the browser (add the highlighted as shown):



if(t && t.tagName && !t.target || re[1].test(t.target)){
e.preventDefault();
$('#d1').animate({opacity: 0}, function(){
location = t.href;
$(this).css({opacity: 1});
});
}

Otherwise the browser Back button will show no id="d1" content, as Firefox, perhaps others will not reload the page on Back, rather reloads a version of the page exactly as it was when it was last displayed.


About your question, yes. You can use the jQuery animate method to its fullest extent, which of course includes those modifiers. For more on what's available with jQuery animate see:

http://api.jquery.com/animate/

There is a possibility that one or more of the many possible modifiers may cause a problem either intrinsically or if used in a particular way. Common sense should be your guide there. But those two (speed and easing, respectively), the way you are using them are fine.

KennyP
01-29-2011, 11:53 PM
Unfortunately the latest additions are causing content to fade out, fade in, and then fade again, before a new page loads.

However, if afterwards I use the browser's back and forward buttons, the initial page fades only one time before the new page loads.

Did I enter everything ok? Temporarily I'll remove the last bit of code...
$(this).css({opacity: 1});

Home page (http://www.billyjoeconor.com/)



(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1350, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
(function(re){
$(document).click(function(e){
var t = e.target;
while (t.tagName && !re[0].test(t.tagName)){
t = t.parentNode || null;
}
if(t && t.tagName && !t.target || re[1].test(t.target)){
e.preventDefault();
$('#d1').animate({opacity: 0}, 700, 'linear', function(){
location = t.href;
$(this).css({opacity: 1});
});
}
});
})([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

jscheuer1
01-30-2011, 02:17 AM
I'm not sure the exact problem. I suspect the 'linear'. The opacity thing with browser Back seems upon closer inspection to only be an issue in Firefox, an important one. It could crop up in other browsers though. But it's what causes d1 to reappear. That part should be solved with a timeout. So, let's do that and drop the linear:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1350, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
(function(re){
$(document).click(function(e){
var t = e.target;
while (t.tagName && !re[0].test(t.tagName)){
t = t.parentNode || null;
}
if(t && t.tagName && !t.target || re[1].test(t.target)){
e.preventDefault();
$('#d1').animate({opacity: 0}, 700, function(){
location = t.href;
t = $(this);
setTimeout(function(){t.css({opacity: 1});}, 100);
});
}
});
})([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

If that doesn't fix it up, we can always go back to what we had. The exception being we need to keep:


})([/^(a|area)$/i, /^_(top|self|parent)$/]);

Which is like 99% likely not a problem in any of this and prevents issues in all browsers.

KennyP
01-30-2011, 10:44 AM
I eliminated "linear" but it didn't make a difference, so I went back to the code as you suggested, shown above. However, there were still some problems...
On some of the page loads, content still faded out, abruptly reappeared, and then faded again before the loading of a new page.
I now went back to the following code and it seems to be working the best:


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
(function(re){
$(document).click(function(e){
var t = e.target;
while (t.tagName && !re[0].test(t.tagName)){
t = t.parentNode || null;
}
if(t && t.tagName && !t.target || re[1].test(t.target)){
e.preventDefault();
$('#d1').animate({opacity: 0}, function(){
location = t.href;
});
}
});
})([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

EDIT:

John, there's a problem on the Friends Page. When you click the link "Click 'n' Say Howdy" at the top of the page, the page scrolls to the message form
anchored at the bottom of the page, and then all the content in that div fades and of course doesn't reappear. If you would please add this additional type
of link clicking to the code, all will then function perfectly.

Also, on the Welcome page, redirection to all referring pages is automatic; there are no mouse clicks to trigger fade out. Can a fade out for this particular
page be added to the page's redirection code below?

Welcome/Splash page (http://www.billyjoeconor.com/welcome.php)


var SplashSeconds = 6;
// Specify the cookie name. The same name needs to be
// specified in the JavaScript of the splash screen
// page.
var CookieName = "SplashCookie";
// End of customization section. //
///////////////////////////////////
function Redirect() {
var url = '';
if(document.cookie.length > 0) {
// Determine begin position of the cookie with the specified name.
var cname = CookieName + '=';
var begin = document.cookie.indexOf(cname);
var end = 0;
if(begin > -1) {
begin += cname.length;
end = document.cookie.indexOf(";",begin);
if(end < begin) { end = document.cookie.length; }
url = document.cookie.substring(begin,end);
}
}
if(url) { location.href = url; }
}
SplashSeconds = parseFloat(SplashSeconds);
setTimeout("Redirect()",parseInt(SplashSeconds*500));

Thanks,

Kenny

KennyP
02-04-2011, 05:51 AM
Hi John:

Since you obviously have been very busy, I've temporarily loaded the previous code for the Friends page. Although the fade out doesn't work well with it, at least it won't make all the messages on the page fade out.

Thanks for your help,

Kenny


(function($){
$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
$(function(){
$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
fleXenv.globalInit();
}
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
});
});
window.onbeforeunload = function(){
$('#d1').animate({opacity: 0});
};
})(jQuery);