27 Replies Latest reply on Jun 3, 2013 8:00 AM by Zaxist

    5 message text slider

    rbmediamonkey

      Hi,

       

      dont suppose someone could put me on the right path to code a slideshow of 5 messages/captions which is looped??

       

      all the messages are taken from a json file, I need the loop to be 3 messages long i.e. 1, 2, 3 start again then 4, 5, 1 

       

      any help will be appreciated

       

      Thanks

        • 1. Re: 5 message text slider
          Zaxist Level 4

          you can use setInterval() function to make delay and loop your text slide

           

          this sample will show you number 0 to 4 with unlimited repeat every 1 second

           

           

           

          i = 0;

          setInterval(function() {

                              // this code is executed every 1000 milliseconds:

                                               

                                        // this line will set text box with i value

                                                 sym.$("Text").html(""+i+"")

                                               // this line will increase our i value and could use for our step in Json function

                                                 i++;

           

                                                 // this line will reset i value and  make sure we will never go more than 5 step

                                                 if ( i == 5 ) { i = 0}

                                                                                          }, 1000);

           

           

          Zaxist

          • 2. Re: 5 message text slider
            rbmediamonkey Level 1

            Hi Zaxist,

             

            Just wanted to say thanks for your help! Just wondering within your function how/whereabouts to include the json import code?

             

            I'm importing json_encode held in php array within php file

             

            Thanks

            • 3. Re: 5 message text slider
              Zaxist Level 4

              how did you get your message with Json right now ? you just put thoese lines after setInterval(function() {

               

               

              if you had problems paste your codes here i will help you

               

              Zaxist...

              • 4. Re: 5 message text slider
                rbmediamonkey Level 1

                I have previously used this:

                 

                $.ajax({

                    url: 'ajax.php',

                    dataType: 'json',

                    success: function(data) {

                        sym.$("PlaceholderONE").html(data);

                    }

                });

                 

                to bring in my information, but now i've changed the ajax.php to an array im not sure how to update my previous function above to tie in with your code

                • 5. Re: 5 message text slider
                  Zaxist Level 4

                  if you can paste your JSON code from your php file, then i can help you with that

                   

                  Zaxist

                  • 6. Re: 5 message text slider
                    rbmediamonkey Level 1

                    here it is:

                     

                    <?php

                     

                    class XmlToJson {

                     

                    public static function Parse ($url) {

                     

                    $fileContents= file_get_contents($url);

                     

                    $fileContents = str_replace(array("\n", "\r", "\t"), '', $fileContents);

                     

                    $fileContents = trim(str_replace('"', "'", $fileContents));

                     

                    $simpleXml = simplexml_load_string($fileContents);

                     

                    $json = json_encode($simpleXml);

                     

                    return $json;

                     

                    }

                     

                    }

                     

                     

                    $msg1 =

                        $jsone = XmlToJson::Parse("http://www.microgaming.co.uk/pokerfeeds/WebServiceViewOnline.asmx/ViewOnlineXML");

                        $jsond = json_decode($jsone, true);

                        $totalPlayers = $jsond['GLOBAL']['@attributes']['totalPlayers'];

                        $filledSeats = $jsond['GLOBAL']['@attributes']['filledSeats'];

                        echo '<h2>Total Player Count</h2> ' . $totalPlayers . ' Players Online';

                     

                    $msg2 =

                        $jsone = XmlToJson::Parse("https://mppv2valueadds3.valueactive.eu/MPP_BadBeatFeed/default.aspx");

                        $jsond = json_decode($jsone, true);

                        $name = $jsond['data']['struct']['var']['@attributes']['name'];

                        $initial = $jsond['data']['struct']['var']['struct']['var'][0]['number'];

                        $increment = $jsond['data']['struct']['var']['struct']['var'][1]['number'];

                           

                        echo '<script>

                           

                            function formatDollar(num) {

                                var p = (num / 100).toFixed(2).split(".");

                                return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                    return  num + (i && !(i % 3) ? "," : "") + acc;

                                }, "") + "." + p[1];

                            }       

                            var total = ' . $initial . '  // put your initial value here

                           

                            var addition = Math.round(' . $increment . ');

                           

                            setTimeout(function ajaxStuff() {

                                var result = total += addition// you can increment by anything you like here

                                var jackpot = formatDollar(result);

                                    document.getElementById("counter").innerHTML = jackpot;

                                setTimeout(ajaxStuff, 1000);

                            }, 1000);

                         

                            </script>';

                     

                     

                            echo '<h2>Bad Beat Jackpot</h2>';

                           

                            echo '<span id="counter"></span>';

                     

                    $msg3 = echo '<h2>The first online poker network</h2> to offer real play poker on Android mobile devices.';

                     

                    $msg4 = echo '<h2>The first online poker network</h2> to offer a fast-fold poker variant, Blaze.';

                     

                    $msg5 = echo '<h2>The first online poker network</h2> management board, created in 2011.';

                     

                     

                    $data = array($msg1, $msg2, $msg3, $msg4, $msg5);

                     

                    ?>

                    • 7. Re: 5 message text slider
                      Zaxist Level 4

                      i never worked with this type of xml to json converting by php, i'm not sure but i think this might work for you

                       

                      i = 0;

                      setInterval(function() {

                                          // this code is executed every 1000 milliseconds:                             

                      $.ajax({

                          url: 'ajax.php',

                          dataType: 'json',

                          success: function(data) {

                              sym.$("PlaceholderONE").html(data[i]);

                          }

                      });                                 

                      i++;

                      if ( i == 5 ) { i = 0}

                      }, 1000);

                       

                       

                      Zaxist

                      • 8. Re: 5 message text slider
                        rbmediamonkey Level 1

                        unfortunately no joy yet, dont suppose you have any other ideas??

                        • 9. Re: 5 message text slider
                          Zaxist Level 4

                          can you give me the project that you said worked when was not array ?

                           

                          by see that i can help you to make it in array version

                           

                          and in the end i think the problem shouid be with your php codes

                           

                           

                          Zaxist

                          • 10. Re: 5 message text slider
                            rbmediamonkey Level 1

                            I am currently just testing it on a standard array, it's returning nothing:

                             

                            <?php

                             

                            $msg1 =    echo 'Total Player Count Players Online';

                             

                            $msg2 =    echo 'Bad Beat Jackpot';

                                   

                            $msg3 = echo 'The first online poker network to offer real play poker on Android mobile devices.';

                             

                            $msg4 = echo 'The first online poker network to offer a fast-fold poker variant, Blaze.';

                             

                            $msg5 = echo 'The first online poker network management board, created in 2011.';

                             

                             

                            $data = array($msg1, $msg2, $msg3, $msg4, $msg5);

                             

                            ?>

                            • 11. Re: 5 message text slider
                              Zaxist Level 4

                              it return nothing because its not in Json standard format, and if you test it in offline mode it will not work in edge

                              • 12. Re: 5 message text slider
                                rbmediamonkey Level 1

                                some good news i now have a version of it working!!

                                 

                                http://www.manninmedia.co.im/micro5/frame-test.html

                                 

                                it's not quite correct because of the setInterval function delays the first message from showing straightaway.

                                 

                                i.e. the code below the first message doesnt show up until after 5 secs, which is what i need the interval to be. however I dont need the interval at the start??

                                 

                                any ideas??

                                 

                                i = 0;

                                setInterval(function() {

                                 

                                 

                                 

                                // this code is executed every 1000 milliseconds:                             

                                 

                                $.ajax({type:    'POST',

                                                 url:     'ajax.php',

                                                 data:    'id=testdata',

                                                 cache:   false,

                                                 success: function(data){

                                                     var tmp = data.split(",");

                                                     $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                 }

                                                });

                                 

                                i++;

                                if ( i == 5 ) { i = 0}

                                }, 5000);

                                 

                                and for the array

                                 

                                <?php

                                 

                                $msg1 = 'Total Player Count Players Online';

                                 

                                $msg2 =    'Bad Beat Jackpot';

                                       

                                $msg3 = 'The first online poker network to offer real play poker on Android mobile devices.';

                                 

                                $msg4 = 'The first online poker network to offer a fast-fold poker variant Blaze.';

                                 

                                $msg5 = 'The first online poker network management board, created in 2011.';

                                 

                                 

                                $msgarray = array($msg1, $msg2, $msg3, $msg4, $msg5);

                                 

                                foreach($msgarray as $a)

                                    echo $a.",";

                                 

                                ?>

                                 

                                thanks

                                • 13. Re: 5 message text slider
                                  Zaxist Level 4

                                  ok, thats good, this should be make it work correct...

                                   

                                  i = 0;

                                   

                                  $.ajax({type:    'POST',

                                                   url:     'ajax.php',

                                                   data:    'id=testdata',

                                                   cache:   false,

                                                   success: function(data){

                                                       var tmp = data.split(",");

                                                       $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                   }

                                                  });

                                  i++;

                                   

                                   

                                  setInterval(function() {

                                   

                                  // this code is executed every 1000 milliseconds:                            

                                   

                                  $.ajax({type:    'POST',

                                                   url:     'ajax.php',

                                                   data:    'id=testdata',

                                                   cache:   false,

                                                   success: function(data){

                                                       var tmp = data.split(",");

                                                       $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                   }

                                                  });

                                   

                                  i++;

                                  if ( i == 5 ) { i = 0}

                                  }, 5000);

                                  • 14. Re: 5 message text slider
                                    rbmediamonkey Level 1

                                    it now loads from start thanks

                                     

                                    however it doesnt seem to start on message 1 it starts on message 2 when it first loads??

                                     

                                    message 1 is shown eventually when it starts over

                                    • 15. Re: 5 message text slider
                                      Zaxist Level 4

                                      there is no different between your first time load and first reload

                                       

                                      i have no idea what makes it run from the second message for the first time, if your ' i ' value is zero for the first time it should be load your first message at first start

                                       

                                      Zaxist

                                      • 16. Re: 5 message text slider
                                        rbmediamonkey Level 1

                                        hi there,

                                         

                                        dont know if your about? but i hope you can help me again.

                                         

                                        the banner is more or less now working as it should, however in one of the messages there is a div with the ID of counter which a dynamic price is fed into using this function here:

                                         

                                        setTimeout(function ajaxStuff() {

                                        var result = total += addition// you can increment by anything you like here

                                        var jackpot = formatDollar(result);

                                        document.getElementById("counter").innerHTML = jackpot;

                                        setTimeout(ajaxStuff, 1000);

                                        }, 1000);

                                         

                                        the function works and the information does come through on some tests, however the only way I've managed to get it to show up so far is by sticking the above function within the setInterval(function() we made yesterday.

                                         

                                        is does show up, but again after a lengthly delay and thats because I guess it's in a interval function firing every 5 seconds. dont suppose you know how i might tell it to fire straightaway??

                                         

                                        also still having that weird issue of message 2 showing up first?? current full code is below. thanks!

                                         

                                         

                                         

                                        i = 0;

                                         

                                         

                                         

                                        $.ajax({type:    'POST',

                                                         url:     'ajax.php',

                                                         data:    'id=testdata',

                                                         cache:   false,

                                                         success: function(data){

                                                             var tmp = data.split(",");

                                                             $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                         }

                                                        });

                                        i++;

                                         

                                         

                                         

                                         

                                        setInterval(function() {

                                         

                                        // this code is executed every 1000 milliseconds:  

                                         

                                        setTimeout(function ajaxStuff() {

                                        var result = total += addition// you can increment by anything you like here

                                        var jackpot = formatDollar(result);

                                        document.getElementById("counter").innerHTML = jackpot;

                                        setTimeout(ajaxStuff, 1000);

                                        }, 1000);

                                         

                                        function formatDollar(num) {

                                        var p = (num / 100).toFixed(2).split(".");

                                        return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                        return  num + (i && !(i % 3) ? "," : "") + acc;

                                        }, "") + "." + p[1];

                                        }

                                         

                                        $.ajax({type:    'POST',

                                                         url:     'ajax.php',

                                                         data:    'id=testdata',

                                                         cache:   false,

                                                         success: function(data){

                                                             var tmp = data.split(",");

                                                             $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                         }

                                                        });

                                         

                                        i++;

                                        if ( i == 5 ) { i = 0}

                                        }, 5000);

                                         

                                         

                                         

                                         

                                         

                                        // Make it happen when the browser resizes

                                        $(window).on('resize', function(){

                                             scaleStage();

                                        });

                                         

                                        // Make it happen when the page first loads

                                        $(document).ready(function(){

                                            scaleStage();

                                        });

                                        • 17. Re: 5 message text slider
                                          Zaxist Level 4

                                          For start immidiately you should use a function like this :

                                           

                                          i=0

                                          myFnc = function() {

                                              // Do something every 1 seconds

                                          sym.$("Text").html(i)

                                          i++;

                                           

                                           

                                              setTimeout(myFnc, 1000);

                                          };

                                           

                                          myFnc();

                                           

                                          Zaxist

                                          • 18. Re: 5 message text slider
                                            Zaxist Level 4

                                            Or you can use setInterval too with function like this :

                                             

                                            i=0

                                            myFnc = function() {

                                                // Do something every 1 seconds

                                            sym.$("Text").html(i)

                                            i++;

                                            };

                                            setInterval(myFnc, 1000);

                                            myFnc();

                                             

                                            Zaxist

                                            • 19. Re: 5 message text slider
                                              rbmediamonkey Level 1

                                              thanks for suggestions how would I change this:

                                               

                                              sym.$("Text").html(i)

                                               

                                              to capture the jackpot variable as below:

                                               

                                              document.getElementById("counter").innerHTML = jackpot;

                                              • 20. Re: 5 message text slider
                                                Zaxist Level 4

                                                no need anything to do, i used i variable here to show repeat, it will repeat it without i variable, you just replace yours with mine in code section

                                                • 21. Re: 5 message text slider
                                                  rbmediamonkey Level 1

                                                  ok thanks this is what I have so far:

                                                   

                                                  http://www.manninmedia.co.im/micro5/frame-test.html

                                                   

                                                  the value eventually shows up, but the banner goes through one cycle though and then is shown right through thereafter as it should.

                                                   

                                                  but any clue how it can show up on start/first run??

                                                   

                                                  my code:

                                                   

                                                  function formatDollar(num) {

                                                  var p = (num / 100).toFixed(2).split(".");

                                                  return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                                  return  num + (i && !(i % 3) ? "," : "") + acc;

                                                  }, "") + "." + p[1];

                                                  }

                                                   

                                                  myFnc = function() {

                                                  var result = total += addition;

                                                  var jackpot = formatDollar(result);

                                                  var myObject = document.getElementById("counter");

                                                  myObject.innerHTML = jackpot;

                                                  };

                                                   

                                                  setInterval(myFnc, 1000);

                                                   

                                                   

                                                  var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

                                                   

                                                  sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

                                                  "transform-origin":"0 0",

                                                  "-ms-transform-origin":"0 0",

                                                  "-webkit-transform-origin":"0 0",

                                                  "-moz-transform-origin":"0 0",

                                                  "-o-transform-origin":"0 0"

                                                  });

                                                   

                                                  function scaleStage() {

                                                      var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

                                                      var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

                                                   

                                                      var parentWidth = stage.parent().width(); // Get the parent of the stage width

                                                      var stageWidth = stage.width(); // Get the stage width

                                                      var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                                                      var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                                                   

                                                  // Rescale the stage!

                                                       stage.css('transform', 'scale(' + rescale + ')');

                                                      stage.css(  '-o-transform', 'scale(' + rescale + ')');

                                                       stage.css('-ms-transform', 'scale(' + rescale + ')');

                                                      stage.css('-webkit-transform', 'scale(' + rescale + ')');

                                                       stage.css('-moz-transform', 'scale(' + rescale + ')');

                                                      stage.css('-o-transform', 'scale(' + rescale + ')');

                                                      parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

                                                  }

                                                   

                                                  i = 0;

                                                   

                                                   

                                                  $.ajax({type:    'POST',

                                                                   url:     'ajax.php',

                                                                   data:    'id=testdata',

                                                                   cache:   false,

                                                                   success: function(data){

                                                                       var tmp = data.split(",");

                                                                       $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                                   }

                                                                  });

                                                  i++;

                                                   

                                                   

                                                   

                                                   

                                                  setInterval(function() {

                                                   

                                                  // this code is executed every 1000 milliseconds:  

                                                   

                                                   

                                                  $.ajax({type:    'POST',

                                                                   url:     'ajax.php',

                                                                   data:    'id=testdata',

                                                                   cache:   false,

                                                                   success: function(data){

                                                                       var tmp = data.split(",");

                                                                       $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                                   }

                                                                  });

                                                   

                                                  i++;

                                                  if ( i == 5 ) { i = 0}

                                                  }, 5000);

                                                   

                                                   

                                                   

                                                   

                                                   

                                                  // Make it happen when the browser resizes

                                                  $(window).on('resize', function(){

                                                       scaleStage();

                                                  });

                                                   

                                                  // Make it happen when the page first loads

                                                  $(document).ready(function(){

                                                      scaleStage();

                                                      myFnc();

                                                  });

                                                  • 22. Re: 5 message text slider
                                                    rbmediamonkey Level 1

                                                    me again sorry!

                                                     

                                                    i have one final task now, which i hope you may know an answer to.

                                                     

                                                    http://www.manninmedia.co.im/micro5/frame-test.html

                                                     

                                                    the logo on the banner, is to also act as a next button between rotations

                                                     

                                                    i.e. when the logo pauses to show a message, if you click the logo within that pause it will rotate then show next message.

                                                     

                                                    now I had this working on a previous version of the banner, by using:

                                                     

                                                    sym.play();

                                                     

                                                    with specific frame number that I wanted to play from, it worked but that was because all items/symbols were connected to the timeline.

                                                     

                                                    unfortunately now, the logo is on the timeline but the messages change every 5 seconds using setInterval() function.

                                                     

                                                    so if I do use the sym.play(); function granted the logo rotates fine, but the messages default back to the start.

                                                     

                                                    this is the closest i've been to finishing this banner, so I hope there is a solution.

                                                     

                                                    my code currently:

                                                     

                                                    function formatDollar(num) {

                                                     

                                                    var p = (num / 100).toFixed(2).split(".");

                                                     

                                                    return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                                     

                                                    return  num + (i && !(i % 3) ? "," : "") + acc;

                                                     

                                                    }, "") + "." + p[1];

                                                     

                                                    }

                                                     

                                                     

                                                     

                                                    myFnc = function() {

                                                     

                                                    var result = total += addition;

                                                     

                                                    var jackpot = formatDollar(result);

                                                     

                                                    var myObject = document.getElementById("counter");

                                                     

                                                    myObject.innerHTML = jackpot;

                                                     

                                                    };

                                                     

                                                     

                                                     

                                                    setInterval(myFnc, 1000);

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

                                                     

                                                     

                                                     

                                                    sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

                                                     

                                                    "transform-origin":"0 0",

                                                     

                                                    "-ms-transform-origin":"0 0",

                                                     

                                                    "-webkit-transform-origin":"0 0",

                                                     

                                                    "-moz-transform-origin":"0 0",

                                                     

                                                    "-o-transform-origin":"0 0"

                                                     

                                                    });

                                                     

                                                     

                                                     

                                                    function scaleStage() {

                                                     

                                                        var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

                                                     

                                                        var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

                                                     

                                                     

                                                     

                                                        var parentWidth = stage.parent().width(); // Get the parent of the stage width

                                                     

                                                        var stageWidth = stage.width(); // Get the stage width

                                                     

                                                        var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                                                     

                                                        var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                                                     

                                                     

                                                     

                                                    // Rescale the stage!

                                                     

                                                         stage.css('transform', 'scale(' + rescale + ')');

                                                     

                                                        stage.css(  '-o-transform', 'scale(' + rescale + ')');

                                                     

                                                         stage.css('-ms-transform', 'scale(' + rescale + ')');

                                                     

                                                        stage.css('-webkit-transform', 'scale(' + rescale + ')');

                                                     

                                                         stage.css('-moz-transform', 'scale(' + rescale + ')');

                                                     

                                                        stage.css('-o-transform', 'scale(' + rescale + ')');

                                                     

                                                        parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

                                                     

                                                    }

                                                     

                                                     

                                                     

                                                    i = 0;

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    $.ajax({type:    'POST',

                                                     

                                                                     url:     'ajax.php',

                                                     

                                                                     data:    'id=testdata',

                                                     

                                                                     cache:   false,

                                                     

                                                                     success: function(data){

                                                     

                                                                         var tmp = data.split(",");

                                                     

                                                                         $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                     

                                                                     }

                                                     

                                                                    });

                                                     

                                                    i++;

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    setInterval(function() {

                                                     

                                                     

                                                     

                                                    // this code is executed every 1000 milliseconds: 

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    $.ajax({type:    'POST',

                                                     

                                                                     url:     'ajax.php',

                                                     

                                                                     data:    'id=testdata',

                                                     

                                                                     cache:   false,

                                                     

                                                                     success: function(data){

                                                     

                                                                         var tmp = data.split(",");

                                                     

                                                                         $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                     

                                                                     }

                                                     

                                                                    });

                                                     

                                                     

                                                     

                                                    i++;

                                                     

                                                    if ( i == 5 ) { i = 0}

                                                     

                                                    }, 5000);

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    // Make it happen when the browser resizes

                                                     

                                                    $(window).on('resize', function(){

                                                     

                                                         scaleStage();

                                                     

                                                    });

                                                     

                                                     

                                                     

                                                    // Make it happen when the page first loads

                                                     

                                                    $(document).ready(function(){

                                                     

                                                        scaleStage();

                                                     

                                                        myFnc();

                                                     

                                                    });

                                                    • 23. Re: 5 message text slider
                                                      Zaxist Level 4

                                                      ok

                                                       

                                                      there is some problem and question

                                                       

                                                      the problems are your rotator and your text fade in and fade out are out of sync, so the change is not look good, you should first fix that and sync them, and second problem is if i click on rotator for 2 times it works ok but after 3rd time it wont rotate and just change the arrow color to green without rotation animate... you should fix this too

                                                       

                                                      after fixed them all, remove all your code that you wrote here and replace them with mine :

                                                       

                                                      Paste these in Stage > compositionReady

                                                      =============================================

                                                      var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

                                                       

                                                      sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

                                                       

                                                      "transform-origin":"0 0",

                                                       

                                                      "-ms-transform-origin":"0 0",

                                                       

                                                      "-webkit-transform-origin":"0 0",

                                                       

                                                      "-moz-transform-origin":"0 0",

                                                       

                                                      "-o-transform-origin":"0 0"

                                                       

                                                      });

                                                       

                                                       

                                                       

                                                      function scaleStage() {

                                                       

                                                          var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

                                                       

                                                          var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

                                                       

                                                       

                                                       

                                                          var parentWidth = stage.parent().width(); // Get the parent of the stage width

                                                       

                                                          var stageWidth = stage.width(); // Get the stage width

                                                       

                                                          var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                                                       

                                                          var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                                                       

                                                       

                                                       

                                                      // Rescale the stage!

                                                       

                                                           stage.css('transform', 'scale(' + rescale + ')');

                                                       

                                                          stage.css(  '-o-transform', 'scale(' + rescale + ')');

                                                       

                                                           stage.css('-ms-transform', 'scale(' + rescale + ')');

                                                       

                                                          stage.css('-webkit-transform', 'scale(' + rescale + ')');

                                                       

                                                           stage.css('-moz-transform', 'scale(' + rescale + ')');

                                                       

                                                          stage.css('-o-transform', 'scale(' + rescale + ')');

                                                       

                                                          parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

                                                       

                                                      }

                                                      $(window).on('resize', function(){

                                                       

                                                           scaleStage();

                                                       

                                                      });

                                                       

                                                       

                                                       

                                                       

                                                      scaleStage();

                                                      i = 0;

                                                      objects.myFnc();

                                                      objects.data();

                                                       

                                                      JackPot = setInterval(objects.myFnc, 1000);

                                                      Data = setInterval(objects.data, 5000);

                                                       

                                                       

                                                      objects = {

                                                       

                                                      myFnc:function() {

                                                       

                                                      var result = total += addition;

                                                       

                                                      var jackpot = objects.formatDollar(result);

                                                       

                                                      var myObject = document.getElementById("counter");

                                                       

                                                      myObject.innerHTML = jackpot;

                                                       

                                                      },

                                                      data:function(){

                                                      $.ajax({type:    'POST',

                                                       

                                                                       url:     'ajax.php',

                                                       

                                                                       data:    'id=testdata',

                                                       

                                                                       cache:   false,

                                                       

                                                                       success: function(data){

                                                       

                                                                           var tmp = data.split(",");

                                                       

                                                                           $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                       

                                                                       }

                                                       

                                                                      });

                                                      i++

                                                      if ( i == 5 ) { i = 0}

                                                      },

                                                      formatDollar:function(num) {

                                                       

                                                      var p = (num / 100).toFixed(2).split(".");

                                                       

                                                      return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                                       

                                                      return  num + (i && !(i % 3) ? "," : "") + acc;

                                                       

                                                      }, "") + "." + p[1];

                                                       

                                                      }}

                                                       


                                                       

                                                       

                                                      Write these Codes where ever you wote the click event for rotation

                                                      ========================================================

                                                      sym.play()

                                                      objects.data();

                                                      objects.myFnc();

                                                      clearInterval(JackPot);

                                                      clearInterval(Data);

                                                      JackPot = setInterval(objects.myFnc, 1000);

                                                      Data = setInterval(objects.data, 5000);

                                                       

                                                       

                                                       

                                                      Zaxist

                                                      • 24. Re: 5 message text slider
                                                        rbmediamonkey Level 1

                                                        Hi Zaxist,

                                                         

                                                        thanks for the code, I have inserted it per your instructions however the messages are not showing up??

                                                         

                                                        I see you have used the same ajax function to bring in the text, so dont understand why??

                                                         

                                                        http://www.manninmedia.co.im/micro4/frame-test.html

                                                        • 25. Re: 5 message text slider
                                                          Zaxist Level 4

                                                          can you send me your complete project in a zip file so i can help you better..

                                                          • 26. Re: 5 message text slider
                                                            rbmediamonkey Level 1

                                                            sure here:

                                                             

                                                            http://www.manninmedia.co.im/micro4/webbanner.zip

                                                             

                                                            apologies it will be quite messy to work with my first time working with edge

                                                            • 27. Re: 5 message text slider
                                                              Zaxist Level 4

                                                              ok, i checked  the codes and find out the problem, the problem is myFunc cant run in the sametime you run data, one of them can run immidiately after page starts, and i decided to remove myFunc first start cause it will start after a sec your page run..

                                                               

                                                              remove these codes at the top after i value

                                                               

                                                              objects.myFnc();

                                                              objects.data();

                                                               

                                                              JackPot = setInterval(objects.myFnc, 1000);

                                                              Data = setInterval(objects.data, 5000);

                                                               

                                                              and add them at the end without objects.myFnc();

                                                               

                                                              just these three lines should be at the end of composition ready:

                                                               

                                                              objects.data();

                                                               

                                                              JackPot = setInterval(objects.myFnc, 1000);

                                                              Data = setInterval(objects.data, 5000);

                                                               

                                                               

                                                              then codes should work as expect

                                                               

                                                               

                                                               

                                                              here is the complete code :

                                                               

                                                              var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

                                                               

                                                               

                                                              sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

                                                               

                                                               

                                                              "transform-origin":"0 0",

                                                               

                                                               

                                                              "-ms-transform-origin":"0 0",

                                                               

                                                               

                                                              "-webkit-transform-origin":"0 0",

                                                               

                                                               

                                                              "-moz-transform-origin":"0 0",

                                                               

                                                               

                                                              "-o-transform-origin":"0 0"

                                                               

                                                               

                                                              });

                                                               

                                                               

                                                               

                                                               

                                                               

                                                               

                                                              function scaleStage() {

                                                               

                                                               

                                                                  var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

                                                               

                                                               

                                                                  var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

                                                               

                                                               

                                                               

                                                               

                                                               

                                                               

                                                                  var parentWidth = stage.parent().width(); // Get the parent of the stage width

                                                               

                                                               

                                                                  var stageWidth = stage.width(); // Get the stage width

                                                               

                                                               

                                                                  var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                                                               

                                                               

                                                                  var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                                                               

                                                               

                                                               

                                                               

                                                               

                                                               

                                                              // Rescale the stage!

                                                               

                                                               

                                                                   stage.css('transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                  stage.css(  '-o-transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                   stage.css('-ms-transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                  stage.css('-webkit-transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                   stage.css('-moz-transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                  stage.css('-o-transform', 'scale(' + rescale + ')');

                                                               

                                                               

                                                                  parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

                                                               

                                                               

                                                              }

                                                              $(window).on('resize', function(){

                                                               

                                                               

                                                                   scaleStage();

                                                               

                                                               

                                                              });

                                                               

                                                               

                                                              scaleStage();

                                                               

                                                               

                                                              i = 0;

                                                               

                                                               

                                                              objects = {

                                                               

                                                               

                                                              myFnc:function() {

                                                               

                                                               

                                                              var result = total += addition;

                                                               

                                                               

                                                              var jackpot = objects.formatDollar(result);

                                                               

                                                               

                                                              var myObject = document.getElementById("counter");

                                                               

                                                               

                                                              myObject.innerHTML = jackpot;

                                                               

                                                               

                                                              },

                                                              data:function(){

                                                               

                                                               

                                                              $.ajax({type:    'POST',

                                                               

                                                               

                                                                               url:     'ajax.php',

                                                               

                                                               

                                                                               data:    'id=testdata',

                                                               

                                                               

                                                                               cache:   false,

                                                               

                                                               

                                                                               success: function(data){

                                                               

                                                               

                                                                                   var tmp = data.split(",");

                                                               

                                                               

                                                                                   $('#Stage_Symbol_1_Text4').html(tmp[i]);

                                                               

                                                               

                                                                               }

                                                               

                                                               

                                                                              });

                                                              i++

                                                              if ( i == 5 ) { i = 0}

                                                              },

                                                              formatDollar:function(num) {

                                                               

                                                               

                                                              var p = (num / 100).toFixed(2).split(".");

                                                               

                                                               

                                                              return "&pound;" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {

                                                               

                                                               

                                                              return  num + (i && !(i % 3) ? "," : "") + acc;

                                                               

                                                               

                                                              }, "") + "." + p[1];

                                                               

                                                               

                                                              }}

                                                               

                                                               

                                                               

                                                               

                                                              objects.data();

                                                              JackPot = setInterval(objects.myFnc, 1000);

                                                              Data = setInterval(objects.data, 5000);

                                                               

                                                               

                                                              Zaxist