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
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!
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.
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
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.
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).