Probably a simple script question made worse by my lack of knowledge...

[Kingsly]

I've been tearing my hair out trying to get this to work. I want my page to load and then have an element fade in (in this case, an iframe containing an embedded video). Here's what I've got in the html page editor in wordpress:

<script type="text/javascript"> $(window).load(function(){ 
$('#fade_reel').fadeIn(4000);
});</script>

<div id="fade_reel">
<iframe src="http://player.vimeo.com/video/20950201?title=0&amp%3Bbyline=0&amp%3Bportrait=0&amp%3Bcolor=000000" width="600" height="323" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

But nothing happens. The video loads normally with the rest of the page. Help? My knowledge of this is so basic... I honestly have no business trying to do what I'm doing

 

[elppa]

Just hide the element initially.

<div id="fade_reel" style="display: none;">

 

[Kingsly]

Just hide the element initially.

<div id="fade_reel" style="display: none;">

Just tried that, now the video simply doesn't show. Still no fading...

I tried it this way too:

$('#fade_reel').hide().fadeIn('slow');

Didn't work.

I also tried linking to the script within the page itself:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><script type="text/javascript"> $(window).load(function(){ 
   $('#fade_reel').fadeIn(4000);
});</script>

<div id="fade_reel" style="display: none;">
<iframe src="http://player.vimeo.com/video/20950201?title=0&byline=0&portrait=0&color=000000" width="600" height="323" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

no dice.
I know the div id is functional because I was able to center the video in my css file...

 

[elppa]

I also tried the solution before posting it and it does work... but I was obviously testing in isolation.

The fact the div remained hidden tells us your script is not being executed. Try using $(document).ready in place of $(window).load.

Its quite hard to determine exactly because you have only posted a small amount of markup and script. Are you able to provide more details or a link?

 

[jared_kipe]

Link to your own site/page when you're having trouble like this.

Could be that jQuery isn't loading.
Could be a parse error in some other JS.
Could be another JS library using the $ variable.
Could be a typo in your HTML that you don't see.

 

[manueld]

Just tested this code out and it worked fine for me so if you're loading other stuff on there, you're getting a conflict.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><script type="text/javascript"> $(window).load(function(){ 
   $('#fade_reel').fadeIn(4000);
});</script>

<div id="fade_reel" style="display: none;">
<iframe src="http://player.vimeo.com/video/20950201?title=0&byline=0&portrait=0&color=000000" width="600" height="323" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

 

[Kingsly]

Thanks guys. Okay, my assumption is there is some sort of conflict going on. I didn't even think of that. The site is definitely loading jQuery for other elements so that's gotta be it (don't I need query.min.js though? That specific file doesn't appear to be in my wp folder)

In all it's unfinished glory: http://noteworthyphotography.com/



UPDATE:
Here's where I'm at...

Dug around and found three instances of query.min.js were being loaded, deleted some redundant plugins and links in the code and got it down to one. Checked the url of the .js file being loaded and made sure the same url is reflected in my code.

I also tried changing all the $'s to jQuery's (see below) since reading that wp often runs jQuery in no conflict mode.

I've played with every combination of style="display:none;" and .hide() I can think of.

I also tried adding a <?php wp_enqueue_script("jQuery"); ?> to the header.

All that to say I'm no further along than I was this morning.

Here's the most current version of my code that's live on the above url:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.1"> <script type="text/javascript"> jQuery(document).ready(function(){ 
   jQuery('#fade_reel').hide().fadeIn('4000');
});</script>

<div id="fade_reel">
<iframe src="http://player.vimeo.com/video/20950201?title=0&byline=0&portrait=0&color=000000" width="800" height="430" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

I really appreciate everyone's help. Let's conquer this!

 

[manueld]

Change your inline code to this:

<script type="text/javascript"> jQuery(window).load(function(){  
   jQuery('#fade_reel').hide().fadeIn('4000');
});</script>

<div id="fade_reel">
<iframe src="http://player.vimeo.com/video/20950201?title=0&byline=0&portrait=0&color=000000" width="800" height="430" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

1.You already have jquery loaded in the header. No need to load it again inline.

2. You changed it from window.load to document.ready. Defeats the purpose. document.ready means it waits till the page is loaded which means your iframe is already loaded so it can't really fade in when it's already loaded.

3. You also didn't close your script tag when loading jquery inline. You still need to add </script> even if you're referencing an external file.

Thanks guys. Okay, my assumption is there is some sort of conflict going on. I didn't even think of that. The site is definitely loading jQuery for other elements so that's gotta be it (don't I need query.min.js though? That specific file doesn't appear to be in my wp folder)

In all it's unfinished glory: http://noteworthyphotography.com/



UPDATE:
Here's where I'm at...

Dug around and found three instances of query.min.js were being loaded, deleted some redundant plugins and links in the code and got it down to one. Checked the url of the .js file being loaded and made sure the same url is reflected in my code.

I also tried changing all the $'s to jQuery's (see below) since reading that wp often runs jQuery in no conflict mode.

I've played with every combination of style="display:none;" and .hide() I can think of.

I also tried adding a <?php wp_enqueue_script("jQuery"); ?> to the header.

All that to say I'm no further along than I was this morning.

Here's the most current version of my code that's live on the above url:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.1"> <script type="text/javascript"> jQuery(document).ready(function(){ 
   jQuery('#fade_reel').hide().fadeIn('4000');
});</script>

<div id="fade_reel">
<iframe src="http://player.vimeo.com/video/20950201?title=0&byline=0&portrait=0&color=000000" width="800" height="430" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

I really appreciate everyone's help. Let's conquer this!

 

[Kingsly]

Genius! Thanks manueld!

Okay, one last question... as observed on the live site, there is a white border area around the video. This area expands dynamically based on the content. So, before the video is loaded, it's very short, but when the animation kicks in it expands vertically to contain the video. Is there some way to hide a blank element under the video iframe that'll "prop open" the white area until the animation completes? (I put an 800ms delay function on there to make what I'm talking about more obvious)

thanks!

 

[manueld]

Genius! Thanks manueld!

Okay, one last question... as observed on the live site, there is a white border area around the video. This area expands dynamically based on the content. So, before the video is loaded, it's very short, but when the animation kicks in it expands vertically to contain the video. Is there some way to hide a blank element under the video iframe that'll "prop open" the white area until the animation completes? (I put an 800ms delay function on there to make what I'm talking about more obvious)

thanks!

Set width and height properties of the container div.

<div id="fade_reel" style="display: block; height: 450px; width: 800px;">