I have a dynamic JavaScript rotation function set up with a div element that is generated dynamically by a button. The challenge I am facing is figuring out how to correctly append this rotation slider for each dynamically created element so it can operate individually for each one, rather than affecting all of them and only working on the first created element. You can see an example here:
http://jsfiddle.net/fqjvd7sa/24/
Rotation Function
$(function() {
$('.s1').slider({
range: 'min',
min: -13,
max: 13,
slide: refreshRotate
});
function refreshRotate() {
var rotate = $('.s1').slider('value'),
x = $('.x');
x.html(rotate);
$('.list').css('-webkit-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('-moz-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('-ms-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('-o-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('transform', 'rotate(' + rotate + 'deg)');
}
});
Dynamically Generated Content
var dom = {
// Build the main button
buildButton: function(){
// Create new DOM element - div
var button = document.createElement('div');
// Set element attribute
button.setAttribute('id', 'strip');
button.setAttribute('class', 'newclass');
// Style the element
button.style.width = "500px";
button.style.height = "400px";
button.style.margin="0px 10px 0px 30px";
// Add content - FileAPI
button.innerHTML = '<div class="s1"></div><div class="list"></div>';
// Print element
document.body.appendChild(button);
}
};
document.getElementById("first-div").onclick = dom.buildButton;