Я работаю над веб-приложением (только для IOS). Я загружаю фрагменты HTML через jQuery и заполняю ими приложение, добавляя их в DOM.
Я хочу визуализировать один из этих HTML-битов с помощью макета колонки CSS3 (в файле .css).
Когда div с макетом столбца загружен, я обнаружил, что ссылки внутри него больше не работают. Если я не использую столбцы, они работают нормально.
Пример загруженного HTML:
<div class='page layout_article'>
<div class="articleColoumnLayout">
<h2>Fragmentation in Care</h2>
<p>Lorem Ipsum</p>
<div class='quoteContainer'>
<em>Lorem Ipsum</em>
<a href='roz'>Roz</a> <!-- THIS IS THE NON WORKING LINK -->
</div>
</div>
</div>
Код Jquery, который его загружает (где #content - это div, в который я загружаю вещи):
var fileUrl = "path/page.html";
$.get(fileUrl, function(data){
var html = $(data);
var elements = html.filter('.page');
var currentCell = 0;
jQuery.each(elements, function(index, value){
jQuery('<div/>', {
id: "cell"+currentCell,
"class": "cell"
}).appendTo("#content");
$('#cell'+currentCell).append(value);
currentCell++;
}
CSS
.articleColoumnLayout{
margin: 64px;
height: 608px;
overflow: hidden;
text-align: justify;
-moz-column-count: 2;
-moz-column-gap: 32px;
-webkit-column-count: 2;
-webkit-column-gap: 32px;
column-count: 2;
column-gap: 32px;
}
Любой указатель, предложение, совет более чем приветствуются. Я очень близок к тому, чтобы отказаться от колонн.
Большое спасибо,
елена
--------------------------------------- # РЕДАКТИРОВАТЬ
Я заново создал страницу, которую описываю выше, и не могу воспроизвести ошибку.
Ячейки div, которые я создаю с помощью jQuery, содержатся в Zynga Scroller
http://zynga.github.com/scroller/
, который можно прокручивать только вдоль оси X. Я предполагаю, что ошибка связана с взаимодействием скроллера Zynga и колонок CSS3.
<div id="container">
<div id="content"></div>
</div>
<script type="text/javascript">
var container = document.getElementById("container");
var content = document.getElementById("content");
// Initialize Scroller
scroller = new Scroller(render, {
scrollingY: false,
paging: true
});
// Setup Scroller
var rect = container.getBoundingClientRect();
scroller.setPosition(rect.left+container.clientLeft, rect.top+container.clientTop);
scroller.setDimensions(container.clientWidth, container.clientHeight, 1024*pages.length, content.offsetHeight);
scroller.setSnapSize(1024, 738);
</script>