Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post

    javascript detection

    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
    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    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.

  • Users who have thanked DrDOS for this post:

    nick2price (07-15-2012)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post
    Thanks for the reply. I have managed to get this far
    Code:
    <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

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Just add the following to the JavaScript

    Code:
    document.getElementById('slide').getElementsByTagName('img')[0].style.display = 'none';
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post
    Sorry, think I am still making an error as it only displays the image. I have changed things to
    Code:
    <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

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Oops - I misread the class as an id.

    replace the getElementById('slide') with getElementsByClassName('slide')[0]
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    nick2price (07-15-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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:
    Code:
    <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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nick2price (07-15-2012)

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post
    Kool, thats brilliant, this is what I have
    Code:
    <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.
    Last edited by nick2price; 07-15-2012 at 11:03 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Hmmm...
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •