This is my first request here, and yes, it means that I have exhausted my possibilities. Im currently working on a script that dynamically changes the properties of a css element. I am having problems with the script changing the css properties of both elements (I put two elements in the example) instead of just one of the elements. So how does this happen:
- Change one css element. It has been correctly changed.
- Try changing the following css element
- Both elements now have the same css of the last element.
here are the functions i made:
Open the context menu (using the middle mouse)
(function ( $ ) {
$.fn.openMenu = function(opt) {
console.log(x+" "+y);
$('#contextmenu').css( 'position', 'absolute' );
$('#contextmenu').css( 'top', y );
$('#contextmenu').css( 'left', x );
$('#contextmenu').show();
$('#close_context').on("click", function(){
$('#contextmenu').hide();
});
$("#addContent").on("click", function(){
$('#contextmenu').hide();
});
$('#deleteElement').on("click", function(){
element.remove();
$('#contextmenu').hide();
});
$('#contextmenu').unbind();
return this;
};
}( jQuery ));
Actual code that modifies css
(function ( $ ) {
$.fn.modifyCssElement = function() {
var element = this;
console.log(this.attr('id'));
$('#border').val(element.css("border"));
$('#padding').val(element.css("padding"));
$('#z-index').val(element.css("z-index"));
$('#border-radius').val(element.css("border-radius"));
var elembg = this.css('background');
$("#padding").focusout( function(){
element.css('padding', "");
element.css('padding', $(this).val());
});
$("#border-radius").change( function(){
element.css('-webkit-border-radius', "");
element.css('-moz-border-radius', "");
element.css('border-radius', "");
element.css('-webkit-border-radius', $(this).val());
element.css('-moz-border-radius', $(this).val());
element.css('-moz-border-radius', $(this).val());
});
$("#border").change( function(){
element.css('border', "");
element.css('border', $(this).val());
console.log(element.attr('id'));
});
$("#z-index").change( function(){
element.css('z-index', "");
element.css('z-index', $(this).val());
});
return this;
};
}( jQuery ));
here is the script script:
https://jsfiddle.net/092swmxj/1/