dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Alternating site icons with if/else statement

  1. #1
    Join Date
    Aug 2015
    Posts
    8

    Question Alternating site icons with if/else statement

    Hi there!

    I'm currently learning PHP, and I decided to develop a coin toss site for some good practice. I thought it would be rather interesting and unique to add alternating site icons to go along with which coin you got, e.g. I toss a coin, I get a tails, the site icon is set to a tails. I toss again, I get heads, the site icon is set to heads.

    The only problem is I have no idea how I would do this, or if it is even possible.

    Here's my PHP script so far. If needed I can provide the whole page.

    PHP Code:
    <?php
            $flip 
    rand(0,1);
            if (
    $flip){
                echo 
    '<center><img src="/img/heads.png"></center>'
                echo 
    "<center><h2><b>You tossed <em>Heads</em></b></h2></center>";
            } else {
                echo 
    '<center><img src="/img/tails.png"></center>'
                echo 
    "<center><h2><b>You tossed <em>Tails</em></b></h2></center>";
        }
        
    ?>
    Since this forum seems to be full of experienced developers, thought I would register and ask here. Thank you very much.

  2. #2
    Join Date
    Mar 2012
    Posts
    2,763
    The if statement should work, but there is no such tag as <center>, and there are a number of errors in the code. Here's a working example:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo Coin Toss</title>
    <style>
    body {
        font: normal normal 12px/16px Verdana, Arial, sans-serif;
    }
    .container {
    	width: 320px;
    	margin: 0 auto;
    	background: #ddd;
    	border: 1px solid grey;
    }
    h2 {
        font: normal normal 18px/24px;
    	text-align: center;
    }
    .logo {
    	display: block;
    	width: 40px;
    	margin: 10px auto;
    }
    </style>
    </head>
    <body>    
    <?php	
    $side='tails';
    if (mt_rand (0,1)){ $side='heads'; }
    ?>
      <div class="container">
        <img class="logo" src="img/<?php echo $side;?>.gif">
        <h2>You tossed <em><?php echo $side;?></em></h2>'; 
      </div>
    </body>
    </html>
    The main differences are:

    1. Use a <style> tag in the head (or link an eternal CSS file) to style the page.

    2. <H2> is centred with "text-align: center". Also, instead of setting the font weight to "bold" it is set to "normal" and the font-size set larger. This is more flexible and visually more pleasing.

    3. The image is centred by the class "logo" which sets "display: block" and "margin:10 auto".

    4. The images are changed to .GIFs to support animation against a transparent background. So you can animate the coin toss. Also, it is more usual to store the images in a sub-directory of the directory containing the PHP or HTML file ("img/heads.gif") rather than in a sub-directory of the root ("/img/heads.gif"). They often point to the same place, but if you move the source files for any reason, the relative addressing is less likely to break.
    Last edited by jedaisoul; 08-12-2015 at 08:42 AM.

  3. #3
    Join Date
    Aug 2015
    Posts
    8
    Thanks for the reply. I'm not very experienced with CSS at all, and I've implemented a few changes in the code. However, I'm going to show you my entire code, as it seems the <center> tags are working.

    PHP Code:
    <html>
        <head>
            <title>Coin Toss</title>
            <style>a:link {color: black}</style>
        </head>
        <body style="font-family:Trebuchet MS;">

        <?php
            $flip 
    rand(0,1);
            if (
    $flip){
                echo 
    '<center><img src="/img/heads.png"></center>'
                echo 
    "<center><h2>You tossed <em>Heads</em></h2></center>";
            } else {
                echo 
    '<center><img src="/img/tails.png"></center>'
                echo 
    "<center><h2>You tossed <em>Tails</em></h2></center>";
        }
        
    ?>

        <center><A HREF="javascript:history.go(0)">Flip Again</A></center>
    </html>
    I guess there are two things I would like to accomplish with this code, and that is that the actual coin toss is centered and that the site icon (on this site it's a yellow WD) is the same result as what you got after a flip.

  4. #4
    Join Date
    Mar 2012
    Posts
    2,763
    I repeat, the <center> tag is not valid in HTML5. Your code only works because the browsers are tolerant to legacy code. As you are just starting out, you should be learning HTML5 and CSS3, not legacy code. HTML has changed a lot over the years, and there is a lot of code that should not be used anymore.
    Last edited by jedaisoul; 08-12-2015 at 03:32 PM.

  5. #5
    Join Date
    Aug 2015
    Posts
    8
    I see. Then could I get a pointer to some code that could accomplish what I'm looking for that is directly compatible with my current code?

  6. #6
    Join Date
    Mar 2012
    Posts
    2,763
    I do not understand your question. I've given you code that is a modern CSS equivalent to your HTML styled legacy code, and I've annotated where they differ.

  7. #7
    Join Date
    Aug 2015
    Posts
    8
    I appreciate your help, but as my original question on my original post stated, I'm looking to change the favicon to whatever the result of the flip is.

  8. #8
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    20,355
    I suspect it might not be very effective for a given user, since the browser may cache it, but you could try something like:
    PHP Code:
    <!DOCTYPE HTML>
    <html>
    <head>
      <link rel="shortcut icon" href="http://example.com/myicon_<?php
      
    echo rand(1,2);
    ?>.png />
    </head>
    This would assume you had two potential favicon image files in the web site home directory, named myicon_1.png and myicon_2.png.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

  9. #9
    Join Date
    Mar 2012
    Posts
    2,763
    As NogDog has indicated, you conceptually use the same code to set the favicon as the coin. However, NogDog's code has the disadvantage that it calls the rand function separately. You really want the function called once and the result used for both. So adapting your code, it would be something like:

    HTML Code:
    <!DOCTYPE html>
    <html> 
    <head> 
        <title>Coin Toss</title> 
        <style>
    		body {font-family:'Trebuchet MS';} 
    		a, h2 {
    			text-align: center;
    		}
    		a:link {color: black;}
    		.container {
    			width: 320px;
    			margin: 0 auto;
    		}
    		.logo {
    			display: block;
    			width: 40px;
    			margin: 10px auto;
    		}
    	</style> 
        <?php 
            $flip = rand(0,1); 
            if ($flip){ 
                echo '<link rel="shortcut icon" href="/img/icon-heads.png">';  
            } else { 
                echo '<link rel="shortcut icon" href="/img/icon-tails.png">';  
    		}
    	?>
    </head> 
    <body> 
    	<div class-"container">
        <?php 
            if ($flip){ 
                echo '<img class="logo" src="/img/heads.png">';  
                echo '<h2>You tossed <em>Heads</em></h2>'; 
            } else { 
                echo '<img class="logo" src="/img/tails.png">';  
                echo '<h2>You tossed <em>Tails</em></h2>'; 
    		} 
        ?> 
        <a href="javascript:history.go(0)">Flip Again</a> 
    	</div>
    </html>

  10. #10
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    20,355
    I just saw lots of posts that mostly registered on my tired brain as "blah blah blah random favicon blah blah blah."

    (Week+ of vacation followed by 2 days at laracon.us followed by late flight and crappy baggage handling at Newark Int.'l having me get home at 1:30 am this morning.)
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

  11. #11
    Join Date
    Aug 2015
    Posts
    8
    Quote Originally Posted by jedaisoul View Post
    As NogDog has indicated, you conceptually use the same code to set the favicon as the coin. However, NogDog's code has the disadvantage that it calls the rand function separately. You really want the function called once and the result used for both. So adapting your code, it would be something like:

    HTML Code:
    <!DOCTYPE html>
    <html> 
    <head> 
        <title>Coin Toss</title> 
        <style>
    		body {font-family:'Trebuchet MS';} 
    		a, h2 {
    			text-align: center;
    		}
    		a:link {color: black;}
    		.container {
    			width: 320px;
    			margin: 0 auto;
    		}
    		.logo {
    			display: block;
    			width: 40px;
    			margin: 10px auto;
    		}
    	</style> 
        <?php 
            $flip = rand(0,1); 
            if ($flip){ 
                echo '<link rel="shortcut icon" href="/img/icon-heads.png">';  
            } else { 
                echo '<link rel="shortcut icon" href="/img/icon-tails.png">';  
    		}
    	?>
    </head> 
    <body> 
    	<div class-"container">
        <?php 
            if ($flip){ 
                echo '<img class="logo" src="/img/heads.png">';  
                echo '<h2>You tossed <em>Heads</em></h2>'; 
            } else { 
                echo '<img class="logo" src="/img/tails.png">';  
                echo '<h2>You tossed <em>Tails</em></h2>'; 
    		} 
        ?> 
        <a href="javascript:history.go(0)">Flip Again</a> 
    	</div>
    </html>
    I've tried a slightly modified version of this code. Why add the div class for the main script though? Also, the favicon isn't properly changing even after clearing cache. Here's the code.

    PHP Code:
    <html>
        <head>
            <title>Online Coin Toss</title>
            <style>a:link {color: black}</style>
        </head>
        
    <div style="text-align:center">    
        <!-- Beginning of Adsense -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Coin Flip -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-pub-0354746623500131"
         data-ad-slot="5977595788"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
        <!-- End of Adsense -->
    </div>
        
        <body style="font-family:Trebuchet MS;">
            <div style="text-align:center">
            <title>Coin Flip</title>
            <style>a:link {color: black}</style>
            <?php 
                $flip 
    rand(0,1);
                if (
    $flip){
                    echo 
    '<link rel="icon" href="http://cointoss.xyz/img/heads.ico" />';
                } else {
                    echo 
    '<link rel="icon" href="/http://cointoss.xyz/img/tails.ico" />';
                }
            
    ?>
        </head>
        
        <?php
            
    if ($flip){
                echo 
    '<a href="http://www.cointoss.xyz/info.html"><img src="/img/heads.png"></a>'
                echo 
    '<h2>You tossed <em>Heads</em></a></h2>';
            } else {
                echo 
    '<a href="http://www.cointoss.xyz/info.html"><img src="/img/tails.png"></a>'
                echo 
    '<h2>You tossed <em>Tails</em></h2>';
        }
        
    ?>
                <A HREF="javascript:history.go(0)">Flip Again</A>
            </div>
    </html>

  12. #12
    Join Date
    Mar 2012
    Posts
    2,763
    You've moved some of the head code into the body, and have two </head>'s. That is not going to work. Move:
    Code:
            <title>Coin Flip</title> 
            <style>a:link {color: black}</style> 
            <?php  
                $flip = rand(0,1); 
                if ($flip){ 
                    echo '<link rel="icon" href="http://cointoss.xyz/img/heads.ico" />'; 
                } else { 
                    echo '<link rel="icon" href="/http://cointoss.xyz/img/tails.ico" />'; 
                } 
            ?> 
        </head>
    to come after <head> and delete the duplication.

  13. #13
    Join Date
    Aug 2015
    Posts
    8
    Quote Originally Posted by jedaisoul View Post
    You've moved some of the head code into the body, and have two </head>'s. That is not going to work. Move:
    Code:
            <title>Coin Flip</title> 
            <style>a:link {color: black}</style> 
            <?php  
                $flip = rand(0,1); 
                if ($flip){ 
                    echo '<link rel="icon" href="http://cointoss.xyz/img/heads.ico" />'; 
                } else { 
                    echo '<link rel="icon" href="/http://cointoss.xyz/img/tails.ico" />'; 
                } 
            ?> 
        </head>
    to come after <head> and delete the duplication.
    You're right. I incorrectly closed my body tag with </head> accidentally. However, it's still not working properly. The favicon is staying heads regardless of your result.

    PHP Code:
    <html>
        <head>    
            <title>Online Coin Toss</title> 
            <style>a:link {color: black}</style> 
            <?php  
                $flip 
    rand(0,1); 
                if (
    $flip){ 
                    echo 
    '<link rel="icon" href="http://cointoss.xyz/img/heads.ico" />'
                } else { 
                    echo 
    '<link rel="icon" href="/http://cointoss.xyz/img/tails.ico" />'
                } 
            
    ?> 
        </head>
            
    <div style="text-align:center">    

        <!-- Beginning of Adsense -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Coin Flip -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-pub-0354746623500131"
         data-ad-slot="5977595788"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
        <!-- End of Adsense -->
    </div>
        
        <body style="font-family:Trebuchet MS;">
            <div style="text-align:center">

        <?php
            
    if ($flip){
                echo 
    '<a href="http://www.cointoss.xyz/info.html"><img src="/img/heads.png"></a>'
                echo 
    '<h2>You tossed <em>Heads</em></a></h2>';
            } else {
                echo 
    '<a href="http://www.cointoss.xyz/info.html"><img src="/img/tails.png"></a>'
                echo 
    '<h2>You tossed <em>Tails</em></h2>';
        }
        
    ?>
                <A HREF="javascript:history.go(0)">Flip Again</A>
            </div>
    </html>

  14. #14
    Join Date
    Aug 2015
    Posts
    8
    Nevermind. I fixed it.

    PHP Code:
    echo '<link rel="icon" href="/http://cointoss.xyz/img/tails.ico" />'
    The
    Code:
    /
    at the beginning of the tails.ico URL was problematic. I removed it and the site functions great. Feel free to take a look at it.

    http://www.cointoss.xyz

    Thank you for the help guys.

  15. #15
    Join Date
    Mar 2012
    Posts
    2,763
    Well, I'm glad that you sorted it, but there is still an error: You have a div between </head> and <body>. That is wrong.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles