We Keep Coding

JS toggleClass right way

I've this project where when I click on the plant the scale changes and show some texts.
http://www.gaianet.com.br/Nissin-teste/
I've this project where I should click on a planet and scale's it and show another div by opacity.
Right now i've been trying to do by js using toggle class but I need some help to make it work right.
If I click on first planet it works fine, but when this planet is 'selected'and I click on another all the classes start to toogle and the scale and opacity goes crazy.I don't know how to make a 'reset' to the original css if I click on another planet when one has already changed the class.
$(".layer.planeta1").click(function(){
$(".institucional").toggleClass("escala-planeta repo1-1");
$(".planet-info1").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta repo1-2");
$(".pdv").toggleClass("escala-menor-planeta repo1-3");
});
$(".layer.planeta2").click(function(){
$(".educacao").toggleClass("escala-planeta repo-2-1");
$(".planet-info2").toggleClass("opacidade-planeta ");
$(".institucional").toggleClass("escala-menor-planeta repo-2-2");
$(".pdv").toggleClass("escala-menor-planeta repo-2-3");
});
$(".layer.planeta3").click(function(){
$(".pdv").toggleClass("escala-planeta");
$(".planet-info3").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta");
$(".institucional").toggleClass("escala-menor-planeta");
});
I'm sure there should a way better way to do that but I have no idea how.
Thanks a lot

I think I am clear on the acceptance criteria, but just to be sure, here is what I am going with:
When I click on a planet, I want it to scale.
If I click on a planet that is already scaled, I want it to reset to original scale.
When I click on a planet, I want to 'reset' any other planets to their original scale, and scale the planet I clicked on if it is not already scaled.
Given that, you might try being more explicit about what needs to happen when you click on a 'planet':
$('.planet').on('click', function(event){
$('.planet').removeClass('scale'); // Explicitly remove the scale class from other planets
$(this).toggleClass('scale'); // Scale the one I am clicking on, or if it's already scaled, revert it
});
A simplified example demonstrating this: http://codepen.io/anon/pen/xbMJRd

If it is creating so much of hassle using then I would use jQuery addClass and removeClass instead of toggleClass.
Another suggestion, I would save jQuery dom elements in a variable so that I dont search on entire dom again and again.

If i create a map with jvectormap hide() it, change my window width, then show() it, it will scale itself to be tiny

I created two maps, one is shown and one is hidden. I have an option to choose the other map, which will hide the current one and show the other.
Here is the page load:
http://imgur.com/4MJnrZH
Here is how it looks if I change my window size even a pixel:
http://imgur.com/jzrli79
If I don't change the window size, switching between the two is fine.
When changing window size, the one currently in view will scale with the window (I put its width/height as a percentage of its parent) and will will as expected.
Thanks in advance.
Edit: If I resize the window when it's tiny, it will scale itself back to fit.

I'm not sure how jvectormap works with % sizing but I decided to go about another way to do this.
Instead of the hiding/showing from jquery, I changed the z-index to move the map of interest to the top (higher z-index), essentially emulating the jquery hide/show behaviour. Doing this, I had to change their positioning to absolute and put them into a container so that they can be layered on top of each other.
Hope this helps someone.

I change some code in "wordl-map.js" and my same problem has been resolved. in line 91:
when this.container has been created, you must set you width instead of '100%' value. I write this.params.container.width() and this.params.container.height() instead of '100%' value. Because I want to set container`s width to the map.

How to show a percentage of an image using the jquery Show() method

i'm trying to create the same nice effect of and overlayed arrow (ie desktop version of chrome) when you swipe left or right in for a mobile browser.
I use javascript and jQuery and for now i can show the arrow when I swipe. I managed to have the distance of the swipe but i can't find a way to link the two so i only show a portion of the arrow in relation with the distance !
$('#arrow').show('slide',{direction: 'right'},1000);
$('#arrow').fadeIn();
$('#arrow').fadeOut();
I'm trying to do it also with animate() but i'm still stuck :S
Thanks for the help

You'll need three values: start, end, current.
In your case, you'll need to determine what is the start end value.
I would say use the width of your swipe-able area (screen), which would give you 0 and x (where x is the width of your swipe-able area). You already have current, which is the distance between start and and where your actual swipe ends (width of swipe, perhaps?).
Once you have those values, you can derive a percentage (between 0 and 1) and apply it to your arrow using #mikakun's suggestion. The arrow graphic will either need to be absolutely positioned in the container or set as a background image of the container. That will give you the effect of only seeing a percentage of the arrow as the container expands to reveal more. A nice effect would be to have a semi-transparent/greyed out duplicate of the full arrow in behind the one you are revealing.

JavaScript (w/jQuery) - grow an element to fill container on hover, when surrounded by other elements

I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!

The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.

Animate between positions with just CSS?

I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?

It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);

You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/