I've been doing a lot of research on this and can't find a good solution. Basically, I have a panel in my app (Panel 2) and would like to collapse it to the left when the button is clicked and if the button gets clicked again then expand it to the right.
Here's my working Code: PLUNKER
<div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
<div fxFlex [fxShow]="explorerShow" style="background-color:white;">
<div (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
</div>
Panel 2
</div>
Use fxHide and [fxShow]="expand" on Panel 2 element
<div class="container">
<div class="content" fxLayout="row" fxFlexFill>
<div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
SIDEBAR
</div>
<div class="sec2" fxFlex="100%">
BODY
</div>
</div>
<button (click)="expand = !expand">Toggle Sidebar</button>
</div>
Here is a working stackblitz | your plunkr
UPDATE: Here is a stackblitz with animation
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
I have implemented a carousel using PrimeNG in angular which looks like this:
On page load the carousel is loaded with its last slide. I want the carousel to get loaded with the first slide by default. Also, notice the indicators at the bottom. The indicator is not highlighted on page load. It only gets highlighted when I click on indicators or the left arrow carousel navigation button. It does not work with the right button.
How do I solve these issues? Is this a bug or library issue?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="4000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{ plan?.currency }}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-div centered-div">
<button
type="button"
class="remediator-blue-btn upgrade-btn centered-div"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div
class="plan-feature-1"
*ngFor="let planfeature of plan.planFeatures"
>
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text">{{ planfeature }}</span>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
SOLUTION: I change the numScroll to 3 and circular to false and my issue was solved
This is my first question - and it is really just more of a frustration. I've went through about 12 different stack overflow questions that are similar and have copied their code and I still can't get the bloody background color to change on click. So I assume I'm missing something.
https://codepen.io/Dawsraki/pen/XRGBLW
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body ng-controller="SwitchController" ng-style="myStyle">
<div ng-switch="slider.page" class="screen" >
<div id="record_player" ng-switch-when="1">
<span><</span>
<div class="rectangle">
<div class="circle1">
<div class="circle3">
</div>
</div>
<div class="handle">
<div class="circle1">
</div>
<div class="hand">
</div>
<div class="arm">
</div>
</div>
<div class="toggles">
<div class="left_dash"></div>
<div class="right_dash"></div>
</div>
</div>
<h1>Listen to Music</h1>
<span>></span>
</div>
<div id="cassette" ng-switch-when="2">
<span><</span>
<div class="rectangle">
<div class="circle1">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line3">
</div>
<div class="line4">
</div>
<div class="circle2">
</div>
</div>
<h1>Share it with friends</h1>
<span>></span>
</div>
</div>
</div>
</body>
</html>
Here is my code pen - I want the background color to change when I click on the arrow and I have seen so many simple solutions but they just arn't working and I've no idea why. If anyone wants to help an AngularJS noob out there will be much love and biscuits <3 (DISCLAIMER: biscuits will not be provided)
This problem is due to ng-switch, as it creates its own scope.
Use $parent.myStyle={background:'red'}" in your anchor tag to fix this
I am working on chat box in angularjs and I want to add a scroll bar in the chat area so that Older chats can be easily seen by scrolling up...
<div class="chat active-chat" id="scroll" style="overflow-y: scroll;">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
I already added the overflow property and only the scroll bar is visible but its not scrolling...
Is there anything i should change on controller side.
Thanks in advance
Try this
<div class="chat active-chat" id="scroll" style="max-height: 200px;
overflow-y: auto;">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" style="height:20px;">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.