We Keep Coding

Javascript movecontent from one div to another

I have the code that actually works:
<script type="text/javascript">//<![CDATA[
function MoveContent() {
var srcObj = document.getElementById("src");
var destObj = document.getElementById("dest");
destObj.value = srcObj.innerHTML;
}
//]]>
</script>
But I need to move content from 2 divs which isn't possible using this code.
I don't know JavaScript, so what should I add tho this code?
Sorry for bad English, thanks in advance

I suggest you use jQuery library. Have you heard of it?
http://jquery.com/
Simple code to accomplish your goal:
var srcHtml = $('#src').html();
$('#dest').html(srcHtml);

Use:
destObj.innerHTML = srcObj.innerHTML;
value is the value of an input element, innerHTML is the content of a DIV or other element.

Assuming Both are div's rewrite the following line
destObj.value = srcObj.innerHTML;
as
destObj.innerHTML= srcObj.innerHTML;
Since div is not having an attribute value you cannot copy the content to the destination div using value.

Like you get value from one div using
var srcObj = document.getElementById("src");
get another variable like srcObj2 and store the next div. Concatenate values of two variables and set it to the destObj

Add multiple elements to a single var and detect if any of those are clicked?

I have a page that can have one of three possible elements. I would like to assign whatever element exists to a var and then check if the var is clicked.
I tried using the add(), but it has confused me:
var testingVar = $('#element-one').find('.object').add('#element-two').find('.object').add('#element-three').find('.object');
$(testingVar ).click(function() {
alert('works');
});
It seems to me that the add() overwrites the previous add()? if I am on a page that has #element-three, it works, if on a page with element-one or element-two, it doesn't. If I change the var to
var testingVar = $('#element-one').find('.object');
Then a page with element-one works.
Can someone help me understand how to use the add() properly in this case?
Thanks

I think what you're looking for is this:
$('#element-one .object').add('#element-two .object').add('#element-three .object');
.find() returns a new jquery object.
However, I think this would be easier in this case:
$('#element-one .object, #element-two .object, #element-three .object');
Or even easier, if you can change markup, is to give each element you're currently selecting by id a common class, and do this:
$('.common-class .object')

jQuery load issue. Don't know how to approach this AJAX call

$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?

Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});

this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));

post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});

How do I make an image overwrite text within another div upon hover of first div?

How do I make an image overwrite text within another div upon hover of first div? ? Any help greatly appreciated.

window.onload = function () { // ensure that we don't try to get div1 before it's loaded
document.getElementById("div1").onmouseover = function () {
document.getElementById("div2").innerHTML = "<p>new HTML</p>";
};
};
Depending on your case, you may wish to use the innerText property to ensure that you don't accidentally make HTML, or you can use the DOM to make new elements.

Remove tag around a text node using javascript

If I have some HTML that looks like this:
<div id="text">
This is some text that is being written <span class="highlight">with
a highlighted section</span> and some text following it.
</div>
And I want to remove the "span" leaving the text node within, how would I go about doing that? I tried using jQuery to do the following:
wrap = $('.highlight');
wrap.children().insertBefore(wrap);
wrap.remove();
But that doesn't work I'm guessing because children returns an empty set since there's only a text node in there. So all that happens is that the span and its contents are removed.
I'm also open to alternatives to my approach here. What's happening is that my code actually creates that span when a user selects a block of text. It wraps the selected text in a span to visually differentiate it. I need to remove the span afterward though because of some quirks with the way mozilla's range object works.
EDIT: I don't want to replace the entire content of '#text' by the way since it could be very large.

You get the text, and replace the span with it:
var wrap = $('.highlight');
var text = wrap.text();
wrap.replaceWith(text);

wrap it in a plugin
(function($) {
$.fn.tagRemover = function() {
return this.each(function() {
var $this = $(this);
var text = $this.text();
$this.replaceWith(text);
});
}
})(jQuery);
and then use like so
$('div span').tagRemover();
Working Demo here - add /edit to the URL to play with the code

This works:
wrap = $('.highlight');
wrap.before(wrap.text());
wrap.remove();

This will do what you want, and also preserve any tags within the .highlight span.
content = $(".highlight").contents();
$(".highlight").replaceWith(content);

element = document.getElementById("span id");
element.parentNode.insertBefore(element.firstChild, element);
element.parentNode.removeChild(element);

text.replace(/</?[^>]+(>|$)/g, "");

it would be much easier to just change the class of the span than to actually remove it. You can use pure javascript:
document.getElementById("span id").className="";
Or jquery's toggleClass function:
$("element").toggleClass("highlight");
Also, best practices say that you shouldn't use class names that imply a style, like highlight. Try "emphasized" instead. :D

A better unwrap plugin:
$.fn.unwrap = function() {
this.parent(':not(body)')
.each(function(){
$(this).replaceWith( this.childNodes );
});
return this;
};
from Ben Alman