Вставьте логотип рядом с любым элементом DOM

Я разрабатываю расширение Firefox, которое изменяет содержимое загруженной веб-страницы. Сначала я выбираю все элементы, атрибуты «src» или «href» соответствуют моему регулярному выражению (эта часть кода работает).Вставьте логотип рядом с любым элементом DOM

Тогда, я хотел бы разместить немного изображение в правом верхнем углу родительского найденного элемента, используя следующий код:

/* create and add attributes to image */ 
var img = window.content.document.createElement("img"); 
var b = window.content.document.createAttribute("src"); 
b.nodeValue = "chrome://plugin/content/agent.png"; 
img.setAttributeNode(b); 
img.addEventListener("click", function(){ alert("ds"); }); 
img.style.display = "block"; 
img.style.border = "3px solid red"; 
img.style.position = "relative"; 
img.style.top = "-10px"; 
img.style.right = "-10px"; 
img.style.left = "20px";

// ... код, чтобы вернуть элемент ...

//now insert the image 
$jq(img).appendTo(element.parentNode);

Текущий результат состоит в том, что либо изображение показано только в нижней части родительского элемента элемента, либо вообще не показано.

Если вы посмотрите на это: http://jsfiddle.net/yzwh5/64/ - Я хочу, чтобы моя кнопка работала аналогично этому красному кресту.

источник

2012-04-04 Jessica Stansfield

Во-первых, CSS-поплавки называются cssFloat (или htmlFloat в некоторых браузерах), потому что float является зарезервированным словом. Во-вторых, нет такого значения float как block.

В-третьих, вы пропустили x в -10px для right.

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

В-пятых, вы не должны использовать createAttribute, так как узлы атрибутов не являются надежными во всех браузерах. Вместо этого используйте элемент setAttribute.

В-шестых, если это сработало, это испортит макет страницы вокруг элемента, который вы ищете, поэтому вам будет лучше с position: absolute, чтобы он не влиял на поток. Однако, если вы это сделаете, вы должны использовать margin-left вместо left (то же самое для других направлений), чтобы перемещать элемент вокруг.

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

источник

2012-04-04 15:12:35

Это одно из многих решений, которые я использовал. Я поправил его, как вы предлагали, но до сих пор не испытываете радости. Любые другие предложения/решения, как решить эту проблему? –

Вы должны «играть» с позиционированием CSS элемента, на самом деле это не имеет значения, где вы вставить изображения, но где вы их позиционируете.

Может быть, вы хотели бы взглянуть на «следующий к», плагин JQuery, который автоматизирует вычисления для размещения элемента рядом с другим элементом

Например:

<script type="text/javascript"> 
    $('.PlaceThisDiv').nextTo($('.ThisOtherDiv'), {position:'right', shareBorder:'top'}); 
</script>

Как вам может видеть в этом Fiddle я приготовил (содержит сам плагин)

http://jsfiddle.net/PvcNr/

вы получите что-то вам Лик е это:

See screenshot

Подробнее: https://code.google.com/p/next-to/

Надеется, что это помогает

источник

2012-04-04 15:33:17

Try кода CSS, как это:

.my-ext-overlay:after { 
    content:url(smiley.gif); 
    position: absolute; 
    margin-left: -16px; margin-top: -16px; 
}

, а затем добавив».my-EXT- overlay "для каждого найденного вами элемента.

example

источник

2012-04-04 15:44:41 Yuval

Вставьте логотип рядом с любым элементом DOM

ответ

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