Develop Reference

How to work with the Raphael Canvas outside of the Raphael function

Basically I have a list of projects, and within each project is a number of text elements. Each text element is text wrapped based on the parameters of the canvas it's working on, and since I can have many many canvas elements, it slows things down with the wrapping.
I wanted to create the Raphael Canvas and text elements for all of my projects before the first one is open, and then easily switch between each set of text by hiding or showing, as I go through each project.
I found something here https://groups.google.com/forum/#!topic/raphaeljs/XVdHUbsgPXE
It wasn't very straightforward, and I couldn't get it working, so I'm curious if anyone has any other ideas?
Basically it goes
Get list of projects
do a few setup things based on that list.
Create first project as default.
Change projects.
I would like to create the Raphael canvas and the text within #2, and then reuse my Raphael canvas within #3 and 4.
Thanks all
EDIT:
So basically my code looks like this.
I have a Variable that is global outside my methods, lets say var a;
This is how my methods are setup
var a;
function alpha()
{
Raphael(function()
{
a = Raphael(0,0,100,100);
a.text(2,5, "test");
document.body.appendChild(a.canvas);
}
}
function beta()
{
Raphael(function()
{
var rect = a.rect(0,0,100,100)
....
....
.......
}
}
When I try to call a from my second method it just says
Uncaught TypeError: Cannot read property 'rect' of undefined
This happened in another method as well. I have different shapes that I hide and show, and was trying to call one by it's method and use Raphael's hide/show, but it wouldn't work. I was able to get Jquery's to work for me though.
For some reason elements get messed up at some point. Should I encapsulate my entire js in a Raphael I wonder... LEt me try :)

Animate several on change events in arc/pie D3.js graph using jQuery

I am in the same boat many have been in with D3 trying to get to the next level. I have a graph that is close to what I want but I can't figure out how to animate the change. There are many events and have the different parts placed into different functions. I call them with the following if else if:
if ($("#chart1Pie").is(":checked")) {
updateOne();
} else if ($("#chart2Pie").is(":checked")) {
updateTwo();
};
Do I have it wrong by having the different parts in different functions? The full code is on jsfiddle.
http://jsfiddle.net/rocky1616/ghfqmygh/

You are using D3 absolutely incorrectly. You have ONE graph, but two sets of data - for Smith and for Jones. You don't need to remove stuff inside #chart using jQuery and then rebuild the whole graph from the scratch. In general, if you want to remove and add elements you should use D3 methods .enter() and .exit().
In your case you don't need to remove anything. All you need to do on update is recalculate attribute "d" for of your paths.
Check these examples: one, two.

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.

Listen to specific changes on contenteditable?

Warning: not duplicate with existing questions, read through
I know I can have an event listen on changes on an contenteditable element.
What I would like is to be able to know what the changes are.
For example:
inserted "This is a sentence." at position X.
deleted from position X to Y.
formatted from X to Y with <strong>
Is that possible? (other than by doing a diff I mean)
The reason for this is to make a WYSIWYG editor of other languages than HTML, for example Markdown.
So I'd like to apply the changes to the Markdown source (instead of having to go from HTML to Markdown).

You may be able to do something with MutationObservers (falling back to DOM Mutation events in older browsers, although IE <= 8 supports neither) but I suspect it will still be hard work to achieve what you want.
Here's a simple example using MutationObservers:
http://jsfiddle.net/timdown/4n2Gz/

Sorry, but there is no way to find out what the changes are without doing a diff between the original content and the modified one when changes occur.

Are you looking for this
var strong=document.createElement("strong");
var range=window.getSelection().toString().getRangeAt(0);
range.surroundContents(strong);
this was for third part
You just need to select what you want to surround using real User interaction.
If you wanna do it dynamically
var range=document.createRange();
range.setStart(parentNode[textNode],index to start[X])
range.setEnd(parentNode[textNode],index to end[Y])
range.surroundContents(strong);
For 2nd Part
range.deleteContents()
1st part can be done by using simple iteration
var textnode=// node of the Element you are working with
textnode.splitText(offset)
offset- position about which text node splitting takes place[here==X]
Two child Nodes have been created of the parent editable Element
Now use simple insertBefore() on parent editable Element Node.
hope you will find it useful

The API you're looking for does not exist, as DOM nodes do not store their previous states.
The data / events you're wishing to get back are not native implementations in any browser Ive come across, and I struggle to think of a datatype that would be able to generically handle all those cases. perhaps something like this:
function getChanges() {
/* do stuff here to analyse changes */
var change = {
changeType : 'contentAdded',
changeStart : 50, /* beginning character */
changeContent : 'This is a sentence'
}
return change;
}
Since you're trying to get custom events / data, you're probably going to need a custom module or micro-library. Either way, to look at the changes of something, you need somehow be aware of what has changed, which can only be done by comparing what it was to what it is now.

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