Call javascript function within a for loop cycle to display images with html tag

2 posts, 0 answers
  1. Abdel
    Abdel avatar
    1 posts
    Member since:
    Jun 2013

    Posted 28 Jun 2013 Link to this post

    I build this app using Kendo UI Mobile on Icenium Graphite.
    Locate the <marquee> in the body section
    I want to put there, a for loop cycle to call the queryTable javascript function and then put inside the marquee tab, the image column.
    I don't know how to do that.
    At this point, the app works great showing me 6 pictures in a vertical scrolling animation using <marquee>
    But I want to replace the <img src="kendo/styles/images/Climb.png" style="width:100%" /> for something like this
    <marquee direction="up">
                    for loop
                         function queryTable
                    end loop
    </marquee>

    Any help?
    Abdel

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script src="scripts/hello-world.js"></script>

            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
           
            <script>                                  
                function DBTest()
                {
                    var db;
                   
                    if (window.sqlitePlugin !== undefined) {
                        db = window.sqlitePlugin.openDatabase("images");
                        alert("plugin uponDB Finish");
                    } else {
                        db = window.openDatabase("images", "1.0.0", "Image", 1000000);
                        alert("CreateDatabase Finish");
                    }    
                    db.transaction(createTable);
        
        function createTable(tx) {    
         tx.executeSql('CREATE TABLE IF NOT EXISTS PICTURES (id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT, recordedDate DATE)');
                        alert("Table Created Finish");
        }
                    db.transaction(insertRecord);
                   
                    function insertRecord(tx) {                   
                        var cDate = new Date();
                        var t = "Record #1";
                        tx.executeSql("INSERT INTO PICTURES(description, recordedDate) VALUES (?, ?)",
                                      [t, cDate],
                                      OnSuccess,
                                      OnError);
                        alert("Record Inserted Finish");
                    }                   
        db.transaction(queryTable);
        
        function queryTable(tx) {    
         tx.executeSql('SELECT * FROM PICTURES', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++) {
              alert("id: " + results.rows.item(i).id + " description: " + results.rows.item(i).description + " recorded on: " + results.rows.item(i).recordedDate.toString());
            }
         });    
        }
                   
                    function OnSuccess(tx, r) {
                        alert("Your SQLite execution was successful!");
                    }
                   
                    function OnError(tx, e) {
                        alert("SQLite Error: " + e.message);
                    }
                }                                   
            </script>
        </head>
        <body>
            <div data-role="view" id="tabstrip-home" data-title="Animation">
                <h1>Welcome!</h1>
                <p>
                    Icenium&trade; enables you to build cross-platform device applications regardless of your
                    development platform by combining the convenience of a local development toolset with the
                    power and flexibility of the cloud.
                </p>
            </div>

            <div data-role="view" id="tabstrip-animation" data-title="Image Animation">
                <h1>Animation</h1>
                <table width="100%" height="100%">
           <tr height="5%" align="center" valign="middle">
            <td>
             <div class="NewsButton" onclick="DBTest();">Noticias</div>    
            </td>
            <td>
             <div class="OffersButton" onclick="DBTest();">Calendario</div>
            </td>
           </tr>
           <tr height="95%">         
            <td align="center" valign="middle" width="45%">
             <marquee height="367" behavior="scroll" scrollamount="2" direction="up">
              <img src="kendo/styles/images/Climb.png" style="width:100%" />
                                <img src="kendo/styles/images/Climb.png" style="width:100%" />
                                <img src="kendo/styles/images/Climb.png" style="width:100%" />
                                <img src="kendo/styles/images/Climb.png" style="width:100%" />
                                <img src="kendo/styles/images/Climb.png" style="width:100%" />
                                <img src="kendo/styles/images/Climb.png" style="width:100%" />
             </marquee>
            </td>
            <td align="center" valign="middle" width="55%">
             <marquee height="367" behavior="scroll" scrollamount="1.5" direction="up">      
              <img src="kendo/styles/images/Sunset.png" style="width:100%" />
                                <img src="kendo/styles/images/Sunset.png" style="width:100%" />
                                <img src="kendo/styles/images/Sunset.png" style="width:100%" />
                                <img src="kendo/styles/images/Sunset.png" style="width:100%" />
                                <img src="kendo/styles/images/Sunset.png" style="width:100%" />
                                <img src="kendo/styles/images/Sunset.png" style="width:100%" />
             </marquee>
            </td>    
           </tr>
          </table>
            </div>
           
            <div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
                <h1>Say Hello!</h1>
                <div id='helloWorldInput'>
                    <label for="txtName" style="display: inline-block;">Enter your name:</label>
                    <input type="text" id="txtName" value="" />
                </div>
                <div id='helloWorldText' style="display:block;"></div>
                <div class="buttonArea">
                    <a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
                    <a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
                </div>
            </div>

            <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
                <h1>My Location</h1>
                <div id="geoLocationContainer">
                    <div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
                    <a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
                    <div id="map_canvas"></div>
                </div>
            </div>

            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip" id="tabStrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-animation" data-icon="featured">Animation</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>                   
                    </div>
                </div>
            </div>

            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 03 Jul 2013 Link to this post

    Hi Abdel,

    The marquee tag has been made obsolete in HTML5 (in fact it has never been part of the official W3C specification). The good news is that a counterpart functionality has been introduced in CSS 3 that you might consider using instead (see http://www.w3.org/TR/css3-marquee/).
    In other words, you can use Kendo UI ListView and "animate" it via the newly exposed marquee css.

    Regards,
    Steve
    Telerik

    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Missed our first webinar, watch it here.
    Share feedback and vote for features on our Feedback Portal.
Back to Top