I would like to create a sort of double dropdown. For example, initially the selection box is empty with a down arrow. If you click the arrow you get a dropdown with two entries: MA and NH. If you then click MA you get another dropdown with Boston and Worcester. If you click NH you get a dropdown Concord and Nashua.
As far as I know, this isn't connected with CakePHP. CakePHP is a server-side PHP framework, not client-side library. This can be done with JavaScript, I recommend using jQuery Library here.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dropdown">
Hover me
<div class="state">
MA
<div class="city">Boston</div>
<div class="city">Worcester</div>
</div>
<div class="state">
NH
<div class="city">Concord</div>
<div class="city">Nashua</div>
</div>
</div>
<style>
#dropdown{background-color: yellow;width:200px}
.state{background-color: orange;}
.city{background-color: lime;}
.city,.state{display:none}
</style>
<script>
$(document).ready(function(){
$("#dropdown").mouseenter(function(){
$(this).find(".state").show()
$(this).find(".city").hide()
}).mouseleave(function(){
$(this).find(".state").hide()
})
$(".state").mouseenter(function(){
$(".city").hide()
$(this).find(".city").show()
}).mouseleave(function(){
$(".city").hide()
})
})
</script>
This code is just for explanation. It is not optimized, but 100% working.
Never use inline styles and scripts.
Related
I am making use of PrimeNG and Angular 8.
The code snippet is as follows -
<div class="p-col-12 p-md-6 p-col-nogutter drag-column">
<div *ngFor="let doc of availableDocs" class="ui-helper-clearfix">
<div class="ui-g-12 ui-md-4" pDraggable="docs" (onDragStart)="dragStart($event, doc)"
(onDragEnd)="dragEnd($event)">
<p-panel [header]="doc.title" [style]="{'text-align':'center'}">
<img src="assets/images/{{doc.extension}}.png">
</p-panel>
</div>
</div>
</div>
If in above code we remove the class ui-helper-clearfix, then the image cannot be dragged.
But in documentation no such requirement is mentioned. Can this be done without ui-helper-clearfix.
Or some other solution as it is not the layout i want.
Firstly I'm using angular 1.2.14,
In this case ng-click of ngTouch is used:
<section class="scroller-container">
<div id="wrapper">
<ul id= "scroller">
<li data-ng-repeat="competitor in competitors">
<div class="competitor-title" data-ng-click="selectCompetitor(competitor)">
<div class="title-name">
<span>{{competitor.competitorTitle}}</span>
<br>
<span>{{competitor.competitorName}}</span>
</div>
<div class="landmark"></div>
<div class="landmark-emphasis">
<i class="icon-arrow-down-blue"></i>
</div>
</div>
</li>
</ul>
Then the controller:
app.controller('intelligenceController', ['$scope', '$http', function($scope, $http){...}]);
In which:
$scope.selectCompetitor = function(competitor) {...};
And I used ng-click-active, the document says:"This directive also sets the CSS class ng-click-active while the element is being held down (by a mouse click or touch) so you can restyle the depressed element if you wish."
So I click or touch the div, style changes. However touch doesn't trigger the method, while mouse click trigger the method.
In short, mouse click works right, while touch only change the style, why?
Edit(old): The problem is solved, using android webview it works all right. I tested my webapp on surface pro, the touch does not work ok.
Edit The root cause is you need to set iscoll option (click: true), otherwise in UIWebview and surface pro it will not work ok.
did you add ngtouch in your module ?
var sellApp = angular.module('process', ['ngTouch']);
and also include it
<script src="js/angular-touch.min.js" type="text/javascript"></script>
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario