We Keep Coding

issues with Raphaël and removing objects within svg

if you open the code pen there is a fire button. it will launch a bunch of ellipses and then when it hits it will cause a burst. if you look the ellipses ,which there are two sets of, they are still there. I have tried using the below
d3.selectAll("ellipse").remove()
$("ellipse").remove()
$("ellipse").each(function(){this.remove()})
http://codepen.io/daniel667/pen/QwMWrm
the code pen above will help show what im talking about the second fire button to the far right is what ive been trying to use to kill the ellipses so I don't wait for the animation the functions at the very bottom.

I would create a Raphael set, or an array and store the elemets in that, so you can reference them later to remove. If they will be used repeatedly, it may be worth not removing them, but just hiding them rather than recreating each time.
var mySet;
...
mySet = paper.set();
mySet.push( circi );
....
function throwss() {
mySet.forEach( function( el ) { el.remove(); });
}
Example: codepen
For speed, you may also want to look into Velocity.js, also be aware for animation filters can be quite resource heavy.

How to load a selection?

I am trying to load my selection like the picture below, where the marching ants go around the edges of my object:
However, i only know how to select the whole layer using this code:
doc.selection.selectAll();
Also, i want to contract the selection by a few pixels and paste it into a channel layer. Any help with that would be great but the most important thing is how to load the selection in the first place.

If you look up in the Javascript Scripting Reference document in your Photoshop install directory you'll see that there are a number of methods available on the selection object to do what you need.
var doc = app.activeDocument;
var channelRef = doc.channels.getByName("TestSelection");
doc.selection.load(channelRef, SelectionType.REPLACE);
doc.selection.contract(new UnitValue(20, 'px'));

dat.GUI user input not working

I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.
What I want to do:
I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which allows the user to input a search term and hit a button to then call a function which uses the search term.
So far, I have created a variable called search term and the added this to the GUI. This works fine and the value of the variable is displayed. The GUI is also able to listen to the variable and updates once it changes. But I am unable to modify the value. I also added a field to adjust the intensity of the a light I added to the szene in three.js. For this part of the GUI adjusting the value by dragging the bar works but trying to input a value does not.
Code looks something like this:
var searchterm = '';
...
function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();
}
Any help on why I can't edit the values or suggestions for other easy to use GUIs would be appreciated.

Not sure if this will help, but this was the problem I was having. If you have any kind of camera controls associated with your three.js canvas, this could be interfering with the GUI. You would be able to adjust sliders, for example, but not edit text. When you attach controls to the three.js camera with, for example, new THREE.OrbitControls(camera);, make sure to specify the three.js dom element as the second parameter like this:
new THREE.OrbitControls(camera, document.getElementById('threeCanvas'));

I have the some problem.
It's coming from the " .listen()" function.
It's buggy.
remove .listen() and it'll work.

The z order might be becoming wrong? I can't find anything easier to use than dat gui.
.main {
z-index: 5;
}
Would make sure this element is at the front. Other than that I'm sure what the problem might be.

I've had the same problem. In my case it was caused by the following CSS:
span {
margin: 0 10px;
}
Applying the style to a newly created class instead of span solved it.

In my case it was a z-index issue. I fixed this with the following:
.dg.ac {
z-index: 1000 !important;
}

Ruby on Rails - Gmap4Rails popup for a bigger map

I'm a rails beginner and am using rails 3.2.3.
In my app I'm using the awesome Google-Maps-for-Rails by apneadiving (it's just awesome)
Everything works wonderfully but I have got an issue and didn't find any answers here and there for what I want to do.
Basically I'm displaying a small map and wanted to have a button bellow it and when users clicked it, a bigger map would be displayed of that location.
(basically it would be the same map, only with a bigger size)
Something like this:
<input type="button" onclick="myFunction()" value="Show a bigger map" />
Bu my question is what to put inside that javascript function and how do I say a bigger map with #gmaps values should be displayed?
Create a new id with bigger With and Height in the gmaps css?
How to provide the JS the data from my #gmaps?
Any tips?
Sorry if this is a naive question, I'm still getting used to RoR and the Gmaps4Rails gem.
Thanks in advance for your time.
Regards

