[Решено] jQuery и работа над элементами в iframe

[ELLE]

Такс, люди, нужна ваша помощь  

Имеется iframe, в котором есть определенный блок с классом .col2 и инлайновой шириной, допусти style="width:50%"
По клику на определённый блок вне фрейма, я добавляю новый блок .col2, далее получаю новое кол-во всех .col2 (допустим было всего 2шт, с новым элементом стало 3)

А вот далее, мне надо задать новое значение ширины для всех! Этим значением будет уже не 50%, а 33.333333333333336%

И тут случился затык!

Код

$("iframe").contents().find(".col2").css("width", count+"%");

Добавляет ширину только во вновь добавленный блок! Ранее существующие идут лесом! .each() тоже вроде не работает

целиком всё

Код

jQuery(document).ready(function(){
$("#jform_params_content_menu-lbl").after("<div class='blank' id='addcols'><a>button</a></div>");
 
$( "#addcols" ).click(function(){
 
        $("iframe").contents().find(".right-menus").append("<div class='col2'>I'm in new Element!</div>");
             var count = 100/$("iframe").contents().find(".col2").length; 
              alert(count);
 
        $("iframe").contents().find(".col2").css("width", count+"%");
    });
 
});

еще попробовала сначала удалить style , потом добавить.
как-то странно работает, только по отдельности

Код

$( "#addcols" ).click(function(){
$("iframe").contents().find(".col2").removeAttr('style'); //удалили style
        $("iframe").contents().find(".right-menus").append("<div class='col2'>I'm in new Element!</div>"); //вставили новый блок    
 
$("iframe").contents().find(".col2").attr('style', "width:'10px'"); //добавили новый атрибут
 // и атрибут не добавился, сработали только первые 2 строчки
  });

короче или так, или так. вместе эти 3 строки не хотят работать

[Aleks.Denezh]

А вызвать медод в iframe который будет все пересчитывать внутри него? (конечно если фрейм на вашем сайте, а не с чужого кусок)

[flyingspook]

а если добавлять ко клику не .col2 а уже .col3 и тд.
потом расчет делать по if(.col2) if(.col3) и дт.

[fsv]

.css() - только первый элемент набора обрабатывает

$("iframe").contents().find(".col2").css("width", count+"%");

$("iframe").contents().find(".col2").each(function(){
  $(this).css("width", count+"%");
});

.each() тоже вроде не работает

а как пробовала?

[ELLE]

.css() - только первый элемент набора обрабатывает

$("iframe").contents().find(".col2").each(function(){
  $(this).css("width", count+"%");
});
а как пробовала?

нет, вот в данном случае .css() обрабатывает все вновь добавленные .col2, вне зависимости от их кол-ва, но не затрагивает те, что уже там были
пробовала и each() и map()
- не работает все равно

Показать текстовый блок

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

[Fedor Vlasenko]

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

А на песочницу  выложить http://jsfiddle.net/
И по рисунку. По логике кнопка в редакторе должна быть

[ELLE]

Федор, это весь код что есть (первый в старт-посте), только jquery надо подключить и его; и селекторы вставить свои
у меня поле называется content_menu, соотвественно селектор - #jform_params_content_menu-lbl, вам нужно поменять на свое (можете в модуле html-код глянуть или в материале, где вам удобнее).
есть предположение, что просто скрипты редактора мешают (где-то перехватывают)
насчет кнопки, ну будет потом обычная кнопка редактора, только смысл в ней, если не отрабатывает пользовательский скрипт внутри редактора, а мне нужно жестко задавать разметку и пересчитывать ширину

Показать текстовый блок

к тому же почувствуйте разницу как работает моя кнопка и кнопка редактора по дефолту

[fsv]

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

\administrator\templates\khepri\index.php
страница создания материала - TinyMCE

Код

<script type="text/javascript">
jQuery(function($) {
  $("#catid").after("<br /><br /><span id='addcols' style='cursor:pointer;'>ClickMe</span>");
  $("#addcols").on("click",function(){
    $("body",$("iframe#text_ifr").contents()).append("<div class='col2' style='text-align:center; float:left;'>Hi, ELLE!<br />It works!</div>");
    var count = 100/$("body",$("iframe#text_ifr").contents()).find(".col2").length; 
    $("body",$("iframe#text_ifr").contents()).find(".col2").each(function(){
      $(this).css("width", count+"%");
    });
  });
});
</script>

[ELLE]

Оно-оно!   Спасибо! Теперь все просто отлично  

-----------------

Хм, кстати зашла с Opera, и мой код работает...

Код

jQuery(document).ready(function(){
 
$("#catid").after("<div class='button2-left' style='margin:10px;'><div class='blank' id='addcols'><a>Добавить колонку</a></div></div>");
 
$( "#addcols" ).click(function(){
       $("iframe#text_ifr").contents().append("<div class='col2'>I'm in new Element!</div>");
       var count = 100/$("iframe#text_ifr").contents().find(".col2").length;       
   $("iframe#text_ifr").contents().find(".col2").css("width", count+"%");  
 });
 
});

странно, видимо кеш...хотя чистила не раз

fsv, пробовал этот вариант?

[fsv]

Хм, кстати зашла с Opera, и мой код работает...
fsv, пробовал этот вариант?

Тогда в Opera не пробовал, в ней я тырнет бороздю, работаю только в FF.
Сейчас попробовал в FF/Opera/Chrome , не пошло: e is null

[warlocksp]

Не подскажите по этому вопросу, не могу найти ответа...
http://joomlaforum.ru/index.php/topic,328578.msg1651603.html#msg1651603