Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
In a form I've got a list of about 15 checkboxes, of which 3 are the most popular. So by default I only want to show the 3 popular choices. At the end of the 3 checkboxes there should be an icon to expand and collapse the rest of the checkboxes.
I'm building the website in Angular, so I guess I can simply use an ng-show for this. The thing is that I wonder whether that is the correct way to do this. It seems to me that this is such a common thing, that there should be some kind of standard way of doing this..?
And also what kind of icon do people normally use for this? For expand and collapse I would normally use the little grey triangle, but I feel it doesn't suit this specific situation well. I know I've seen this before in other forms, but I just can't find it anymore to take inspiration from.
All tips are welcome!
I use ng-show for a similar purpose in my application and it works well. I set the default value in my controller and then make the ng-click event trigger a toggle.
Controller:
$scope.expanded = false;
Html:
<div ng-show="!expanded">
<span class="glyphicon glyphicon-triangle-bottom" title="Expand" ng-click="expanded=true">
</div>
<div ng-show="expanded">
<span class="glyphicon glyphicon-triangle-top" title="Collapse" ng-click="expanded=false">
</div>
As for icons, I like to use bootstrap glyphicons. The glyphicon glyphicon-triangle-top and glyphicon glyphicon-triangle-bottom are good for collapse/expand, as well as glyphicon glyphicon-plus-sign and glyphicon glyphicon-minus-sign. You can find more here.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to remove JavaScript. But it does not work without JavaScript. What is the solution for this, please any modified code?
CSS is used to style the content and JS is the proper way to handle clicks and go some logic. Explain what you mean by damaging the system and I will try to help you fix it.
CSS means casacade style sheets, how do you want to create forms and functions with it? You definitely need js.
In other words, css is for the visuals, javascript to give it functionality. You just can't create methods using css.
CSS is for styling only (colours, font style etc.) as mentioned by others. Adding 'interactivity' by css would be somthing like this
.search-button a:active{background-color:#000;}
Change style on active or hover etc, but thats about it.
Personally I wouldn't say this is interactive. Javascript shouldn't slow down your website as its used by thousands of websites extensively eveyday. If it is then you need to take a look at the javascript code and debug it.
Regards
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am using Angular 8 with Angular Material to build a multi-level menu that is 3 levels deep.
E.g.
One -> Two -> Three
StackBlitz Example:
https://stackblitz.com/edit/dynamic-sidenav-multi-level-menu-u93fqt?file=app%2Fapp.component.html
Does anyone know how I can solve this? I want to stop the list of items from closing automatically, i.e. to display item Three.
Remove the mat-list-item Element from the submenus and place matMenuTriggerFor on the button with the mat-menu-item decorator instead:
<mat-menu #menu1="matMenu">
<button mat-menu-item [matMenuTriggerFor]="menu2">Two</button>
</mat-menu>
Your full example:
https://dynamic-sidenav-multi-level-menu-cnarmb.stackblitz.io
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've created a button on my page and I want to increase the icon size. However the icon size doesn't want to change when I try to change the styling, can someone please help me? I'm sure it's something stupid that I'm missing out on.
Button/icon code:
<button style="margin:0 auto; height:70px;" class="button button-clear button-primary" ng-click="removeCard()"><span class="icon ion-ios7-close-outline light"></span></button>
are you using some framework? Semantic UI, Bootstrap or Foundation?
Anyhow, you can try 2 things:
Change: <span class="icon ion-ios7-close-outline light"></span> to
this : <span class="large icon ion-ios7-close-outline light"></span>
or you can try this:
<span class="icon ion-ios7-close-outline light" style="width:50px; height:50px;"></span>
Just my thoughts
For a web font you should use font-size css property
Concider you are working with a font as arial or times
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I had a meeting with our president this morning who was wanting to have our team page function similar to the following app for her Ipad:
http://itunes.apple.com/us/app/appstream-for-ipad/id375288393?mt=8
There is a lot of movement and I am not sure where to really begin. In our case the thumbnails would be pictures of our people and when you clicked the photo a pop up box with description and contact information would be available for the user. I am wondering if anyone has seen a JQuery plugin I could use to simulate this affect or something else I could build on.
Any help would be greatly appreciated.
For anyone that is interested, here is what I wound up doing.
I used a JQuery plugin called "quicksand" for the animation part of it, then set up some an AJAX request on a timer to call a php page with a list of all employees in random order. Give a similar effect to what we were looking for, thanks for all the help.
One way i could think is to just have the thubnail images and then load the appropriate profiles in a fancy box
http://fancybox.net/
Or do it all manually, by having a hidden, absolute positioned Overlay and then present it on click
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How do I make an expandable and collapsible menu in java script where clicking on one menu will expand the children inside that and collapse other expanded menu(s)?
Besides one of SO's running jokes for an answer, what you're wanting is an accordion menu (maybe not for the effects, but for the containment of the entire menu).
Here's a library-less solution: Javascript And CSS Tutorial - Accordion Menus.
Or, an accordion-specific library/script: http://www.stickmanlabs.com/accordion/
Otherwise, if you're up for using a library and add-ons, there's plenty of options: 10 Javascript Accordion Scripts.
The easiest way to do this is with a jQuery plugin like this one:
http://plugins.jquery.com/project/accordion
in jQuery:
$(".toggle-control").click(function(){
$(".target-div").hide();
$(this).next().show();
});
if your html is something like this:
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>