I'm not quite sure of what you want to do, but I'd say it's really easy to copy the parameters of one map to another.
Indeed, the whole code needed to create a map is visible in your html, simply reproduce the steps.
The gmaps_helper will do the job for your little map. Basically, it follows the following steps:
Gmaps.map = new Gmaps4RailsGoogle();
//mandatory
Gmaps.map.initialize();
// then some code depending on your options
Gmaps.map.markers = some_array;
Gmaps.map.create_markers();
Whenever you want to duplicate the map, you should simply follow the same steps:
Gmaps.bigmap = new Gmaps4RailsGoogle();
//mandatory to have the map created in the proper place
Gmaps.bigmap.map_options.id = the_id_of_your_html_div;
//still mandatory
Gmaps.bigmap.initialize();
//copy the specific parameters from the other map
Gmaps.bigmap.markers = Gmaps.map.markers;
Gmaps.bigmap.create_markers();

images created dynamically do not appear on screen! -> Javascript

I'm trying to do something simple to practice my Javascript (which I learned some recently) and I'm trying to do a game on it (pacman to be precise).
I am trying to build that game board on the browser by creating images dynamically. I've done an array like this:
var images= new Array(25);
for(i=0;i<25;i++)
images[i]= new Array(25);
And, for the game board I used a matrix done with 0 and 1's with 25x25 size (not going to post it here cause is too big and would make my text hard to read) called board.
For the images that I am using right now I have something like this:
var image_empty = new Image();
image_empty.src="Images/empty.jpg";
var image_wall = new Image();
image_wall.src="Images/wall.jpg";
For the initialization function I have something like this:
function drawField()
{
for(i=0;i<board.length;i++)
{
for(j=0;j<board[i].length;j++)
{
if(board[i][j] == 0)
draw(i,j,image_empty);
else if(board[i][j] == 1)
draw(i,j,image_wall);
}
}
}
And for drawing the images themselves I am using this:
function draw(x,y,img)
{
images[x][y] = new Image(22,22);
images[x][y].src = img.src;
images[x][y].style.position = 'absolute';
images[x][y].style.left = 40+x*22;
images[x][y].style.top = 40+y*22;
}
Every time I run this code nothing appears on the screen. I've tried several times use a load of things but nothing happens. I am saving the pictures (at least I think I am) and still nothing.
Can someone give me some pointers of what could be wrong?
PS: Some people pointed me out using the appendChild method would solve the problem, still, since pacman will be moving around I can't use it to store my images (and I was planning to use the draw function to draw anything).
And btw nor Web Developer plugin or firebug point out errors (the code is correct from their perspective).

Creating an Image in the method you describe doesn't actually display the image. Even putting attributes and styling to make it appear a certain way doesn't add it to the DOM. The advice about append child is correct. For example, if you had:
<div id="main"></div>
and you called
document.getElementById("main").appendChild(images[x][y]);
this would insert the image inside the div. You could do this repeatedly to generate the equivalent of...
<div id="main">
<img src... />
<img src... />
...and so on
</div>
Then, your CSS styling and positioning would work.
There's nothing wrong with your script, but Firebug does display a rendered version of the DOM. As you run the script, you will actually see the HTML tab of Firebug changing with the images you've added to the page.
Also, keep in mind that the DOM must complete loading before you are able to run this. You can accomplish this by doing a simple:
<body onload="drawImages()">
UPDATE: Once you've actually added the 25x25 images, the array still references the elements - they're just now part of the DOM. So, you can change their source via:
images[x][y].src = "newImage.jpg";
If you, for some reason, wanted to remove an image from the board, leaving a gap, you can remove it from the DOM
document.getElementById("main").removeChild(images[x][y]);
or just hide it via CSS.