homepage Welcome to WebmasterWorld Guest from 54.161.166.171
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery background fade
zoobie




msg:4371821
 9:10 am on Oct 7, 2011 (gmt 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>

 

rainborick




msg:4371920
 2:28 pm on Oct 7, 2011 (gmt 0)

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.

zoobie




msg:4371998
 5:23 pm on Oct 7, 2011 (gmt 0)

Yes...You're right. I inserted an alert...nothing. Is there any workaround?
Thanks

zoobie




msg:4372127
 12:04 am on Oct 8, 2011 (gmt 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.

rainborick




msg:4372158
 3:31 am on Oct 8, 2011 (gmt 0)

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!

zoobie




msg:4372180
 4:22 am on Oct 8, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved