Languages

Menu
Sites
Language
how can i dynamically add cards in my page with Infinite Scrolling

Hi,

I want to add the card dynamically in my page.i want to implement the infinite scroll of page.According to infinite scroll i want do add card dynamically.How can i do this.Please help me.

 

 

Thanks and regards

Mohit Kumar

List

Responses

8 Replies
Seoghyun Kang

Hello,

 

Your question is ambiguous.

But I think following url will helpful to you.

http://scrollmagic.io/examples/advanced/infinite_scrolling.html

 

If you access the above url, you can see the infinite scroll example.

Or if you search the "infinite scroll" in the Google, you can find many sample codes about infinite scroll.

 

Thanks.

mohit kumar

Hi,

I am asking you for how to create card Dynamically. Please help me.

I have done with infinite scroll.


$(document).ready(function(){
    
    alert("kya bat hai mohit jii");
    var exampleBlockA = $('#exampleBlockA'),
    exampleBlockB = $('#exampleBlockB'),
    exampleBlockC = $('#exampleBlockC'),
    i,
    j = 1,
    tag,
    
    imagename = ["mohit", "dialog", "Team"],
    imagesource = ["./images/mohit.jpg", "./images/dialog.jpg", "./images/Team.jpg"],
    titlecard = ["Image!", "Image!", "Image!"],
    titleimage = ["Title", "Title", "Title"],
    text = ["Lorem ipsum part 1...", "Lorem ipsum part 2...", "Lorem ipsum part 3..."];

exampleBlockA.empty();
exampleBlockB.empty();
exampleBlockC.empty();

for (i = 0; i < 3; i = i + 1) {
    tag = '<div class="card" id="card' + i + '">';
    if (imagename[i] !== null && imagesource[i] !== null) {
        tag = tag + '<div class="card-image"><img alt="' + imagename[i] + '" src="' + imagesource[i] + '" />'; // insert imagesource and imagename if they exists
        if (titleimage[i] !== null) {
            tag = tag + '<h2>' + titleimage[i] + '</h2>';
        }
        tag = tag + '</div>';
    }
    if (titlecard[i] !== null) {
        tag = tag + '<h1>' + titlecard[i] + '</h1>';
    }
    if (text[i] !== null) {
        tag = tag + '<p>' +  text[i] + '</p>';
    }
    tag = tag + '</div>';
    
    if (i < (result.rows.length / 3)) {
        exampleBlockA.append(tag);
    } else if (i < ((result.rows.length / 3) * 2)) {
        exampleBlockB.append(tag);
    } else if (i <= ((result.rows.length / 3) * 3)) {
        exampleBlockC.append(tag);
    }
        
    pressEffectCard('card' + i);
}
    


function pressEffectCard(x) {
    var id = $("#" + x);
    id.off('touchstart').on('touchstart', function () {
        id.addClass("holoPressEffectDiv");
    });
    id.off('touchend').on('touchend', function () {
        id.removeClass("holoPressEffectDiv");
    });
    id.off('touchmove').on('touchmove', function () {
        id.removeClass("holoPressEffectDiv");
    });
}
});

 

 

mohit kumar

Hi,

    I want to create card dynamically.I have written the code but it is not working.I want to create the card and display data on that card.

Please help me

 

html code

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <link rel="stylesheet" href="css/style1.css" />
 <!--  <script src="js/script.js"></script> -->
 <script src="js/jquery.min.js"></script>
 
  <script src="js/dynamic-cards.js"></script>
 
</head>

<body>
<div class="ui-grid-b ui-responsive">
 <div class="ui-block-a" id="exampleBlockA" style="background-color:red;">hello<br></div>
 <div class="ui-block-b" id="exampleBlockB" style="background-color:yellow;">mohit<br></div>
 <div class="ui-block-c" id="exampleBlockC" style="background-color:green;">how are uu<br></div>
</div>

</body>

</html>

//********************js code***********************
$(document).ready(function(){

   
    var exampleBlockA = $('#exampleBlockA'),
    exampleBlockB = $('#exampleBlockB'),
    exampleBlockC = $('#exampleBlockC'),
    i,
    j = 1,
    tag,
    
    imagename = ["mohit", "dialog", "Team"],
    imagesource = ["./images/mohit.jpg", "./images/dialog.jpg", "./images/Team.jpg"],
    titlecard = ["Image!", "Image!", "Image!"],
    titleimage = ["Title", "Title", "Title"],
    text = ["Lorem ipsum part 1...", "Lorem ipsum part 2...", "Lorem ipsum part 3..."];

exampleBlockA.empty();
exampleBlockB.empty();
exampleBlockC.empty();

for (i = 0; i < 3; i = i + 1) {
    tag = '<div class="card" id="card' + i + '">';
    if (imagename[i] !== null && imagesource[i] !== null) {
        tag = tag + '<div class="card-image"><img alt="' + imagename[i] + '" src="' + imagesource[i] + '" />'; // insert imagesource and imagename if they exists
        if (titleimage[i] !== null) {
            tag = tag + '<h2>' + titleimage[i] + '</h2>';
        }
        tag = tag + '</div>';
    }
    if (titlecard[i] !== null) {
        tag = tag + '<h1>' + titlecard[i] + '</h1>';
    }
    if (text[i] !== null) {
        tag = tag + '<p>' +  text[i] + '</p>';
    }
    tag = tag + '</div>';
    
    if (i < (result.rows.length / 3)) {
        exampleBlockA.append(tag);
    } else if (i < ((result.rows.length / 3) * 2)) {
        exampleBlockB.append(tag);
    } else if (i <= ((result.rows.length / 3) * 3)) {
        exampleBlockC.append(tag);
    }
        
    pressEffectCard('card' + i);
}
    


function pressEffectCard(x) {
    var id = $("#" + x);
    id.off('touchstart').on('touchstart', function () {
        id.addClass("holoPressEffectDiv");
    });
    id.off('touchend').on('touchend', function () {
        id.removeClass("holoPressEffectDiv");
    });
    id.off('touchmove').on('touchmove', function () {
        id.removeClass("holoPressEffectDiv");
    });
}
});

 

 

Thanks and regards

Mohit Kumar

 

 

colin Rao

f.y.i.

register the scroll event on your page (bind on the document or body),   $(dom).scroll(function(){ ...});

if  $(document).scrollTop()>=$(document).height()-$(window).height() is true, means currently scrolled to the bottom, then you can try to append more dynamic elements to the container.

mohit kumar

Hi

I want to create dynamic cards using jquery.I hvae done with infinite scroll.I want to know how i can create card dynamically using jquery or javascript.please help me

 

html code

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <link rel="stylesheet" href="css/style1.css" />
 <!--  <script src="js/script.js"></script> -->
 <script src="js/jquery.min.js"></script>
 
  <script src="js/dynamic-cards.js"></script>
 
</head>

<body>
<div class="ui-grid-b ui-responsive">
 <div class="ui-block-a" id="exampleBlockA" style="background-color:red;">hello<br></div>
 <div class="ui-block-b" id="exampleBlockB" style="background-color:yellow;">mohit<br></div>
 <div class="ui-block-c" id="exampleBlockC" style="background-color:green;">how are uu<br></div>
</div>

</body>

</html>

//********************js code***********************
$(document).ready(function(){

   
    var exampleBlockA = $('#exampleBlockA'),
    exampleBlockB = $('#exampleBlockB'),
    exampleBlockC = $('#exampleBlockC'),
    i,
    j = 1,
    tag,
    
    imagename = ["mohit", "dialog", "Team"],
    imagesource = ["./images/mohit.jpg", "./images/dialog.jpg", "./images/Team.jpg"],
    titlecard = ["Image!", "Image!", "Image!"],
    titleimage = ["Title", "Title", "Title"],
    text = ["Lorem ipsum part 1...", "Lorem ipsum part 2...", "Lorem ipsum part 3..."];

exampleBlockA.empty();
exampleBlockB.empty();
exampleBlockC.empty();

for (i = 0; i < 3; i = i + 1) {
    tag = '<div class="card" id="card' + i + '">';
    if (imagename[i] !== null && imagesource[i] !== null) {
        tag = tag + '<div class="card-image"><img alt="' + imagename[i] + '" src="' + imagesource[i] + '" />'; // insert imagesource and imagename if they exists
        if (titleimage[i] !== null) {
            tag = tag + '<h2>' + titleimage[i] + '</h2>';
        }
        tag = tag + '</div>';
    }
    if (titlecard[i] !== null) {
        tag = tag + '<h1>' + titlecard[i] + '</h1>';
    }
    if (text[i] !== null) {
        tag = tag + '<p>' +  text[i] + '</p>';
    }
    tag = tag + '</div>';
    
    if (i < (result.rows.length / 3)) {
        exampleBlockA.append(tag);
    } else if (i < ((result.rows.length / 3) * 2)) {
        exampleBlockB.append(tag);
    } else if (i <= ((result.rows.length / 3) * 3)) {
        exampleBlockC.append(tag);
    }
        
    pressEffectCard('card' + i);
}
    


function pressEffectCard(x) {
    var id = $("#" + x);
    id.off('touchstart').on('touchstart', function () {
        id.addClass("holoPressEffectDiv");
    });
    id.off('touchend').on('touchend', function () {
        id.removeClass("holoPressEffectDiv");
    });
    id.off('touchmove').on('touchmove', function () {
        id.removeClass("holoPressEffectDiv");
    });
}
});

 

 

 

 

 

colin Rao

Hi, 

what's the "result" definition as your code?

    if (i < (result.rows.length / 3)) {
        exampleBlockA.append(tag);
    } else if (i < ((result.rows.length / 3) * 2)) {
        exampleBlockB.append(tag);
    } else if (i <= ((result.rows.length / 3) * 3)) {
        exampleBlockC.append(tag);
    }

try to run your project on simulator, and alert the tag value in above if... cases.

also, seems you include the jquery lib twice.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.min.js"></script>

 

Marco Buettner

And dont forget to setup network access on the config.xml when u use external scripts ;) I prefer to include the scripts from locale.

mohit kumar

Hi,

I want to do infinite scroll of the page.I have written the code and i want to scroll with the following data.

 

$(document).ready(function(){
    
    $.getJSON('http://apibeta.yourstory.com/v1/site/YOURSTORY/articles', function(live_image) {
        alert("h");
        for(i=0;i <live_image.length ;i++)
        {
            $('<div class="row" style="background-color:white;margin-right: 2px;margin-left: 2px;">' +
             '<div class="col-xs-7">' +

                '<p class="para" id="img1_txt">'+live_image[i].title+'</p>' +
                 '<p class="para para1" id="auth1_txt"></p>' +
            '</div>' +
            '<div class="col-xs-5">' +

                '<a id="permalink_ys">'+
                    '<img id="frontimg" src ="'+ live_image[i].featured_image_thumbnail.url+'" name="mylink " class="img-responsive">' +
                '</a>' +
            '</div>' +
        '</div> <br>').appendTo(".container");

        }

 

 

 

 

Thanks and regards

Mohit kumar