Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: open

jQuery background fade

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month