Develop Reference

How to load multiple CKEditor toolbars on the same web page

I have two divs on the same page using CKEditor. I can get a toolbar to load for the first div, but not the second. I realize this is the case because I'm using an id for ckToolbar instead of a class. However, if I use a class, the toolbar doesn't show up.
Div 1
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtBody, value:txtBody, valueUpdate:'keydown'"></div>
</div>
Div 2
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtHelpText, value:txtHelpText, valueUpdate:'keydown'"></div>
</div>
Config.js
config.extraPlugins = 'sharedspace';
config.sharedSpaces = { top: 'ckToolbar' };
I am also using Knockout JS. I created a custom binding and a div instead of a textarea because I couldn't use the CKEDITOR replace function with my binding.

You can't have two elements on the same page with same id's. How is JavaScript supposed to recognize which one you have in mind? You should either use classes or different id's and adjust you knockout code to handle that.
Sorry for the general answer but there is simply no way around it. You can't have two elements with same id on a single page.
NOTE: CKEditor auto replaces elements with ckeditor class however if you are using knockout, I don't think this will me much of a use for you.

How can I select a block of text on a page, then move an element in front of it?

I have a div that will appear on the page at a separate point. It doesn't always appear on the page and can be added via a CMS if needed. There's a line of text that will appear within the body. If the user has decided to have this div added, it would need to be moved into position via jquery. So, I have this text:
<p><strong>Key Facts:</strong></p>
I want to find it using jquery, then move the other div in front of it. I tried a couple of different ways to select this text then move the div in front of it and haven't had any luck. The best way I found to find the text was to do this:
var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');
From that point, to move the div into position, I thought I could something like this:
$('#DivIWantToMove').insertBefore($foundin);
That didn't work, though. I also looked at this:
$( $foundin ).before( $('#DivIWantToMove') );
AS you might imagine, since you're reading this, that didn't work either. So, I'm asking you, is it possible to do what I want? I'm fairly constrained by the CMS that we are using. The DIV I need to move will always be someplace on the page and I have to move it. The client doesn't want to have to add a class to <p><strong>Key Facts:</strong></p> so I'm let with this. If I could have a class on <p> then it would be super easy. I've already done it. The client doesn't like having an extra step. Any ideas?

I think contains selector only looks for text, not html tags. so you have to modify your contains selector. if your html is like this -
<div>
<p><strong>Key Facts:</strong>
</p>
</div>
<div id="move">something something</div>
and you want to move your <div id='move'> in front of p, then try this -
var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);
Demo
Update also look into this QA: jQuery :contains with html. Instead of using contains you can use one of the methods from there.

Change div blocks onclick

Have a nice day, dear Programmers!
On G + is a block Posts; About; Photos; Videos
https://plus.google.com/109813896768294978296/posts
when you click for example on the About, there is a change at the bottom of div that contains a specific content. As I understand it, realize it is not difficult, but I'm afraid to write ten lines of code is very dirty because, in addition to jquery, because I am only a beginner. Can someone push on the right track, or to show where it has already been implemented in the demo with source code? Thanks!
<div id="109813896768294978296-posts-page" class="c-ha-If" role="tabpanel" aria-hidden="false">…</div>
<div id="109813896768294978296-about-page" class="c-ha-If c-ha-jb" role="tabpanel" aria-hidden="true">…</div>

There are two things occurring when you click on About from Posts. It appears to be adding and removing CSS classes dynamically. Which you can do with http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/.
As for loading data into a div from a URL, use http://api.jquery.com/jQuery.get/.
Once you've got the data, you can use http://api.jquery.com/html/.
If you've already loaded everything and want to achieve tab switching: http://jqueryui.com/demos/tabs/

Dynamically insert expander in jQuery Mobile

I am quite new to jQuery and are currently despairing of trying to insert a dynamically created expander into a jQuery-Mobile page which looks like the following:
<div data-role="page" id="myPage">
<div data-role="content">
<div id="myContainer"></div>
</div>
</div>
As the expander should be inserted into "myContainer", I am writing:
var expander = $("<div data-role='collapsible' data-collapsed='true'><h3 class='category' /><div class='content' /></div>");
$("#myContainer").append(expander);
expander.find(".category").text(/*Some text*/);
expander.find(".content").text(/*Some text*/);
However, only a unthemed and not collapsible div appears in my document.
I guess, I will have to manually toggle the creation of the expander similar to refreshing a listview - I did not find anything about that in the documentation, however.
Unfortunately, neither
expander.Refresh();
//nor
expander.Expander();
seems to exist.
Many thanks in advance for your responses!

This question is in fact a duplicate happening so often that I created a FAQ about it.
You need to use .page() on the topmost element that you add to DOM.
See here for details:
http://jquerymobiledictionary.dyndns.org/faq.html
[edit]
I have also reached the moment when I wanted to use .page inside a page* event and the solution was rather obvious to me - use a semaphore.
If you don't know how to implement a semaphore, see my dual column plugin code as an example (it's on the same site)

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage