Skip to content Skip to sidebar Skip to footer

Onclick Event Works Only Once In Arctext Script

I need a text arcing script (arctext) for a design project. I have added the code and it works fine for the most part. The problem is, I have added an onclick event to the script a

Solution 1:

<!DOCTYPE html>
<html>
<head>
    <title>Arctext on button click</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>    
    <script>
        $(function(){

            //initialize arctext
            $('#example').arctext({radius :$('#radius').val()});

            //set arc on button click
            $('#set_arc').on('click', function() {
                $('#example').arctext('set', {
                   radius : $('#radius').val(),
                   animation : {speed : 300}
                });        
            });

        });
    </script>
</head>
<body>

    <div style="margin:50px;">                        
        <label>Radius: </label><input type="text" size="1" maxlength="3"  id="radius"  value="500">&nbsp;&nbsp;&nbsp;                      
        <button id="set_arc">Change arc</button>            
        <div style="margin-top:50px;" id="example">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>

</body>
</html>

Source: Arctext.js Curving text with jQuery and CSS3


Post a Comment for "Onclick Event Works Only Once In Arctext Script"