I'm a beginner at React and want to know how to implement this functionality:
At the beginning there is one main container with "Add" label. When I hover this label, two buttons appear: box and container. - that is what I have done. And what I should implement:
1. Each button should add corresponding item (box or container with label) to the parent container.
2. "Container" button should add container (with Add label) inside the parent container, so we can add a box or container inside of any other container which are located in the main container.
3. "Box" button should add box to the container where click was fired.
Question: So how do I create such buttons to manipulate components (and what components should I use) and how I should organize components in App.js?
I would be so happy if someone could help!
Related
![text is going outside of the submenu][dedicated resources text is gray color by default]
** I am using react-multilevel-dropdown to created drodown and i want to add custom css to it.text is going outside the submenu at some places. how to fix this??
**
How do I change content of image elements similarly to changing content in p (HTML paragraph) elements? (refer to: http://www.w3schools.com/jquery/html_html.asp)
I would like to have a scatter+sort effect button next to a default carousel view of images that when clicked, will, as you might have already guessed, scatter and sort itself in a stationery template.
Also, having the button change when clicked to flip between "Scatter+Sort" and "Carousel" views.
Here is what I have so far:
Carousel view - https://gyazo.com/18e67f7347de3310d155c0b8624b3716
Stationary view - https://imgur.com/a/coreG
What I intend on doing is following a similar approach to Jennifer Dewalt's a project a day for 180 days, except I am doing 100 projects in an indefinite time period.
Update: I got a button to bring up an image, but the container of images (carousel) is still on the page and does not vanish upon button click. Also, the image is shown as not available on the top left of screen before button click.
Update 2: Something I am looking into: https://www.w3schools.com/css/css3_animations.asp . Animation iteration count of 1. I'm thinking maybe, if it's possible, to rewrite the container class (carousel) in css then pulling the code in an html file, so that way I can manipulate the elements within the container.
document.getElementById("myImg").setAttribute("src", "my-new-image-source.jpg");
http://www.w3schools.com/jsref/met_element_setattribute.asp
I would need to implement some sort of news slider. this is how it should work:
a container div
3 absolute positioned divs with different z-index to have them stacked one on top of the other (the visibility should be one at a time)
a button which will add a class to the NEXT div in line (i will manage the visibility with css3)
here's my fiddle: http://jsfiddle.net/omegaiori/xqLXt/ and my actual js
var parentheight = $("#wrapper").parent().height();
$(".wrap").height(parentheight);
$('button.mybutton').click(function() {
$(this).next('div').addClass('next');
})
the actual js give the class .next to the first div .. what i want it do is to give the class "next" to the second div on the click of the button removing it from the first div. on the next click the class shall be removed from the second div and switched to the third.
if there's no more divs, it should go back adding it to the first one.
is it possible?
thank you so much guys! :)
We've got a request from a customer to support the following scenario:
on a page we have a container: div element which is at the same time dojo.dnd.Source.
inside the container we've got 9 div elements with similar content: 2 buttons and 2 comboboxes
a user should be able to define the sequence of those 9 div elements by simply dragging them around inside the container.
The task is to present a possible layout preview while dragging.
Will appreciate any ideas.
Focusing on your comment and first attempt at this solution, I humbly suggest the following:
If things are being animated and sensitive to mouse pointer changes you should separate the two:
Leave the element with the drag/drop event subscription (the parent) alone. Do not change its appearance ever.
Create an element (the child) inside this element that gets animated, but does not affect its parent.
The parent can be transparent.
Can this be of help?
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/