Two columns with pictures and text on PhoneGap



  • Hi !

    I’m creating an app which need to create a grid with many pictures by two columns. If I want to put two pictures on one row it’s ok but if I want to add more content, it’s in two rows.

    I want something like this :0_1455188797006_home.jpg

    Here is my code :
    index.html

    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="msapplication-tap-highlight" content="no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
    
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="css/font_awesome/css/font-awesome" />
            <link rel="stylesheet" type="text/css" href="css/onsen-css-components" />
        </head>
        <body>
            <!-- <ons-page>
                 <h3>Equally spaced</h3> -->
                  <ons-row class="row ons-row-inner">
                    <ons-col class="col ons-col-inner">
                        <img src="http://img1.lesnumeriques.com/produits/190/21897/plantronics-backbeat-pro_08d88980caba8084_300x300.jpg" style="height: 20%; width: 20%;"/>
                                    <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star-empty bigStarBlue" aria-hidden="true" />
                                    <br />
                                    <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" />
                                    <span class="glyphicon glyphicon-star-empty smallStarYellow" aria-hidden="true" />
                    </ons-col>
                    <ons-col class="col ons-col-inner">
                    <img src="http://img1.lesnumeriques.com/produits/190/21897/plantronics-backbeat-pro_08d88980caba8084_300x300.jpg" style="height: 20%; width: 20%;" />
                </ons-col>
                  </ons-row>
                  <p></p>
    
            <script type="text/javascript" src="js.onsenui.js"></script>
            <script type="text/javascript" src="js/onsenui_all.js"></script>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
            <script type="text/javascript">
                ons.bootstrap();
            </script>
            <!-- </ons-page> -->
        </body>
    </html>
    

    index.css

    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    }
    
    body {
        -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
        -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
        -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
        background-color:#E4E4E4;
        background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #A7A7A7),
            color-stop(0.51, #E4E4E4)
        );
        background-attachment:fixed;
        font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
        font-size:12px;
        height:100%;
        margin:0px;
        padding:0px;
        text-transform:uppercase;
        width:100%;
    }
    
    h1 {
        font-size:24px;
        font-weight:normal;
        margin:0px;
        overflow:visible;
        padding:0px;
        text-align:center;
    }
    
    .event {
        border-radius:4px;
        -webkit-border-radius:4px;
        color:#FFFFFF;
        font-size:12px;
        margin:0px 30px;
        padding:2px 0px;
    }
    
    .event.listening {
        background-color:#333333;
        display:block;
    }
    
    .event.received {
        background-color:#4B946A;
        display:none;
    }
    
    @keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.4; }
        to { opacity: 1.0; }
    }
     
    @-webkit-keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.4; }
        to { opacity: 1.0; }
    }
     
    .blink {
        animation:fade 3000ms infinite;
        -webkit-animation:fade 3000ms infinite;
    }
    
    .bigStarBlue{
        color: #2196F3;
        font-size: 20px;
    }
    
    .smallStarYellow{
        color: #FFCC00;
    }
    

    Thank you for your help ! :)



  • @Viinz Are you asking how to dynamically add rows with content? If so, the easiest way is as follows:

    var onsItem= document.createElement('ons-list-item');
           onsItem.setAttribute('modifier', "chevron");
           onsItem.setAttribute('onclick', "functionName()");
           onsItem.innerHTML = '<img src="" alt="something here" />'; document.getElementById('divIDorSomething').appendChild(onsItem);
    

    If this isn’t what you seek, could you clarify your question?


Log in to reply