Develop Reference

How to put images on top of each other in react.js dynamically?

Now, I want to achieve this dynamically, when I click on the tomato card, the number below it increases,so that the basket images are put on each other as in image 2.
I know how z-index works, but I don't know how should I use it to position these images as in image 2.
The image 3 shows what I am able to achieve using "display:flex; flex-direction:column-reverse;", so the first element is at the bottom, the 2nd element goes above the bottom and so on.
Thanks in advance.

One approach would be to use negative values to the margins between those images.

Javascript expandme image click

I am using https://github.com/nigma/jquery-expandme plugin in for my page, here is the example
Everytime when you click the bottom grey area, the background image expands to full, and click the grey area again, it collapses to the top part of the image.
This is what I'd like to achieve:
I'd like to keep the up and down arrow function as it is, and to make the click happen on the image itself as well so it is easy for people to use.
1) The down arrow should still show on the bottom when it is the top part of image, so you can either click on the image itself or the down arrow to expand.
2) After it expands to full image, the up arrow should show down the bottom. So you can either click on the image or the up arrow to collapse it to the top image.
I have been trying for a while, but no success. Can some please point me to the right direction?
Thank you,
S:)

EDIT : i think i got it wrong the first time ..
Edit : please follow the link below .
https://github.com/codeiz/jquery-expandme
i have updated the plugin and now it allows more than one controller
but now you have to pass an array as an argument please look at the documentation

I think you can change this expandToggleClass to "exmandme" :
// Class added to expanded element
expandToggleClass: 'expand-toggle', // Class for anchor element that triggers

javascript jquery animate div move slide left then back again

I have a scrolling div with a visible width that's half of the content. (The actual content is double the width.)
I just want a simple javascript utilizing jquery (serialscroll plugin is really too much) to trigger the scroll to slide into view the next half of the content, then click again the slide it back. (the amount of the sliding is a static #)
I've got a jsfiddle with what I have so far. The initial slide left works, but the slide back does not and then it stops working altogether after that.
http://jsfiddle.net/w7Uvj/1/

Use left alone (or right alone) instead of left and right fiddle

Change your second function to:
$('.back').click(function() {
$('#maincol').animate({
'right':'-=400px'},750);
$(this).fadeOut(500);
$('.next').delay(600).fadeIn(500);
});​
jsFiddle example.
You can also set the right property to just 0px as well (instead of -=400px).

jquery show hide

look I have this question, how can i do something like this (look at images)
I think it's possible to do with jQuery or ajax, but i don't know how..
i have page something like this :
when i click on 1st green cube slides up one #div container at the bottom of page :
when i click on red 1st cude #div container at the bottom of page slides down :
but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.
I hope so you will help me with this..
And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.

I don't know if this is exactly what you need, but I did a quick solution in this fiddle:
http://jsfiddle.net/8Z66Y/3/
If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.
If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else

You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.
like:
$("first").click(function(){
$("second").hide();
$("first").toggle();
});
$("second").click(function(){
$("first").hide();
$("second").toggle();
});

animating div elements left to right and back

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left

Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/

If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.

You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/