I want to create something like this .
With Cards appear like stacked on each other and also three dots to toggle them.Can anyone tell how can i implement this?
Your question is not specific enough and it gives the impression that you want other people to do your job for you, so that's probably why you're receiving downvotes. But if you are asking like how one might approach such a task, one possible way I can think of is something like this:
Make each card a component with an id,
In your container component's state, keep (1) the list of all ids and (2) the
active/current id
Match the ids with the little dots so that each dot will be linked to a card (for onClick events and also for styling)
Display the card with active id, and also implement onClick events for the dots (and possibly swipe events for mobile too) so that each dot will activate their linked card and that's how you'll be able to switch between cards
The visual bit of making it look like they are stacked cards may be done only in CSS, or a combination of both JS and CSS, depending on how you'd like to animate the card switches etc.
But again, that's only one possible approach among many. Regardless if you'd like to go with this approach or choose some other, the actual implementation of it will be up to you.
Related
This is what I'm aiming to achieve
I'm making a small quiz game in React Native where you guess the image by clicking on different parts of it.
Initially the image is behind multiple small "blocks" and by clicking on them they disappear.
How can achieve this functionality in the most elegant way?
I was thinking of making multiple small Views each with the same size and onclick they would disappear. Is this a good approach?
Here's the image of what I'm aiming to achieve:
Guess image app
In my opinion, your approach is the only one. If you try to split your image, there will be somethings you have to deal with:
You might have to use some tools to split your image into smaller one. Because the tool's functionalities, the number of your images, the size of image and the way you include and manage your images in your app, this is really unnecessary, unless you want to show off your skills.
With 1 image, if you want to make that level harder, e.g: create more blocks to hide it, you have to split that image again. Even if you have libraries to do that, your performance will be affected seriously.
And these are some props when you use blocks:
No need to split image (of course), so say good bye to libraries that decrease your perfomance.
You can do many things with those blocks, e.g: increasing the difficult by adding more blocks, creating block's animation like rolling or phasing, etc.
If you don't want to set absolute position to your <Image/> component, RN has built in <ImageBackground/> component to meet up your requirements.
I have an HTML/CSS/Javascript related question, but I'm unsure of exactly how to ask, as I've long since forgotten the technical terms for everything.
My ultimate goal is to construct (code) a webpage element that does the following:
-Has a number of clickable elements (graphical buttons, not HTML "buttons") that, when clicked, display a variable amount of text that provides interesting details about certain things. If possible, some way to have these buttons "highlight" would be desired (I know how to pull off a CSS trick where the image is swapped up/down or left/right by coordinates when clicked, but I'm unsure of how to get this to work with what I intend).
-Allows me to affix some kind of a label in front of each button. (My original plan was to throw everything into an HTML table, so I could have a column on one side of the buttons that I can type labels into).
-Allows me to have an image background appear when the detail box pops up.
-Is organized such that the buttons and their title plates are on one side of the detail box, and the detail box itself is on the other side.
Example:
I have a column on the far left that has names of fruits (Apple, Orange, Banana, Pear). In a column immediately next to these names is a series of buttons aligned with each fruit name (one button per fruit name, so "Apple" then {button} on one row, then "Orange" then {button} on the next row, etc.). Clicking on that button will display, on the far right, a detailed description of each fruit, with a background image (same image for all of these detail boxes) behind this detailing text. This background image, and any text, would be hidden until a button is clicked. I would prefer it that if the same button is clicked twice, the text is once again hidden.
I've no problem constructing images for all of this, but I'm lost on the code. Is it possible to code all of this as some sort of HTML Table, so I can keep it organized? Would it be possible to have the far left column (example) have a background image, then replaceable text on top of it (thus decreasing the number of graphics)?
I apologize if my question and phrasing isn't technically descriptive. I've long since gotten too used to simple HTML pages and never really learned CSS/Javascript. If my question doesn't make sense, I'd be more than happy to draw an image to better explain my goal.
Thanks in advance for any responses.
Well, there's no single "right" way to do what you're asking. There's dozens of ways to approach this problem. It comes down to: 1) How much time do you want to spend building the solutions, and 2) Would it be an issue if you added different technologies to your project (such as Bootstrap or jQuery)?
To look it at from a general viewpoint:
There's a rule of thumb I heard somewhere that I think helps in situations like this. Every single thing on your page is a rectangle. Everything. All you're really doing is naming, styling, and manipulating these rectangles.
Any element, id, or class that you create on your html page can be manipulated by your css or javascript. And if it doesn't exist on your html page, then you can create it with css or javascript and then manipulate it.
Anything can be made into a "button", not just items specifically called out as buttons. You can choose whichever rectangles you want to be your "buttons"; you would just have to target and style them as such.
(As a piece of advice, though, I would recommend sticking with html's <button> functionality. Standardized semantics is good for everyone all around, and you can change the look and feel of these buttons however you want by using css).
To be more specific:
The traditional way to handle the hiding or showing of information on the page is by using javascript and/or jQuery.
Give all common html elements to be manipulated a class name class="example-class", and give any unique elements to be manipulated an id name id="example-id".
Here's the jQuery page regarding .hide() and .show(). (If you have any specific issues with these methods, then Stack Overflow can help). You would target the classes or ids that you named in the html.
As for organizing your page, using and nesting <div> tags is usually the way to go. Bootstrap comes with special classes that can help with the necessary roles: class="row" to help with the horizontals, class="col-SIZE-NUM" to help with the verticals, and class="well" to help with organizing sections.
Bootstrap's main page has a pretty good overview on your options: Here.
All of the above can be done with vanilla css and vanilla javascript as well. It's up to you to decide if you want to (or are even able to) make things a little easier for yourself here.
Hope this helps!
Context:
I have cards that will be overlaid on a grid system to represent a time shift. The top part of the grid will pertain to certain time frames ( 1 pm 2 pm 3 pm etc. ) and the side will pertain to the people assigned to the shift. The cards normal state is just with a green top border. However when the person is on a break, I'd like for it to be blue, and when the person has been over scheduled, i'd like for it to be red.
I have to check the different break times and criteria to dynamically place the blue and red sections of the card.
What I've tried:
I've experimented with creating separate cards for each situation and stitching them together, but its not working cleanly. It is done using flex css.
I'd like to be able to just dynamically change only part of the card to the desired colors instead of stitching them together just because its seems more intuitive to me but I can't seem to search the right thing on google if it even exists.
The general question is what is the best way to go about this?
EDIT:
The final product would look like this.
I would suggest looking into ng-class as it sounds as though it would suite your requirements.
It would allow you to do something like;
<div ng-class="{'break': userOnBreak}">// code</div>
Edit: userOnBreak being the variable stating wether your user is on a break or not (boolean).
I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.
I am working in making an app around the 960.gs based system (although the grid framework isn't set in store yet).
What I would like to do is enable the user to drag and drop specific layout elements (DIVs), which would, theoretically, move the blocks of the design around. I know JQuery UI has a drag and drop system, which may be a component of this project, but what I want to do is make sure that the user can only drag, drop and stretch/expand divs according to the limitations of the defined css grid. And make sure that nothing will violate the boundaries of the grid, and generate the proper css classes to display correctly....
I have scoured the net and stack exchange for some examples along this line, but I haven't seen anything. Can someone point me in the right direction?
I'm looking into a similar problem, and I found a few options that are not based on 960.gs.
jQuery EasyUI (www.jeasyui.com/) has something like this; here is a direct link to their demo.
There's also iNettuts, which is something similar.
Since you said the grid framework choice isn't solid, I think these options might be useful.