Welcome to WebmasterWorld Guest from 54.147.63.124

Forum Moderators: open

Message Too Old, No Replies

jQuery background fade

     
9:10 am on Oct 7, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 20, 2002
posts: 179
votes: 0


Once the video is clicked, I need the backgrounds to fade using the jQuery script below.
I've got a .click function going for the id="fade" but nothing is fading.
I tried the id="player", too.
The syntax is probably off but I show no errors.
The hover needs to go because the video is now clicked.
I'd appreciate the help before I'm bald.
Thank you.

<script>
$(document).ready(function(){
$("#fade").click(function(){
$(".fadeArea, #seats").hover(function(){
$(this).stop().animate({"opacity": "0.25"}, 5000);
},
function() {
$(this).stop().animate({"opacity": "1"}, 5000);
});
});
});
</script>

<div class="fadeArea">

</div>

<div>
<p id="player" class="video"><a href="http://www.site.com/go/getflashplayer" target="_blank"> <u>You must upgrade your Adobe Flash Player to see this video</u></a></p>
</div>

<div id="fade" style="text-align:center; margin: auto">
<script type="text/javascript">var so = new SWFObject('http://site.com/videos/HD/player.swf','mpl','720','404','9.0.115');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','opaque');
so.addParam('flashvars','&duration=15&file=http://www.site.com/videos/HD/foggy_alley.mp4&image=http://www.site.com/img/splash/foggy_alley.png&backcolor=000000&frontcolor=efcb89&lightcolor=efcb89&screencolor=000099&controlbar=over&link=http://www.site.com/directors1.php&linktarget=_self&stretching=none&wmode=opaque&plugins=hd-1&hd.file=http://www.site.com/videos/HD/foggy_alley.mp4&hd.state=true');
so.write('player');</script>
</div>

<div><img id="seats" src="img/seats.jpg" style="width: 100%; height: 150px; margin-top: 515px"></div>
2:28 pm on Oct 7, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


Have you tried inserting an alert() in your fade function to see if it ever gets called? I don't work with Flash, but I wouldn't be surprised if Flash objects do not pass clicks through to the browser.
5:23 pm on Oct 7, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 20, 2002
posts: 179
votes: 0


Yes...You're right. I inserted an alert...nothing. Is there any workaround?
Thanks
12:04 am on Oct 8, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 20, 2002
posts: 179
votes: 0


At first, I was thinking of using an iframe. But now it works cross-browser if you simply replace .click with .mousedown

Thanks for the tip. Always best to do a little testing. I was quickly able to determine the browser not responding by calling on an alert from an id in the body tag itself.
3:31 am on Oct 8, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


I'm glad you got it sorted. I wouldn't have expected mousedown to work either, frankly. All I knew was that in days gone by, Flash had a history of being grafted onto the screen. I was going to suggest that you dip your toes in the waters of HTML 5 and the <video> tag, again with no actual knowledge or experience on my part. Anyway, I just did a quick search and there is a lot of information about Flash and HTML 5 if you hit a dead end. Good luck!
4:22 am on Oct 8, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 20, 2002
posts: 179
votes: 0


Setting the video wmode to transparent somehow helps perhaps for older browsers.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members