Can't get height of dynamic created button using jquery - javascript

What I have:
I dynamically create a button and try to access the button width. In this example I'm doing console.log() but in my real case I want to use that value for other things.
let deleteButton = $(document.createElement("button"))
.addClass("deleteButton")
.text("delete")
.click(function() {
delete(this);
});
console.log($(deleteButton).width());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The Problem:
Buttons have a width and height by default, but the console.log() shows zero.
How to get the default width and height of the button?
Observation: The most likely answer to be accepted is using .width() like functions of jquery or explain why that function is not working and show a better solution.

The function $.width() gets the current computed width for the first element in the set of matched elements.
Basically, that element wasn't rendered/processed by the engine, so the width is not available before it's added to the DOM tree.
let deleteButton = $(document.createElement("button"))
.addClass("deleteButton")
.text("delete")
.click(function() {
delete(this);
});
// Here the engine will render/process this element.
$(document.body).append(deleteButton);
console.log($(deleteButton).width());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

Equal height and window resize function on EACH element of the multiple CSS classes

Not an expert on coding, find a solution on how to use "each". But then suck on combining with the equal heigh line. Please help!
After everything load, "slick-list" is the one that equal with the height of the tallest slide. Then I want that/ each "carousel-wrap-x band" equal on it own "slick-list".
$("[class*='carousel-wrap-'] .carousel").each(function() {
$(this).slick({
appendArrows: $(this).siblings('.carousel-control'),
other functions
});
$(this).siblings({
var offsetHeight = $(this).siblings('.slick-list').outerHeight();
$(this).siblings('.carousel .band').outerHeight(offsetHeight);
$( window ).resize(function() {
$(this).siblings('.carousel .band').css("height", "100%")
var offsetHeight = $(this).siblings('.slick-list').outerHeight();
$(this).siblings('.carousel .band').outerHeight(offsetHeight);
});
});
});
<div class="carousel-wrap-1">
<div class="carousel-control"></div>
<div class="carousel">
<div class="slick-list">
<div class="band">1</div>
<div class="band">2</div>
<div class="band">3</div>
</div>
</div>
</div>
Not sure I totally understand what you're going for - definitely a lot going wrong here, I applaud your adventurousness if you're relatively new to code though! I'm familiar with both slick slider and jquery's "each" - so here are a few things I see going wrong.
The jquery function .each() takes in two parameters - index and element. I think index is the index of the array you'd get back from $("[class*='carousel-wrap-'] .carousel") - I don't generally use that - and element is the element returned by the selector, sans jquery wrappage.
I can't remember what "this" is going to refer to but looking in my own code I'd be using the $(element) in its place
e.g.
$(".selector").each(function(index, element) {
$(element).addClass("do-a-thing");
});
As for this bit - $(this).siblings( {... } );
First off, siblings takes in a selector - I'm guessing that passing in a block of code like that just blows it up?
Second, the containing .each()'s parent selector is for "[class*='carousel-wrap-'] .carousel" - so that'd look for the siblings of the carousel, which is just carousel-control, which is clearly not what you're looking for.
Lastly, the window event listener - if you want that to apply to a specific object, I believe you'll need .bind(this) (or .bind($(element)) or whatever) after the function call like so:
$( window ).resize(function() {
$(this).siblings('.carousel .band').css("height", "100%")
var offsetHeight = $(this).siblings('.slick-list').outerHeight();
$(this).siblings('.carousel .band').outerHeight(offsetHeight);
}.bind(this));
Otherwise I think "this" will be the window
Still not 100% on what you're trying to do - educated guess, you're trying to make the bands inside slick list equal height, and slick-list is a carousel slide (so it's a slide with 3 columns or somesuch)?
If that's the case, have you tried experimenting with making it a flex box? Could be a problem you could solve with CSS instead of javascript, and that's always preferable!
Good luck and I hope that helps!

Enable scroll onClick

I'm working with 2 divs, the first div should fill the whole screen (width & height) and once there is a button or link clicked in it, it should enable the scroll besides take to the second div.
I have been able to set something like this https://codepen.io/malditojavi/project/editor/ZgWYrZ/#0 But I'm unable to change the class of the with my own class 'allowscrolling' that would re-enable that scroll.
I used this function
allowScrolling() {
document.getElementByTagName("body").className = "allowscrolling";
}
Also tried via jquery, with:
<script>
$("button").click(function(){
$("body").css("overflow","scroll");
});
</script>
But both won't enable scroll after I click the first link. Anything I'm missing?
There is no getElementByTagName that returns a single element. There is a getElementsByTagName that returns an array. Use that and get the first element of the arrray to set the class
document.getElementsByTagName('body')[0].className = 'allowscrolling';
document.getElementsByTagName('body')[0].className += ' allowscrolling';
This will do, you can't use jQuery if you don't load it in your project.

Scroll multiple div at the same time

I'm trying to scroll multiple div at the same time. when i scroll in one div, i would like to report the scroll in all div.
I create the div dynamically. So i use the function document.getElementsByClassName sub-category-container to get all my elements. And i try to get the current scroll of the current div to defer the value.
I can not get it to work through the class names.
Do you have a solution?
Here is an example of what I try to do :
JSFiddle
As you are using jQuery already Use class selector. Try this:
var subCatContainer = $(".sub-category-container");
subCatContainer.scroll(function() {
subCatContainer.scrollLeft($(this).scrollLeft());
});
DEMO
Based on your JSFiddle,
$(".sub-category-container").scroll(function() {
for(var i in subCatContainer)
$(subCatContainer[i]).scrollLeft($(this).scrollLeft());
});
JSFiddle

set element width or height using jquery

Lets say I want to assign element's width to itself. For example, I have a div with content and I want to assign style="width:..." it.
Then in jQuery I do:
elem.width(elem.width());
Which looks for me totally wrong since it looks like how can I set the width by getting it..
Is there any better way to do it?
try this
document.getElementById('divName').style.width = '10px';
You can do this
$(function() {
$("#mainTable").width(100).height(200);
});
This has 2 changes, it now uses .width() and .height(), as well as runs the code on the document.ready event.
Without the $(function() { }) wrapper (or $(document).ready(function() { }) if you prefer), your element may not be present yet, so $("#mainTable") just wouldn't find anything to...well, do stuff to.
Better to add CSS using JQuery following way :
$(function() {
$("#test").css({
width : '30px',
height : '30px'
});
});
If you prefer the style, you could use jQuery's .css() method:
$('.element').css('width', $('.element').width());
If you have multiple elements with the same class (but different widths) you can do this:
$('.yourClass').width( function(id, width) {
return width;
});
See the docs for explanation.

jquery select class inside parent div

I'm trying to change the alt of the image, I'm clicking by
selecting the image's class (add_answer)
Note: .add_answer shows up multiple times inside different containing div's
jQuery(function(){ // Add Answer
jQuery(".add_answer").click(function(){
var count = $(this).attr("alt");
count++;
$('.a_type_'+count+'').show();
$(this).parents("div:first").$('.add_answer').attr("alt", count);
});
});
This line doesn't seem to be working, how do I select this add_answer class by way of it's parent div
$(this).parents("div:first").$('.add_answer').attr("alt", count);
Anyone else have an idea?
I'm trying having trouble decreasing the alt value on the .add_answer image when .destroy_answer is clicked
jQuery(function(){ // Hide Answer
jQuery(".destroy_answer").click(function(){
$(this).parents("div:first").hide();
var count = $('.add_answer').attr("alt");
count--;
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
});
});
Problem line:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
you can use the parent div as the scope:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
This should work:
$(this).parent("div").find(".add_answer").attr("alt", count);
You code is almost correct. Required change is to use .find instead of .$ after .parents method. Use of .parent instead of .parents should be avoided, this way your code will be more unobtrusive (precisely - this way img can be non-direct child of the div).
$(this).parents('div:eq(0)').find('.add_answer')
You can manipulate :eq(0) to select eg third parent div using :eq(2).

Categories