CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3320502
user3320502

Reputation: 41

dynamic creation of HTML elements

I am trying to create a coverflow using the plugin locate here: http://vanderlee.github.io/coverflow/

All I have to do is this:

<div class="coverflow">
    <div class="cover">A</div>
    <div class="cover">B</div>
    ...
    <div class="cover">Y</div>
    <div class="cover">Z</div>
</div>

<script>
    $(function() {
        $('.coverflow').coverflow();
    });
</script>

This works fine for manually created elements but when doing something like the following:

var el = {
    newDiv: $("<div>", { class: "cover newDiv"}),
    newElt: $("<div>", { class: "cover newDiv"})
}

$("#preview-coverflow").append(el.newDiv);
$("#preview-coverflow").append(el.newElt);

my divs are displayed in a vertical fashion, rather than horizontal. My question is whether there is any difference between the two forms of element creation? In both cases I am (trying) to create empty div and append to the parent. Am I doing anything wrong?

In my style sheet, just to see my empty divs:

.newDiv { 
    background-color:red
}

Upvotes: 1

Views: 186

Answers (4)

Koti Panga
Koti Panga

Reputation: 3720

Here you go:

<style>
    .newDiv {
        background: gold;
        position: absolute;
        width: 320px;
        height: 320px;
        overflow:hidden;
    }
</style>
<script>
    $(function() {
        $('.coverflow').coverflow();
        addNewTest();// test call here
    });

function addNewTest(){
    var el = {
        newDiv: $("<div>", { class: "cover newDiv"}),
        newElt: $("<div>", { class: "cover newDiv"})
    }

    $("#preview-coverflow").append(el.newDiv, el.newElt).coverflow('refresh');
}
</script>

Upvotes: 0

NZ Mikey
NZ Mikey

Reputation: 126

It looks like the .coverflow() needs to be run after the elements have been added.

In the console, after dynamically adding the html, just try running

$('.coverflow').coverflow('refresh');

If that seems to fix the issue, then look at implementing it after you add the new elements.

Didnt notice the plugin has a refresh function to it, using the refresh should solve it.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

Try using the refresh method after you add new elements

$('.coverflow').coverflow('refresh');

From Docs:

refresh

Redraw the covers. You shouldn't ever need to do this unless you are adding or removing 
covers or changing the covers yourself.

Upvotes: 1

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

try this without any plugin for dynamic creation of elements. Its pure javascript and JQuery:

<script>

    var myDivs = ""; 

    for(var i=0; i <10; i++)
    {
        myDivs+= "<div class='cover'></div>";
    }

    $(".coverflow").html(myDivs);

<script>

I think it clear your concept. Hope this works.

Upvotes: -1

Related Questions