Tính tổng chiều rộng của Trẻ em với jQuery

Tôi đã cố gắng tìm một câu trả lời dễ hiểu cho điều này, nhưng đã từ bỏ.Tính tổng chiều rộng của Trẻ em với jQuery

Để có dymnamic nội dung (như bài đăng trên blog và hình ảnh) trong một website ngang (như trên thehorizontalway.com), bạn phải thiết lập chiều rộng cố định cho BODY trong pixles, phải không? Bởi vì bạn sử dụng các phần tử nổi bên trong nó, nếu không sẽ làm vỡ và quấn xuống trang, tùy thuộc vào chiều rộng của trình duyệt.

EDIT! Giá trị cụ thể này có thể là được tính với jQuery, cảm ơn điều đó :) Trong ví dụ này, giá trị bổ sung được thêm vào tổng kích thước, có thể được sử dụng cho nội dung trước phần tử thả nổi. Bây giờ cơ thể được một chiều rộng năng động!

suy nghĩ ban đầu của tôi là sẽ sử dụng jQuery tính toán này cho chúng ta: ('MỖI POSTS WIDTH' * 'số bài viết') + 250 (đối với nội dung thêm)

HTML code

<body style="width: ;"> <!-- Here we want a DYNAMIC value --> 
<div id="container"> 
    <div id="menu"></div> <!-- Example of extra content before the floats --> 
    <div class="post">Lorem</div> 
    <div class="post">Lorem</div> 
    <div class="post">Lorem</div> <!-- Floated elements that we want the sizes of --> 
    <div class="post">Lorem</div> 
</div> 
... 
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be (300+300+300+500) + 250 [#menu] = 1650px -->

Kết quả và câu trả lời từ Alconja

$(document).ready(function() { 
var width = 0; 
$('.post').each(function() { 
    width += $(this).outerWidth(true); 
}); 
$('body').css('width', width + 250); 
});

Cảm ơn rất nhiều!

Nguồn

2009-06-18 elundmark

Hình như bạn đã có nó khá nhiều đúng ... một vài ghi chú mặc dù:

.outerWidth(true) bao gồm lề đệm & (vì bạn đang đi qua true), do đó không cần phải cố gắng & thêm lại điều đó.
.outerWidth(...) chỉ trả về chiều rộng của phần tử đầu tiên, vì vậy nếu mỗi phần tử có kích thước khác nhau, nhân số này với số lượng bài đăng sẽ không phải là giá trị chính xác của tổng chiều rộng.

Với ý nghĩ một cái gì đó như thế này nên cung cấp cho bạn những gì bạn đang sau (giữ 250 đệm ban đầu của bạn, mà tôi giả định là cho các menu & điều?):

var width = 0; 
$('.post').each(function() { 
    width += $(this).outerWidth(true); 
}); 
$('body').css('width', width + 250);

Điều đó giúp đỡ, hoặc là có một số vấn đề cụ thể khác mà bạn đang gặp phải (không hoàn toàn rõ ràng từ câu hỏi của bạn)?

Nguồn

2009-06-18 23:50:30 Alconja

Tuyệt vời, đó chỉ là ý tôi. Tôi sẽ chỉnh sửa câu hỏi sau để nó rõ ràng hơn những gì tôi đã nói về. Như bạn đã nói, mã tôi chỉ lấy dấu đầu tiên và tính phần còn lại bằng cách nhân chúng với .size() - điều này làm cho việc cuộn trang ngang trở nên dễ dàng hơn nhiều, làm cho chiều rộng của cơ thể động trên mỗi trang :) cần một số noscript siêu-chiều rộng cơ thể được thêm vào và nó được thực hiện. – elundmark

+1 Cảm ơn, đã tiết kiệm thời gian cho tôi. – 472084

D: GÌ !! NÀY EXISTS!?!?! Tôi đã tái tạo outerWidth() trong nhiều tháng !!! –

Bạn có thể tính chiều rộng bằng một lớp lót này, mặc dù dài hơn một chút so với mức tôi muốn.

var width = $('.post').map(function(undefined, elem) { 
    return $(elem).outerWidth(true); 
}).toArray().reduce(function(prev, curr) { 
    return prev + curr; 
}, 0);

Nguồn

2016-06-17 00:02:58 smac89

Tính tổng chiều rộng của Trẻ em với jQuery

Trả lời

Các vấn đề liên quan