jQuery : Dynamic HTML onClick

Question

I am trying to create dynamically generated elements when the user clicks on a button. The should slide in from the right, and when the button is clicked again, another should slide in from the right. For some reason, it is not doing exactly what I need it to do. Here's the code:

<html>
<head>
    <title>Chat Head</title>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>

    $(document).ready(function(){
        screenWidth = $(window).width();
        screenHeight = $(window).height();
        msgWidth = 0.7*screenWidth;
        msgHeight = 0.7*screenHeight;
        $("#note").css("width", msgWidth);
        $("#note").css("height", msgHeight);

        $("#slide").click(function(){
            var textArea = '<textarea class = form-control rows = "3" id = "text"></textarea>';
            $(textArea).appendTo('.note');
            var effect = 'slide';
            var duration = 1000;
            $(".note").toggle(effect, {direction: 'right'}, duration);
        });
    });

    </script>
</head>
<style type="text/css">
    .note{
        display: none;
    }
</style>
<body>
    <div class="row">
        <div class="col-md-12">
            <button class = "button" id = "slide">Slide</button>
            <hr />
            <div class="note">
            <!-- <textarea class = "form-control" rows = "2" id = "note"></textarea> -->
            </div>
        </div>
    </div>
</body>
</html>

Here's the JS Fiddle that goes with the code: http://jsfiddle.net/ma6Jq/2/

you can just addClass and removeClass onto the note, and then add your animation effects with css only on the classes themself. — vico
– vico, Commented Jun 17, 2014 at 18:00
Could you possibly show me an example? I got rid of the toggle function and used effect. Here's the updated version of the function: $(".note").effect(effect, {direction: 'right'}, duration); — Tarang Hirani
– Tarang Hirani, Commented Jun 17, 2014 at 18:02
You're appending multiple elements with the same ID. You'll need to increment them if you do in fact need IDs. Otherwise, use a class. — isherwood
– isherwood, Commented Jun 17, 2014 at 18:19

dnelson · Accepted Answer · 2014-06-17 18:29:19Z

2

Here is an implementation I came up with. http://jsfiddle.net/Ar7qw/1/

<script>

$(document).ready(function(){        
    var count = 0;

    $("#slide").click(function(){
        count = count + 1;

        screenWidth = $(window).width();
        screenHeight = $(window).height();
        msgWidth = 0.7*screenWidth;
        msgHeight = 0.7*screenHeight;
        $("#note"+ count).css("width", msgWidth);
        $("#note"+ count).css("height", msgHeight);

        var newnote = '<div class="note' + count +'"></div>';
        $(newnote).appendTo('.col-md-12');

        var textArea = '<textarea class="form-control" rows = "3" id = "text"></textarea>';
        $(textArea).appendTo('.note' + count);

        $('.note' + count).effect('slide', {direction: 'right'}, 1000);

    });
});
</script>

answered Jun 17, 2014 at 18:29

dnelson

4671 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dnelson Over a year ago

If this is what you needed click little check mark :)

Tarang Hirani Over a year ago

Thanks! Now I need to make sure that the divs have a close button, which will destroy the div when clicked.

isherwood · Accepted Answer · 2014-06-17 18:29:08Z

0

This gets you close. I'm out of time for now.

http://jsfiddle.net/isherwood/ma6Jq/10

.note-box {
    margin-left: 150%;
}
.done {
    margin-left: 10px;
    transition: all 1s;
}


$("#slide").click(function () {
    var textArea = '<textarea class="form-control note-box" rows="3"></textarea>';
    var duration = 1000;

    $(textArea).appendTo('#note').addClass('done', duration);
});

answered Jun 17, 2014 at 18:29

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Comments

yoyodunno · Accepted Answer · 2014-06-17 18:59:41Z

Another implementation for anybody needing one(or a couple different choices of solutions) http://jsfiddle.net/ma6Jq/13/

var counter = 0;
    $("#slide").click(function () {
        counter ++;
        var textArea = '<div class="note' + counter +  '"><textarea class ="form-control" rows = "3" id = "text">'+ counter +'yo</textarea></div>';

        $(textArea).appendTo('.note');
        var effect = 'slide';
        var duration = 1000;
        var stringhere = ".note" + counter;

$(stringhere).effect('slide',
                         {
                             direction:'right'
                         }, duration);

       /*
        $(stringhere).animate({
            marginLeft: parseInt($(stringhere).css('marginLeft'),1000) == 0 ?
            $(stringhere).outerWidth() :
            100
        });
        */
        /*
        $(stringhere).toggle(effect, {
            direction: 'left'
        }, duration);
        */

    });
});

Collectives™ on Stack Overflow

jQuery : Dynamic HTML onClick

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related