Develop Reference

CKEditor multiple editables with same selector?

I am trying to create a general widget (component) which maybe a one item component, a list component (like tabs) or anything else.
Exp:
<div class="widget-component">
<div class="item">
<div class="widget-component-title">Title 1</div>
<div class="widget-component-description">Description 1</div>
</div>
<div class="item">
<div class="widget-component-title">Title 2</div>
<div class="widget-component-description">Description 2</div>
</div>
</div>
Components are defined outside the widget script and they only need to respect the defined selectors (widget selector, editables selectors).
On a list widget case a title or description editable occurs more than once.
I have been digging a lot for a solution this is what i came across.
http://ckeditor.com/comment/135051#comment-135051
this solution works but it breaks the generality principle and also i have to keep track of index classes on repeated items.
I even tried to extend the "initEditable" function inside widget/plugin.js but because i did not want to modify the file (preventing my self from future updates) and i could'nt extend it by external script ("initEditable" not accessable) i let it go.
The best suggested solution i came across is this here but it does'nt seem to have been implemented yet.
Any bright idea is appreciated
Thanks

DOM Element Re-Positioning

Objective:
Want to move an element from one place to another in DOM.
Condition:
I can easily do this using jQuery but i am working in an environment where jQuery is not available and adding it is not an option for such a small task ~ so i need a vanila js solution.
Example:
Make this:
<div class="elem-1">Element 1</div>
<div class="elem-2">Element 2</div>
Into this (on page load):
<div class="elem-1">
Element 1
<div class="elem-2">Element 2</div>
</div>

Just append it where you want it.
document.querySelector('.elem-1').appendChild(
document.querySelector('.elem-2')
);

How to send a form to a javascript function

I need your help to understand how I can send information from a form to a javascript function.
I've created a basic function here : http://jsfiddle.net/nZhR8/5/
The purpose of this function is to hide/display a div.
In fact, I'll have a table with a few contacts (between 0 and 20). There will be a selectlist per contact. For each contact, I'll have to display 1 special div in function of 1 own particularity. So, for contact1, I may have to display div3, and for contact2, display div1.
I'll also use the javascript function to send to the database wich div has to be displayed. It will be a kind of advancement.
If I'm doing it wrong, please tell me why.

I don't see the idea behind this but that could do the trick: http://jsfiddle.net/YCPM7/
That must be a simple draft of a much bigger project.
Also, I would suggest that you either use a common class for each DIVs
<div class="message 1">1</div>
<div class="message 2">1</div>
<div class="message 3">1</div>
...
So you can simply do:
$(".message").hide();
Enjoy.

Firstly, remove the $(...) from where you define the function showDiv, as you don't want to execute showDiv when the page has loaded.
Apart from that, your problem seems to be jsFiddle. It didn't work there, but when I copy+pasted exactly what you posted on jsFiddle into a file, fixed what I mentioned above and tried it in FF, it worked.
There are of course things you can do better about your code, but it works. Suggestions: Give all divs the same class and distinguish them by id, then hide everything with that class and show the one with the correct ID. For the onload, instead of copying the whole code just execute showDiv(1).

You need something like this jsFiddle?
<div id="1" class="1">1</div>
<div id="2" class="2">2</div>
<div id="3" class="3">3</div>
<div id="4" class="4">4</div>
<div id="5" class="5">5</div>
$('div').hide();
$('#StateSelection').change(function() {
var $this = $(this);
$('div').filter('.'+$this.val()).show();
});

bootstrap popover content setting

bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})

Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.

I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})

Is there a simple Javascript command that targets another object?

I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.

You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>

This would work:
document.getElementById('one').className = 'a';

you could get the element by id with:
document.getElementById("one")