I am looking at the demo of MobiScroll and have chosen the following options:
Demo Page: Demo
Demo: Time
Display: Modal
Mode: Scroller
The demo example shows the resulting HTML I should use as:
<input id="i" name="i" />
Show
Clear
When I use this HTML, the Show and Clear buttons show up on the page and when I click in the input box, the Mobiscroll shows up inline. In the demo, these buttons appear with the Mobiscroll in a modal dialog. Do I need to wrap the HTML in a div with a special tag?
Thanks!
The issue was that the jQuery Mobile js + css files were required to get the modal popup. The directions on the site are not clear! I added the following and presto!
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
Related
I am working on a UI task to display a popover when i click on a link. Once i click outside the popover, it will close. But while clicking on the link i am adding CSS styles to the link. When the popover is closed i want the applied css to be removed from the link. Any suggestions
code:
<div class="popover-border" uib-popover-template="'template.html'" popover-
placement="bottom" popover-trigger="'outsideClick'" popover-class="test-
popover">
Template for the popover content
<script type="text/ng-template" id="template.html">
<h1> Hello</h1>
</script>
Try changing:
popover-trigger="'outsideClick'"
to:
popover-trigger="outsideClick"
Working example is here
I'm trying to implement an Angular UI Bootstrap Carousel and have HTML in the texts. Thought I could use something like
text: $sce.trustAsHtml('Nice image <br />test')
but apparently that doesn't work and I've no clue why.
Plunkr: https://plnkr.co/edit/9PvaS8SoRmN1o52wiAf8?p=preview (fork of the offical example from the docs).
Use ng-bind-html directive to display html content on view
<p ng-bind-html="slide.text"></p>
Demo Plunkr
I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.
but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.
Suggest me if I am missing something.
problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.
Here is my markup
<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
<directions
draggable="false"
travel-mode="DRIVING"
panel="p3"
origin="jaipur"
destination="Delhi">
</directions>
</ng-map>
see my
plunkr
for whole code
Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:
$('#myModal').on('show.bs.modal', function(e) {
$timeout(function() {
google.maps.event.trigger(vm.dialogMap, 'resize');
vm.dialogMap.setCenter(vm.mapSettings.center);
vm.dialogMap.setZoom(vm.mapSettings.zoom);
});
});
'show.bs.modal' event is triggered once the modal is opened.
From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.
Working example
The following forked plunker demonstrates how to:
properly display map in modal dialog
print routes in multiple map instances
add a style
.pac-container { z-index: 10000 !important; }
ref from there
Google Places Autocomplete not showing up
here a plnkr for a your working example
http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview
I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
HTML:
<body>
<div>
Click me
</div>
<div id="content">
<div id="list">
</div>
</div>
</body>
CSS:
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}
JS:
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
{
$("#list").animate({right:"-200px"}) }
else{
$("#list").animate({right:"0"})
}
})
jsfiddle - http://jsfiddle.net/RJJwu/3/
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).
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