I am using angular 9 and I want to disable right click for iframe which loads PDF file. SO no one can download PDF. I have disabled the toolbar but from right click save as is still there I have used the contextmenu but it is not working
<iframe (load)="myLoadEvent()" id="iframe" #iframe *ngIf="!ismasked" [src]="previewresumeurl | safe" frameborder="0" type="application/pdf" allowfullscreen class="iframe-div" (contextmenu)="itemClicked($event);"></iframe>
itemClicked($event) {
console.log($event);
$event.preventDefault();
$event.stopPropagation();
}
I have tried the contextmenu but it is not working and also I tried to reference the native element
but that is also not working.
Related
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
On click of following button PDF download starts in the browser
<input name="SavNSend" class="gradient_button" id="printPdf" type="button" value="Save to PDF" ng-click="savePdfRP()"></input>
But what I want is to open a new tab in order to download the pdf. Can this be achieved using ng-click with button or ng-click with tag.
If you want to open a new tab/window. You need to use lower level services such as $window.
ng-click="savePdfRP()"
$scope.savePdfRP= function() {
$window.open(url, windowName);
}
Another approach is to bind the href of the anchor.
<a class="gradient_button" id="printPdf" ng-href="{{ url }}" target="_blank">Save to PDF</a>
$scope.url = 'http://www.google.com';
I am using SVG <use> sprites as described in this CSS-Tricks article. Those icons often live in anchors, as demonstrated below:
<a ui-sref="home">
<svg class="rp-icon">
<use xlink:href="#rp-home"></use>
</svg>
<span>Home</span>
</a>
I've hit an odd bug with AngularJS that only occurs in IE11 (not IE10, and didn't test any earlier IE versions).
Clicking directly on the icon throws the Angular error Unable to get property 'nodeName' of undefined or null reference, thrown in this Angular function:
function nodeName_(element) {
return lowercase(element.nodeName || element[0].nodeName);
}
Clicking on the anchor, but not directly on the icon, works as expected.
Is this an Angular bug, or something wrong with my use of SVG icons?
I'm making a functional button in my ionic app, and I want to know what I need to do to make a button centered on a blank ionic app load another page when clicked.
I have experimented with adding ng-click="loadPage()" to the button in my index.html file. I defined
$scope.loadPage = function() { $state.go(page.html)} in my controller.
switch your button with an anchor
<a class="btn btn-full" ui-sref="your.state">your text</a>
Here is a jsfiddle demonstrating the following issue.
I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.
<-- Button to Reveal Modal -->
Click For Modal
<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
<ul data-orbit>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
</ul>
</div>
Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:
$('.reveal-modal').on('opened', function(){
$(this).find('[data-orbit]').css('height','');
$(window).trigger('resize.fndtn.orbit');
});
However this fix no longer works in the newest version of Foundation. Is there any way to get it working?
Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.
In short I believe this is the answer:
$(document).foundation();
$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
OR
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(window).trigger('resize');
});
I looked at the following references:
Foundation 4.1.2: Orbit slider not shown in Reveal window
The one you listed as "hacky fixes" above
Squashed picture when using Orbit in a Reveal
Orbit height not set on accordion.
It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.
Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.
I forked your jsfiddle and added the changes here.
I hope that helps.
For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:
div.gallery-in-modal .orbit-container {
height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
max-height: initial !important;
}