Customised sun_button / sun_banner Example
- This is NOT a real site !

Notice: Undefined index: district in /home/sites/beteljuice.co.uk/public_html/DEMOS/betel_who/who_check.php on line 239 corporate bad guys

Your Amazing Astronomy Page ...

So here is your super groovy astronomy page. It has all sorts of info that you don't understand and it's full of lots of really cool code that you don't understand either !

There's not much real estate left after all the images and tables so you only have room for a small "day / night pie chart". (It could be any size)

Herewith is a example of a combination of both a smallish 'button' pie-chart and a 'banner' pop-up - Go to the COG symbol top-right to play with it !

This is the sunlight hours for the day, you just put your mouse over it and up will come a bigger 'banner' with a legend telling you what's what.

Wouldn't it be nice if everything were already worked out for you !

Hours Sun
<Hover>
It's a bit 'fierce' unless you have selected the "Transition Effect - ON" option which fades the 'pop-up' in and out.

However; this does require jquery library to be loaded, because we need to ensure that although the pop-up is made 'invisible', it could still be covering active links / elements in your page.

Both the images are extremely customisable and can be modified by 'posting' variables, and that is how this DEMO page does all its updating.

However your customised set of 'button' and 'banner' scripts will have your options built-in, which together with the coding shown below in the grey panel, and a .ttf font you will be able to down-load as a 'zipped' file should you choose.

In sun_banner.php there is an array (or two) for Non-English speakers to change the text wording.

B.T.W. - On this demo site only menu items with * have useful content !!! ...

 <meta http-equiv="x-ua-compatible" content="IE=edge" />

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
 </script>
 
 <script>
 // Shorthand for $( document ).ready()
 $(function() {
    $("#beteljuice_stuff").hover(function () { // especially for transitions
    $("#sun_pop").show();
    $("#sun_pop").removeClass('off');
    el = document.querySelector(".sun_pop_out");
    el.className = "sun_pop_in";

    }, function () {
        if(el = document.querySelector(".sun_pop_in")) {
            el.className = "sun_pop_out";
        } else {
           $("#sun_pop").hide();
        }
        $("#sun_pop").on("transitionend",
            function(e){
                $("#sun_pop").addClass('off');
                $(this).off(e);
        });
    });
    // END hover stuff
 });
 </script> 
 <style type="text/css">
 #beteljuice_stuff {
   width: 75px;
   height: 75px;
 }
 
 .sun_pop_in { 
   height: 220px;
   width: 420px;
   position: relative;
   top: -151px;
   left: -420px;
   z-index: 2000; 
   background-color: rgba(240, 172, 84, .6);
   padding: 10px;
   border-radius: 15px;
   display: block;
   opacity: 1;
   transition-property: opacity;
   transition-duration:1s;
   transition-timing-function: ease-out;
 }
 
 .sun_pop_out { 
   height: 220px;
   width: 420px;
   position: relative;
   top: -151px;
   left: -420px;
   background-color: rgba(240, 172, 84, .6);
   padding: 10px;
   border-radius: 15px;
   display: block;
   opacity: 0;
   transition-property:opacity;
   transition-duration:1.5s;
   transition-timing-function: ease-in;
 }
 
 .off {
   z-index: -2000;
 } </style>

   -- your 'container' --

   <div id = "beteljuice_stuff">
      <img src = "sun_button.php" id = 'sun'>
      <div id = "sun_pop" class = "">
        <img src = "sun_banner.php" id = 'popup'>
      </div>
   </div> <!-- end beteljuice_stuff -->

   -- end your 'container' --

 <script>   // optional image updater
  $(document).ready(function(){
    update(); // immediate put all images in the same place / time
    setInterval(update, 60*1000);
  });


   function update(){
     var popnow = Date.now();
     $("#popup").attr('src', 'sun_banner.php?'+popnow);
     $("#sun").attr('src', 'sun_button.php?'+popnow);
   }

 </script>
   
   
Another beteljuice plaything