Проблемы с позиционированием и делением на карусели изображений jQuery - PullRequest
Новая
       0

Проблемы с позиционированием и делением на карусели изображений jQuery

0 голосов
/ 28 января 2011

Мои знания Javascript в лучшем случае рудиментарны (я не программист по профессии), но я пытаюсь сложить вместе страницу так, чтобы на вершине карусели изображений jQuery было два элемента div. Эта страница является примером того, о чем я говорю, с этим снимком экрана, показывающим, как он должен выглядеть в правильной боевой форме: jtroll.com/chd/web/properform.png (в первый разплакат, stackoverflow не позволит мне прикрепить более одной правильной ссылки. Извините).

Моя первая проблема - попытаться выяснить, как выполнить какую-то хитрость позиционирования, чтобы я мог выдать оба div * 1005.* и #img_boxout поверх карусели jQuery, #slideblock.Я сделал глупый дополнительный div-обертку, названный box1_home, думая, что это поможет в этом усилии (потому что, когда я пытался поместить эти div в #slideblock, это запутало цикл изображения в карусели).

Я сделал немного position:relative дурачества, только чтобы понять, что оно толкает вниз всю страницу #slideblock в соответствии с высотой #cta_imgbox_learnmore.Плохие новости.Поэтому, конечно, я подумал, что дать #slideblock отрицательное верхнее поле может быть неплохим способом обойти это.

Как только я добавил второй div #img_boxout, все это пошло к черту.Текст, который я пытаюсь вставить в этот div, отодвигается в сторону, и мне пришлось добавить еще более нелепую отрицательную границу к вершине #slideblock.Не круто.

Так что, наверное, мой вопрос: что может быть лучше, чище, умнее, чтобы это не испортило карусель jQuery?

1 Ответ

0 голосов
/ 28 января 2011

Лучший способ - получить позицию элемента, который вы хотите использовать в качестве ссылки.

Предположим #carrousel в качестве элемента слайдера и #block в качестве элемента, который вы хотите над ним (используя jQuery): 

var ob = $('#carrousel').offset();
$('#block').css({ 'top': ob.top, 'left': ob.left }).show();

Это всего лишь пример. Возможно, вам придется выработать эти значения, чтобы получить именно то, что вы хотите. Обратите внимание, что вы должны создать #block, но скрыть его с помощью css, чтобы он не показывался, пока не наступит "его время сиять".

РЕДАКТИРОВАТЬ : Рабочий пример:

CSS 

#carrousel_text
{
  position: absolute;
  display: none;
  z-index: 2000; // might need to be changed if you can't see it
  top: 0;
  left: 0;
  width: 200px; // change to whatever you need
  height: 100px; // change to whatever you need
  background: red; // so that you can see what you're doing
}

JS 

// the one you already have, do not creae another instance of jquery
jQuery(document).ready(function() { 

// gets the top and left position of the #slideblock
var ob = $('#slideblock').offset();
// adds the top and left position to the #carrousel_text and shows it where you want it
// note that you'll have to sum or substract to ob.top and ob.left accordingly to what you visually need, e.g. untill it's in the right place.
$('#carrousel_text').css({ 'top': ob.top+50, 'left': ob.left+50 }).show();

Наконец, вы можете просто вставить свой #carrousel_text в разметку в любом месте, где вы хотите (это не имеет значения), и поместить в него другие элементы div, например: 

<div id="carrousel_text">
  <div id="cta_imgbox_learnmore">
    <a id="cta_img_learnmore" href="#" title="Learn More"><span>Learn More</span></a>
  </div>    
  <div id="img_boxout">
    <p>Read our story and our methodology in crafting your custom home</p>
  </div>
</div>
...