We Keep Coding

How Can I set variable width with !importanat using JavaScript/jQuery

Ia have a div named "#idDayNrCell". I want to get its width then do some calculations and apply it to another div called ".event". I am using bootstrap so i need to apply !important aswell. I am new to javascript/jquery.
I tried something like this. But it didn't wotk
$(document).ready(function(){
var cellWDTstr = ($("#idDayNrCell").css("width")); //get width
var cellWDT = cellWDTstr.substr(0,cellWDTstr.length-2); //remove the "px" part
console.log(cellWDT);
var GunSayisi=2; //how long is the event (2 for example)
// after tihs things get complicated for me
// if the even is minimum 2 days i need a different width. calculated below
var wdtEnAz2 = ((cellWDT-30)*GunSayisi + 30*(GunSayisi-1)).toString();
console.log(wdtEnAz2);
var setWdt = GunSayisi>1 ? wdtEnAz2 : calWdt;
//after here it is expoerimental code which I am failed
console.log(setWdt);
setWdt+= 'px';
console.log(setWdt);
$(".event").style.setPsetProperty('width',setWdt,'important');
});
this is the html

Using ES6,
var width = "100px";
$(".event").attr('style', `width: ${width} !important`);

Add like this :
$('.event').attr('style', 'width: '+ setWdt +' !important');

You can use css property from jquery, please find below code snippet :
$(".event").css( "width", function(
setWtd ) {
return setWtd + '!Important';
});

jQuery on('click', ...) not working on appended element

I have a div that I append with the following code:
function generateBall(){
var colors = ["fe0ba5", "00c0ff", "21f1a5", "f13e21", "e819fb", "3ae319", "ff9900", "512e5e", "284184"];
var width = $('.reaction_area').width() - 40;
var height = $('.reaction_area').height() - 40;
var a = Math.floor(Math.random()*(width - 40 + 1) + 40);
var b = Math.floor(Math.random()*(height - 40 + 1) + 40);
var size = Math.floor(Math.random()*(32 - 24 + 1) + 24);
var color = colors[Math.floor(Math.random() * colors.length)];
$('.reaction_area').append('<div class="ball_2" style="left: '+a+'px; top: '+b+'px; height: '+size+'px; width: '+size+'px; background: #'+color+'" data-id="'+wave+'"></div>');
}
And then I have this:
$('.ball_2').on('click', function(){
$(this).remove();
wave--;
});
And it's not working. I have other elements that I append like that and clicking them works, why this doesn't?
I've tried also with $('document').on('click', '.ball_2', function(){ //code }); and it didn't work either.

That would be $(document) (without the quotes).
$('.ball_2').on('click', ...) doesn't work because the element .ball_2 doesn't exist yet at the time of execution. However, $(document).on('click', '.ball_2', ...) works because it puts the handler on an ancestor element and takes advantage of a phenomenon called "event bubbling". In simple terms, an ancestor is considered clicked when a descendant is clicked.

Since element with class ball_2 is generated dynamically.
$(document).on('click','.ball_2', function(){
$(this).remove();
wave--;
});

add following line in generateBall() function. Because the div is created dynamically, so we should bind the function when it being create. And this statement can let every '.ball_2' got it own remove function, assume there may be more than one '.ball_2'.
$('.ball_2:last').on('click', function(){$(this).remove());});

use delegate :
$('.reaction_area').delegate('.ball_2', 'click', function (event) {
$(this).remove();
wave--;
});

animation function is not applied to each elements

here is a problem i am facing in my progressbar. i have data-percent attribute in my "pro-bar" class . each data-percent is different but when in browser i'am getting first pro-bar's data-percent value applied to all
Here is my code:
$('.pro-bar').each(function( i, elem ){
var percent = $('.pro-bar').attr('data-percent'),
barparcent = Math.round(percent*5.56),
$elem = $(this);
console.log(percent);
$elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});

Your problem is how you are referring to your pro-bar inside the each. Use "this" to refer to the current element, not a general class selector.
$('.pro-bar').each(function( i, elem ){
var percent = $(this).attr('data-percent'),//change here
barparcent = Math.round(percent*5.56),
$elem = $(this);
console.log(percent);
$elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});
Further explanation:
$(".pro-bar").attr("data-percent") gets all of the .pro-bar, then .attr("data-percent") gets the value of the first element (as does most other similar jquery methods). Then as you loop through each element, this same effect is called multiple times.

...scrollTop($(this)...)

I have a few divs with the .class class whose scroll position is defined by another child of its parent, so I need to assign a scrollTop() with $(this), something like
$(".class").scrollTop($(this).parent().find('.child').scrollTop());
But that code doesn't work...
$(".class").scrollTop(
function(){
$(this).parent().find('.child').scrollTop()
}
);
Doesn't work either. Any clue?

This is assuming that I am reading your question right. You have mulitple "class" elements that have their own "child" elements. You would need to use each to set every element separately.
$(".class").each(
function(){
var elem = $(this);
var childsScrollPosition = elem.parent().find('.child').scrollTop();
elem.scrollTop(childsScrollPosition);
}
);

ScrollTop wants an integer for the position so passing the DOM node wont help.
Try caching your selector and pass it with the position method:
var scrollTo = $(this).parent().find('.child');
$(".class").scrollTop( scrollTo.position().top );
Or you use offset depending on your use case:
var scrollTo = $(this).parent().find('.child');
$(".class").scrollTop( scrollTo.offset().top );
I am doing this blind here but this should work too:
var scrollTo = $(this).parent().find('.child');
$(".class").scrollTop(
function() {
return scrollTo.offset().top;
}
);
Does this help?

Dynamically type a text inside a div using jQuery

My aim is to be able to type a text on the fly (that can be resized and move) inside a given div element, so I have created a textbox that is appended where i clicked.
$('div').click(function(e){
var top = e.clientY+'px';
var left = e.clientX+'px';
$('div').append('<input type="text">');
$('input[type="text"]').css({'position' : 'absolute','top' : top,'left' : left});
});
problem is that, when I was about to type a text, it won't let me and it created a new textbox instead.
Heres a fiddle to demo the problem.
Is there any clean approach as to what I wanted to do? Any suggestions is greatly appreciated. TIA

Use .focus() on input additionally.
Demo: http://jsfiddle.net/p2ct8eL7/4/
JS:
$('div').click(function (e) {
var top = e.clientY - 20 + 'px';
var left = e.clientX - 20 + 'px';
var i = $('<input type="text">'); //Store the input in a variable.
$('div').append(i);
i.css({
'position': 'absolute',
'top': top,
'left': left
}).focus(); // modify the current input instead of all.
});

When clicking, simply remove the click-Handler or check if there already is an input, so that your code can be skipped. Put this at the top of your event handler function:
if($(this).find('input[type="text"]').length > 0){
return;
}
Here's the fiddle: http://jsfiddle.net/p2ct8eL7/2/