Форум

majahead · #1 (**permalink**) 29.10.2010, 19:39

Помогите пожалуйста.
Есть конструкция вида

<a id="a1" href="#">Мамонтова А.А.<span><div>текст</div><p>текст</p></span></a>

То что в спан - display none и по клику по ссылке мне надо вывести это в tooltip, вообщем в блок за пределами этой конструкции... У меня не получается никак... Подскажите пожалуйста куда рыть, что использовать.
В заранее при много благодарен.

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

monolithed · #2 (**permalink**) 29.10.2010, 19:53

<a href="#">Hello</a>
<span style="display: none;">World</span>

<script type="text/javascript">
window.onload = function(){
   document.getElementsByTagName('a')[0].onclick = function(){
       this.innerHTML = document.getElementsByTagName('span')[0].innerHTML;
       return false;
   };                             
};
</script>

Андрей38 · #3 (**permalink**) 28.12.2010, 18:23

$("#ТвойСелектор").AppendTo("#Твой Див") Для JQuery Это все что я накопал )

Vulkan · #4 (**permalink**) 28.12.2010, 20:43

Вот вроде то что нужно тебе:

<script type="text/javascript">
window.onload = function () {
    document.getElementsByTagName('a')[0].onclick = function () {
        var span = document.getElementsByTagName('span')[0];
        var div = document.getElementsByTagName('div')[1];
        div.innerHTML = span.innerHTML;
    }
}
</script>

<a id="a1" href="#">Мамонтова А.А.<span style="display:none;"><div>текст</div><p>текст</p></span></a>

<div style="width:100px; height:100px; border:1px black solid;"></div>

Андрей38 · #5 (**permalink**) 07.02.2011, 12:34

Пожайлуста,помогите . Не знаю как реализовать.
Нужно переместить контент c ID в совпадающие по ID ячейки по клику на контенте (в этом случае контент -это картинки). Буду признателен также и за подсказки на информацию относительно этой задачи

<img id="one" src="img1.jpg" width="100" height="100" />
<img id="two"src="img2.jpg"/>
<img id="three" src="img3b.jpg" />
<table width="200" border="1">
  <tr>
    <td id="one">id=one</td>
    <td>***</td>
  </tr>
  <tr>
    <td id="two">id=two;</td>
    <td>***</td>
  </tr>
  <tr>
    <td id="three">id=three</td>
    <td>***</td>
  </tr>
</table>

SkyLight · #6 (**permalink**) 08.02.2011, 10:14

ID на странице не могут повторяться, они должны быть уникальными.

ksa · #7 (**permalink**) 08.02.2011, 10:53

Андрей38, как вариант...

<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<script>
function Go() {
	var o=document.getElementById('scr')
	var os=o.getElementsByTagName('img')
	var i,on
	var n=os.length-1
	for (i=n; i>=0; i--) {
		on=document.getElementById(os[i].className)
		if (!on) {
			continue
		}
		on.innerHTML=''
		on.appendChild(os[i])
	}
}
</script>
</head>
<body>
<div id='scr'>
	<img class="one" src="http://javascript.ru/forum/images/smilies/smile.gif" />
	<img class="two" src="http://javascript.ru/forum/images/smilies/thank_you2.gif"/>
	<img class="three" src="http://javascript.ru/forum/images/smilies/victory.gif" />
</div>
<table id='info' width="200px" border="1">
<tr>
	<td id="one">id=one</td>
	<td>***</td>
</tr>
<tr>
	<td id="two">id=two;</td>
	<td>***</td>
</tr>
<tr>
	<td id="three">id=three</td>
	<td>***</td>
</tr>
</table>
<input type='button' value='Go' onclick='Go()'>
</body>
</html>

Андрей38 · #8 (**permalink**) 08.02.2011, 11:17

Огромнейшее СПАСИБО Вам, KSA!

Вижу_здесь сильнейшиа алгоритм. Такое мне не понять

Сохранил эту станицу и иду пробывать А можно такое же в ДжКвери

Мне оно очень помогает на начальном этапе. В Квери я могу уже что нибудь редактировать, поиграть с анимацией аппендов .
За это время я вот какой скрипт откопал_ Предназначалось для анимации отдельных картинок_ по аналогии ховера .
Почитал , и понял,что это - эта же тема .
Готовый скрипт я отредактировал под себя_(беру не по ID а по title , так как учел замечания об уникальности Ай-Ди)и стер 2 строчки анимации

<SCRIPT>
  $(document).ready(function(){
  var imgid; 
$("img").click(function(){ 
imgid = (this).title
$("td").each(function(){ 
if(this.title==imgid) $(this).append(imgid);
}); 
});});

</SCRIPT>

<IMG title=C 
src="attr_TITLE : C photo.jpg" 
width=120 height=60> 
<IMG title=B 
src="attr_TITLE : B photo.png" 
width=95 height=88> 

                 <TABLE id="H"> 
                  <TR>
<TD title=C></TD>
                      </TR>


                   </TABLE>

                   <TABLE id="g">
                      <TR>

 <TD title=B></TD>

                     </TR>
                    </TABLE>

Источник http://www.webnotes.com.ua/index.php/archives/800

Но никак не могу справиться с тем , что нужно ,чтоб ЭТО самое TITLE (атрибут) цепляло свое родное ИЗОБРАЖЕНИЕ в append(imgid)...Здесь аппенд цепляет и заносит лишь голый ТЕКСТ этого поточного var imgid . Пожайлуста, подскажите , каких строк не достает в этом скрипте для его ПОЛНОЙ работоспособности ?

SkyLight · #9 (**permalink**) 08.02.2011, 11:19

Или же даже так:

<div id="images">
	<img id="one" src="img1.jpg" width="100" height="100" />
	<img id="two"src="img2.jpg"/>
	<img id="three" src="img3b.jpg" />
</div>

<table width="200" border="1">
	<tr>
		<td id="c_one">id=one</td>
		<td>***</td>
	</tr>
	<tr>
		<td id="c_two">id=two;</td>
		<td>***</td>
	</tr>
	<tr>
		<td id="c_three">id=three</td>
		<td>***</td>
	</tr>
</table>

<script type="text/javascript">
$(function() {
	$('#images img').click(function() {
		$('#c_' + this.id).html('').append(this);
	});
});
</script>

ksa · #10 (**permalink**) 08.02.2011, 11:24

Сообщение от Андрей38

А можно такое же в ДжКвери

Я с ним не работаю...

Форум

Справочник

Discord чат

Курсы javascript