Ultimate Fade-in ERROR: DIV with ID "fadeshow1" not found on page."

[familyfanclub]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

No problem on this page: http://thefantasyfootballjunkie.com/ which is where I want the slideshow, however when I look at this page (where I don't want the slideshow): http://thefantasyfootballjunkie.com/blog I get the following error: "Error: DIV with ID "fadeshow1" not found on page."

I believe I followed the directions correctly. I'm using Wordpress, this is my practice site prior to moving it to http://www.familyfanclub.net where I was using v 1.5 of the same script with no issues.

Any suggestions on getting rid of the error? I'm new, please be kind.

[azoomer]

it's because you have the javascript for the slideshow on the page without having the <div id="fadeshow1"></div> that it is referring to. The best solution would be to remove the script and the link to the fadeslideshow.js file from the page in question, and only have it on pages where it is needed, but that may well prove to be a little bit tricky in wordpress. An easy fix could be to put something like this in the body section of the page somewhere:
<div id="fadeshow1" style="display:none;"></div>
I would expect that to get rid of the error.

[familyfanclub]

Hi azoomer, thanks for the suggestion, however that didn't work.

Has anyone gotten this script to work with wordpress?

[azoomer]

Hi Familyfanclub. I have this script working fine on several wordpress installations.
Right now I am looking at your sourcecode for the blog. You still have this

<script type="text/javascript" src="Blog%20%C2%AB%20Family%20Fan%20Club,%20LLC_files/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
        dimensions: [670, 275], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
            ["http://www.familyfanclub.net/images/triathlonsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090790", "", ""],
			["http://www.familyfanclub.net/images/customsectionbanner.png", "http://www.cafepress.com/familyfanclub/4091103", "", ""],			
            ["http://www.familyfanclub.net/images/TNTsectionbanner.png", "http://www.cafepress.com/familyfanclub/6857140", "", ""],	
            ["http://www.familyfanclub.net/images/runningsectionbanner.png", "http://www.cafepress.com/familyfanclub/4087529", "", ""],
            ["http://www.familyfanclub.net/images/cyclingsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090807", "", ""],
            ["http://www.familyfanclub.net/images/swimsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090809", "", ""]//<--no trailing comma after very last image element!
        ],
		displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: ""
    })

	</script>

on that page. And you still do not have this
<div id="fadeshow1"></div>
or this
<div id="fadeshow1" style="display:none;"></div>
on the page.
That is the reason you are still getting the error

[azoomer]

The way I use it in wordpress is in connection with a child theme and the javescript for the slideshow is only inserted on the particular page where it is needed with a conditional statement like this in the functions.php

function js_in_head(){
if(is_front_page()){?>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/fadeslideshow.js"></script>

<?php }}
add_action('wp_head', 'js_in_head');

And I do the same for the other part of the slideshow script ( the part with the dynamic drive credit)
If that will work or not on your wp installation is depending on your configuration, file structure and the way you edit your template. So more info on that will probably be needed to get this working on your site.

[familyfanclub]

Azoomer,

Thanks again for your responses, however I'm not "getting" it.

I'm using a modified Kubrick theme to display the front page as static and putting my posts on the Blog page. I only want the slide show to show up on the front page. I also plan to have many other pages on this site, where I don't want the slide show.

I understand that the code is wanting / looking for the <div id="fadeshow1"></div>, just not sure how to make that go away / resolve the error, while still displaying the slide show on the front page.

I tried to add this to the Blog page in the html: <div id="fadeshow1"></div>
<div id="fadeshow1" style="display:none;"></div> saved and refreshed page and no change.

I tried to add this to the About Us page (/about-us) and now it displays the slideshow, which I don't want.

I also added the function in last post to functions.php file and removed the line from the header.php file that calls the script. Do I need to add something in the header.php to call the function in the functions.php file? (Very noobie I know).

Anyway, thanks again for your help. If this is salvageable, appreciate your continued assistance.

[azoomer]

the script is only looking for the Id so just putting
<div id="fadeshow1" style="display:none;"> on the page should remove the error.
However it would be a waste to have the script on all pages on the entire website if you only need it on the frontpage. I could see that you were trying out some stuff and you were getting closer. But as I said before it's a little bit tricky in wp. I still feel that the best solution is to put the script only where it is needed( the frontpage ). You dont need to call it in the header.php it should be sufficient to use this

function js_in_head(){
if(is_front_page()){?>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/imagearray.js"></script>

<?php }}
add_action('wp_head', 'js_in_head');

In the functions.php
then you would create a new js file called imagearray.js and put this part inside

 

var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
        dimensions: [670, 275], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
            ["http://www.familyfanclub.net/images/triathlonsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090790", "", ""],
			["http://www.familyfanclub.net/images/customsectionbanner.png", "http://www.cafepress.com/familyfanclub/4091103", "", ""],			
            ["http://www.familyfanclub.net/images/TNTsectionbanner.png", "http://www.cafepress.com/familyfanclub/6857140", "", ""],	
            ["http://www.familyfanclub.net/images/runningsectionbanner.png", "http://www.cafepress.com/familyfanclub/4087529", "", ""],
            ["http://www.familyfanclub.net/images/cyclingsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090807", "", ""],
            ["http://www.familyfanclub.net/images/swimsectionbanner.png", "http://www.cafepress.com/familyfanclub/4090809", "", ""]//<--no trailing comma after very last image element!
        ],
		displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: ""
    })

And save the file in same directory as the fadeslideshow .js

If the conditional function ( js_in_head) is placed in the functions.php it should place both of the needed files in the head section of the front page. you may have to experiment a bit to get the file paths right. The last thing you need is to put the <div id="fadeshow1"></div> the rigth place on the frontpage, but you have that right already. If you succeed in this way of doing it you will avoid slowing down your site by loading the script on all the other pages where it is not needed.
I must admit that it is a bit difficult to explain this. Obviously there are many ways to achieve the result you are after. I'm just trying to explain how I did it.

[familyfanclub]

Azoomer, problem solved with the last suggestion.

I also had to add

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

to this:

function js_in_head(){
if(is_front_page()){?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/imagearray.js"></script>

<?php }}
add_action('wp_head', 'js_in_head');

and now it works exactly like I wanted it to. Thank you very much for your help.

Paul

[azoomer]

Yes I see you got it right. Well done.

[dcvet]

I get the same error, but only in one situation, that of using Safari. All other browsers, regardless of OS, this script works fine. In Safari, I get the error messages referring to each of the div id's defined in the page, and you click through those error message boxes, and the website appears - minus the images of course.

suggestions?

it's because you have the javascript for the slideshow on the page without having the <div id="fadeshow1"></div> that it is referring to. The best solution would be to remove the script and the link to the fadeslideshow.js file from the page in question, and only have it on pages where it is needed, but that may well prove to be a little bit tricky in wordpress. An easy fix could be to put something like this in the body section of the page somewhere:
<div id="fadeshow1" style="display:none;"></div>
I would expect that to get rid of the error.