Обработка id по class
 

Добрый день!
Есть такая верстка, https://jsfiddle.net/vjowwL2r/2/
Мне нужно оставить пропорции всех элементов при изменении ширины браузера, но проблема в том, что я не знаю Id, а знаю только class, при этом свойства объекта привязаны через ID.

Подскажите, Как можно решить эту задачу?

mitrich38,
не особо понятно какие вам нужны пропорции и может попробовать решить это на css?

Есть точноый размер элементов
unkown100 - 300px
unkown101 - 400px
unkown102 - 500 px
По отношению к размеру экрана каждый элемент можно представить в процентном отношении, предположим что у меня размер стр 900 px
соответсвенно элементы
unkown100 - 33% от размера стр и тд;

Мне нужно при изменении размера стр оставить пропорциональное соотношение элемента к странице

При помощи CSS как я вижу это решить не получиться так как мне не известен id, он присваивается автоматически но при этом по id указываются параметры объекта.

mitrich38,
:-?

function calc_size() {
  var percent = $(this).width() / $(document).width() * 100;
  return percent + '%';
}

$(document).ready(function() {
 $('.MyClass').width(calc_size)
});

спасибо!

А так нельзя штоле:

.MyClass {width:33%}

?

нельзя
id имеет приоритет в css, во вторых соотношения индивидуальные для каждого элемента

Вот это

$('.MyClass').width(calc_size)

идентично

.MyClass(width:calc(/* тут чего-нить */););

Где тут про айди сказано?

напишите что тут добавить, пожалуйста!

Подскажите пожалуйста, как при изменение размера экрана увеличить пропорционально отступ между элементами по левому краю, что бы элементы не слипались?
https://jsfiddle.net/vjowwL2r/21/

mitrich38, так и не слипаются...

в каком браузере не не слипаются

рони, FF

mitrich38,
вы бы уже конкретно определились с размерами и отступами и расположением ...

Rise,
везде слипаются -- уменьши фрейм примера, запусти макет, увеличь фрейм

рони, я на уменьшение смотрел) при увеличении слипается да печально всё это) блин автор сразу не мог сказать про увеличение...

К сожалению конкретики дать не могу, так как вариантов может быть множество, но суть такая что бы при увеличении/уменьшении окна браузера изменялся размер блоков и расстояние между ними.

Отличная картинка)))
ну вот есть пример, он вполне конкретный, есть несколько элементов в произвольном порядке с разными значениями ширины и отступа. возможно вычислить (ширина первого элемента/ширина экрана) это значение прибавить к каждому конкретному элементу в парметры width и left

mitrich38,
нет алгоритма нет кода, ничем в таких условиях помочь не могу

ширина первого элемента/ширину экрана - получается конкретное значение;
Это значение прибавить к ширине каждого элемента

Чем не алгоритм?

для меня нет, мой вариант вы уже видели в 4 посте, что сейчас вы хотите и как это сделать я не знаю.

это то что нужно, вопрос то остался один, как этим же методом прибавить значение left к каждому элементу

не понимаю что вы ходите, но есть css прибавляйте куда и сколько вам надо

$elem.width(percent + '%');

можно так

$elem.width(percent + '%').сss("left", "xxx");

можно иначе

$elem.сss({"left" : "xxx", "width" : percent + '%'});

mitrich38, опиши задачу человеческим языком. Может быть все уже давно решено. Для доступа к дочерям по номерам можно юзать псевдо :nth-child()

Да задача то вроде простая, есть элементы https://jsfiddle.net/vjowwL2r/21/, которые при увеличении/уменьшении ширины экрана изменяют свои размеры, но вот если увеличить экран больше чем отступ между элементами то элементы начинаю слипаться. Мне нужно сделать что бы при изменении ширины экрана изменялся не только размер самих объектов но и расстояние между ними. То есть если я увеличил экран, то и расстояние между элементами увеличилось.
Как я вижу одна из проблем в том, что у элементов разный размер, и соотвественно они увеличиваются по разному. Ну а как увеличить отступ между ними я вообще не представляю)

Всем спасибо!!
Удалось решить, собственно вот такой результат и нужен был
https://jsfiddle.net/vjowwL2r/26/

Подскажите пожалуйста, возникла трудность, при генерации все нужные мне блоки оборачиваются в новый див с Css-ом, и все перестает работать, как тут быть? https://jsfiddle.net/vjowwL2r/32/

mitrich38,
уберите класс My если он мешает не генерируйте то что вам мешает и https://jsfiddle.net/vjowwL2r/33/

Я уже описывал задачу в том числе в личку, к сожалению помочь ни кто не смог. Делаю сам. Вот и приходится кусочками спрашивать, то что сам не понимаю как сделать.
К сожалению класс удалить нельзя, так как он связан с контентом.
Но в любом случаи, Спасибо!

mitrich38, не техническую проблему излагай, а хотелку блин. Хочу чтобы было вот так, понятно? Чего там расширяется и слипается - это техника, а нужна логика блин. Будет логика - технически все можно решить, а пока ты сам не понимаешь какая у тебя хотелка - ты будешь перебирать технические проблемы до морковкиного заговения.

Так вот, как ты хочешь - так не делается. В этом нет смысла. Потому что регулируется только ширина. Ну и станет она 10 пикс у твоего кувадратика, или даже 1 и что? Делается так, чтобы при уменьшении ширины элементы переверстывались. Например это умеют columns, или комбинация float width min-width с полями в процентах или через calc. Еще тупее - задавай все размеры в em, а потом эти em регулируй через базовый размер в пикселах. Короче, сначала расскажи что именно делаешь.

Откуда я знаю, что ты не знаешь чего хочешь? Отсюда:

Вот тебе, задача решена четко по ТЗ в цитате. https://jsfiddle.net/vjowwL2r/34/ без единого скрипа жабы. Пользуйся блин.

Да хотелка простая, я уже писал в другой ветке, есть вот такой блок http://artofflight.ru/org/, хочу сделать его резиновым.
Задача совсем не простая оказалась, частично ее решил, частично нет, вот по тем частям которые не решил и спрашиваю.

Пиши медиа-квери вместо того, чтобы резину тянуть.