Ionic Angularjs: dynamic styling on cards - javascript

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).

Related

Card carousel with stacking in CSS with react

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.

How can I truncate tag list to one line using ellipses similar to the one we do for text-overflow?

I am building a Multiselect component. The component looks like the following. This component is a sample implementation of the concept posted at Dribbble:
I have got most of the details right. Once thing I cannot figure out is the ellipses pattern (the three dots representing continuation) for overflowing chips (when selected items can no longer fit within one line). How can I do that?
First preference is CSS only solution.
If not plain CSS, then JavaScript based solution would also work.

Unsure of the technical term - HTML/CSS/Javascript table questions

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!

How do i create a grid of randomised labelled buttons

I would like to create an application that accepts response from a user in terms of button presses. As part of this project, i want to create a grid of 3x3 or 4x4 grid of big buttons equally spaced and equal sized and which will have labels containing a combination of two alphabet between A-D e.g. AB, AC, BC etc in a random order
I can create buttons in html but im fairly new to coding so things that may seem obvious are probably difficult. The functionalities i want includes recording start time a grid appears to when a target button e.g. DC is pressed (stop time), trigger when the grid appears (new grid of buttons), randomise the appearance of buttons on the grid, have one consistent target button to be pressed on all interfaces.
Has anyone done this before or can anyone share a stripped down example. Can someone point me in the right direction in terms of documentation or coding environment that perhaps I skipped over? Any comments or code will be greatly appreciated.
Thanks in advance
JavaScript Tutorial should be a good starting point: http://www.w3schools.com/js/
Also http://jsfiddle.net/ is good tool to play with the code you write

Javascript/jQuery legend widget

Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by "■".charCodeAt(0) is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.

Categories