javascript detection

[nick2price]

Hi, what I am trying to do is display a javascript slideshow if the user has javascript, and a plain image if they dont. So I have the following which doesnt quite work

<div>
<noscript>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
</noscript>
<script type="javascript">
    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
</script>
</div>

I have tried it without the script type part, but what this does is place the slideshow below where the image would be. What I need it to do is replace the image completely and occupy its space. Each one on its own displays perfectly and where it should do. So in essense, I need a way to say if they have javascript, place the slideshow in position A, else if they have no javascript, place the image in position A.

Any advise appreciated

[DrDOS]

Oh noes, not that way. Just put the img in as it were just a regular image. If javascript isn't enabled ( I would like to know what % these days run without javascript ) it will just show as a regular image. If javascript works then replace the src of the image tag with whatever the slide show says.

[nick2price]

Thanks for the reply. I have managed to get this far

<div class="slide">
      	<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
      	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
</div>

I am not quite sure though how to replace the image source if javascript is enabled. At the moment with the above, if javascript is enabled, it displays both the image and the slideshow.

Cheers

[felgall]

Just add the following to the JavaScript

document.getElementById('slide').getElementsByTagName('img')[0].style.display = 'none';

[nick2price]

Sorry, think I am still making an error as it only displays the image. I have changed things to

<div class="slide">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
    <script language="javascript">
		document.getElementById('slide').getElementsByTagName('img')[0].style.display = 'none';
		<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
    </script>
</div>

I think I am now on the right tracks, just not quite there yet. Is there something I need to be doing differently?

Cheers

[felgall]

Oops - I misread the class as an id.

replace the getElementById('slide') with getElementsByClassName('slide')[0]

[Old Pedant]

But MSIE 7 (which unfortunately is still with us) doesn't understand getElementsByClassName(), so if you want to support *ALL* browsers, an easy answer would be just to give the <img> an arbitrary id.

Thus:

<div class="slide">
    <img id="zamboni73" src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
    <script type="text/javascript">
		document.getElementById("zamboni73").style.display = "none";
		<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
    </script>
</div>

But pardon me, what happens if, in the PHP code, the meteor_slideshow function does *NOT* exist???

Now, if javascript *IS* enabled, you are stuck with a page with no image AND no slideshow!

So wouldn't it make more sense to do this:

<div class="slide">
    <img id="zamboni73" src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
<?php 
if ( function_exists( 'meteor_slideshow' ) ) 
{
?>
    <script type="text/javascript">
		document.getElementById("zamboni73").style.display = "none";
    </script>
<?php
    meteor_slideshow(); 
}  
?>
</div>

So now the image is only hidden *IF* the slideshow exists AND IF javascript is enabled.

Oh...and language="javascript" is long obsolete.

[nick2price]

Kool, thats brilliant, this is what I have

<div class="slide">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
        <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
        
		<script language="javascript">
            document.getElementsByClassName('slide')[0].getElementsByTagName('img')[0].style.display = 'none';
        </script>
    </div>

If javascript is enabled, the slideshow plays. If not, the image displays. The only problem I have now is that if the image is displayed, although the slideshow isnt visible because of no javascript enabled, it takes up space and pushes everything down. So what I need now is to remove the slideshow if javascript is not on. I know I can use the <noscript> tag, but as the above uses javascript to replace the tags, I assume I cant use this in a noscript tag. Is there another option?

Cheers

Edited with the above code, same result with the space being there though so still need to try and remove the slideshow if image is displayed.

[Old Pedant]

Hmmm...

<div class="slide" id="NOJS">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/reviews-slide.png"></img>
</div>
<div class="slide" id="WITHJS" style="display: none;">
        <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }  ?>
</div>
<?php if ( function_exists( 'meteor_slideshow' ) ) { ?>
<script type="text/javascript">
      document.getElementById("NOJS").style.display = "none";
      document.getElementBYId("WITHJS").style.display = "block";
</script>
<?php } ?>

I think that does it.

SCENARIO 1:

Assume JS is disabled and the meteor_slideshow() function does exist.

The above will end up creating the slideshow code in the SECOND <div class="slide">.

But because JS is disabled, the code to hide the first <div> and show the second <div> won't run, so the slideshow space won't show up.

SCENARIO 2:

JS is enabled. The slideshow function doesn't exist.

Because the slideshow function doesn't exist, the JS code to display the second <div> won't be dropped in the page.

Because it doesn't exist, there will be no content in the second <div>, but since that div is hidden it doesn't matter.

SCENARIO 3:

JS is enabled. The slideshow function exists.

The second <div> gets the slideshow content.

Because the slideshow exists, the JS code *DOES* get dropped into the page.

Because JS is enabled, it hides the first <div> with the image and displays, instead, the <div> with the slideshow.

[nick2price]

Fantastic, works perfectly. It didnt at first but after a while I saw you had a very small typo and gave the second getElementById a capital Y

Thank you everyone for the help