pav
9/18/2013 - 8:30 PM

clone

clone_js
content_copyfile_download
$('document').ready(function() {


$('div.cloneable').click(function() {

    alert($(this).data('alertMessage'));

});


$('button.cloneButton').click(function() {

    cloneAndAppend($(this).siblings('.cloneable'),$('#cloneList'));

});



});
clone_html
content_copyfile_download
<html>

<head>

<title>Exercise 4.2</title>
<script src="provided.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div id='buttonHolder'>
<div id="explanation">
Play with the buttons below to clone the different elements.
Note that the alerts that appear when you click are cloned too.
</div>


</div>

<div id="content">

<div id="cloneOptions">

<div class='cloneOption'>
    <div class="cloneable circle" data-alert-message="circle"></div>
    <button class='cloneButton'>clone</button>
    <div class='clearfix'></div>
</div>

<div class='cloneOption'>
    <div class="cloneable square" data-alert-message="square"></div>
    <button class='cloneButton'>clone</button>
    <div class='clearfix'></div>
</div>

<div class='cloneOption'>
    <div class="cloneable rectangle" data-alert-message="rectangle"></div>
    <button class='cloneButton'>clone</button>
    <div class='clearfix'></div>
</div>

</div>

<div id='clones'>
<h1> Clones</h1>
<div id='cloneList'>

</div>
</div>


</div>

</body>

</html>
clone_css
content_copyfile_download
div.clearfix {
    clear:both;
}

div#buttonHolder {
    padding-bottom:5px;
    border-bottom-color:black;
    border-bottom-style:solid;
    border-bottom-width:1px;
}

div#explanation {
    font-family:Helvetica,Arial,sans-serif;
}

div#cloneOptions {
    float:left;
    width:60%;
}

div.cloneOption {
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding:10px;
}

div.cloneable {
    height:30px;
    width:30px;
    float:left;
    
    border-style:solid;
    border-width:4px;
    border-color:black;
    
}

div.cloneable:hover {
    cursor:pointer;
    -webkit-box-shadow: inset 0px 4px 5px #333;
       -moz-box-shadow: inset 0px 4px 5px #333;
            box-shadow: inset 0px 4px 5px #333;
}

div.cloneable.square {
    background-color:#7FFFD4;
}

div.cloneable.circle {
    -webkit-border-radius:19px;
       -moz-border-radius:19px;
            border-radius:19px;
    
    background-color:#DC143C;
}

div.cloneable.rectangle {
    background-color:#7CFC00;
    width:68px;
}

button.cloneButton {
    float:right;
}

div#clones {
    float:right;
    width:35%;
    
    
    padding:10px;
    
    border-color:#1270f3;
    border-style:solid;
    border-width:2px;
    
    margin-top:5px;
    
    -webkit-box-shadow: 0px 0px 7px #1270f3;
       -moz-box-shadow: 0px 0px 7px #1270f3;
            box-shadow: 0px 0px 7px #1270f3;
    
    
    -webkit-border-radius:11px;
       -moz-border-radius:11px;
            border-radius:11px; 
            
}

div#clones h1 {
    text-align:center;
    text-decoration:underline;
    font-family:sans-serif;
}
clone
content_copyfile_download

//write this function as described
//in the exercise instructions
//remember that we want to clone
//data and events, too!
function cloneAndAppend($elementToClone, $elementToAppendItTo) {
 clone= $elementToClone.clone(true);
 $elementToAppendItTo.append(clone);
}