Как изменить размер вложенных divs на основе ввода пользователем

Я делаю проект от The Odin Project. В основном this.Как изменить размер вложенных divs на основе ввода пользователем

Вот код:

HTML

<!DOCTYPE html> 

<html> 

<head> 
    <script src="js/jQuery.js"></script> 
    <link type="text/css" rel="stylesheet" href="css/sketch.css"> 
    <script src="js/sketch.js"></script> 
</head> 

<body> 
<div class="grid_controls"> 
    <button class="clear">Clear</button> 
</div> 
<div class="container"> 
</div> 
</body> 

</html>

CSS

/*================= 
General 
=================*/ 

body { 
    background: aqua; 
} 

/*================= 
Sketchpad Holder 
=================*/ 
.container { 
    width: 500px; 
    height: 400px; 
    background-color: orange; 
    overflow: hidden; 
    margin: auto; 
    position: relative; 
    top: 20px; 
} 

.box { 
    width: 16px; 
    height: 16px; 
    background: yellow; 
    display: inline-block; 
    margin: 1px 1px 1px 1px; 
    left: 0.5%; 
    right: auto; 
    position: relative; 
} 


.clear { 
    position: relative; 
    margin: auto; 
    text-align: center; 
}

Javascript/Jquery

var default_grid_num = 435; 
var div_limit = prompt("How large would you like your grid to be?"); 
var button_prompt = "Would you like to redraw the grids?"; 
/*var div_limit = prompt("number")*/ 
$(document).ready(function() { 

for(var i = 1; i <= div_limit; i++) 
    $(".container").append("<div class='box'></div>"); 

$(".container > div").hover(function() { 
    $(this).css("background-color", "red"); 
}); 

$("button").click(function() { 
    $(".box").fadeOut(); 
    if(confirm("Would you like to redraw the grid?")); 
    { 
     boxes_per_row = prompt("Define width of grid."); 
    } 
}); 


});

То, что я хочу сделать, это получить пользовательский ввод (.div_limit) и изменить размер divs (.box) на основе ввода пользователей (.div_limit). Поэтому, если пользователь вводит только номер один, один div будет занимать весь контейнер.

Вот то, что я до сих пор: http://codepen.io/zappdapper/full/epdPKb/

Я знаю, что могу это сделать, но как?

источник

2015-09-24 zappdapper

Что-то вроде этого? https://stackoverflow.com/questions/32717869/multi-divs-into-container – Sachin

По внешнему виду вы хотите перевести число в процентах, чтобы каждое поле занимало определенное количество пространства контейнера, правильно ? –

@ VincentWilkie, это именно то, что я хочу. Не мог бы сказать это лучше. – zappdapper

Я сделал jsfiddle, который использует оператора мод % и некоторую математику, чтобы определить процент для ящиков.

Я также включил max_per_row, чтобы определить, сколько должно отображаться в строке.

источник

2015-09-24 20:33:32

Это может сработать, но как бы интегрировать его в мой текущий код? – zappdapper

Я бы сказал, просто попробуй что-нибудь. На основе кода в вашем вопросе; цикл for в jsfiddle будет где ваш цикл for и 'var limit' из jsfiddle будет вашим' div_limit'. Кроме того, 'max_per_row' является вашим' box_per_row' –

UPDATE

Я взял другой взгляд на вашем примере и ваш комментарий, и придумать с этим:

http://jsfiddle.net/xw4cbo5n/

Я слегка отредактированный пример так, что вместо того, чтобы задавать два вопроса , задается только один вопрос: «Сколько ящиков в строке сетки» (это похоже на ваш пример).

Затем он продолжает вытягивать сетку, где каждая строка содержит это число, и соответственно устанавливает каждую ширину и высоту лука. Я также немного изменил ваши стили CSS.

Это ближе к тому, что вы ищете?

Я создал JSFiddle, который отображает две подсказки при запуске:

1) Сколько коробок вы хотели бы?

2) Сколько ящиков должно занимать один ряд?

http://jsfiddle.net/5vg6n232/

После того, как ответы даны, сетка рисуется.

Я слегка отредактировал CSS, но основная функциональность приводится несколько функций:

function drawBoxes(){

заботится о добавлении правильного номера на дивы к странице. После того, как это сделано, вызывает:

function restyle(numberofBoxesPerRow){

который просто для Reset ширина CSS каждой коробки в зависимости от того, может коробок в строку указан пользователь.

Ответит ли это на ваш вопрос?

источник

2015-09-24 21:25:56

Это полезно, но не совсем то, что я ищу. Я бы предпочел, чтобы вложенные divs занимали всю область контейнера. Например, если пользователю нужен только один div, то один div заполнит 100% контейнера. Как я мог это сделать? – zappdapper

Как изменить размер вложенных divs на основе ввода пользователем

ответ

Смежные вопросы