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?
Related
I am using react-slick for implementing carousel in React.
The carousel works fine in Chrome.
However, in Firefox (47.0) it gives an error: "TypeError: images.forEach is not a function".
I tried to have only image tags inside the react slick slider like the below code:
<Slider {...settings} className={classes.slider}>
<div className={classes.sliderdiv}>
<img src="..."/>
</div>
<div className={classes.sliderdiv}>
<img src="..."/>
</div>
<div className={classes.sliderdiv}>
<img src="..."/>
</div></Slider>
However, still I am getting the same error in Firefox.
The problem was present in react-slick version 0.21.0.
Updated the version to new one(0.22.3) and the issue is resolved.
Also, refer to this issue.
An image is being shown. On clicking the image a pdf file should open in a new tab. This is how I am trying to render the React component, doesn't work -
<a href={pdfUrl} target="_blank">
<img className="class-image" src={imageUrl} onError={imgError}/>
</a>
When the image is clicked Chrome gives a warning that a pop-up has been blocked. Safari doesn't even give any warning and just eats the tab which it thinks is a pop-up.
I tried removing the onError attribute with no effect.
If I remove the target="_blank" attribute it works fine, opens the pdf in same window.
I have tried adding onClick handler to the <a> tag, opening a window using window.open with the same result - generates warning that a pop-up has been blocked.
This works fine however -
<a className="class-name" href={pdfUrl} target="_blank">{userName}</a>
The problem occurs if rather than rendering text as the content of anchor tag I render an image. Can't figure it out.
EDIT:
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to change the pointer to a cursor so that it looks like a link
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to
change the pointer to a cursor so that it looks like a link
One approach that might work with this is to open the new window, then populate the URL:
const newWindow = window.open();
newWindow.location.href = '/some/url';
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'm trying to get to grips with Polymer version 1.0 but what I thought would be simple example is turning out not to be so. After after several hours of experimenting, and reading Polymer documentation I've not clue as to were I'm going wrong.
What I was trying to do is convert the Collapsing toolbar example from robdobson on GitHub to something that would work under Polynmer 1.0.
Here is the body of my code from within my index.html file
<collapse-toolbar query="(max-width: 500px)">
<div class="logo">
<a href="#">
<iron-icon icon="polymer"></iron-icon>
</a>
</div>
<paper-menu>
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</collapse-toolbar>
Here is the code from my custom element (collapse-toolbar.html) file:
<dom-module id="collapse-toolbar">
<template>
<content select=".logo"></content>
<template is="dom-if" if="{{smallScreen}}">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<content select="paper-menu"></content>
</paper-menu-button>
</template>
<template is="dom-if" if="{{!smallScreen}}">
<content select="paper-menu"></content>
</template>
<iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
</template>
</dom-module>
<script>
Polymer({
is: 'collapse-toolbar',
properties: {
query: String
}
});
</script>
What I'm seeing when I run this in a browser (Chrome) is the following:
If I open the index.html file with my browser window set to > 500px wide, what I see is the Polyer icon and the paper-menu, which is exactly what I expect.
If I reduce the width of the browser window to <500px, the paper-menu disappears and a hamburger menu appears along side the polymer icon. If I click on the hamburger menu, NO drop down menu appears.
If I now scale the window back to >500px, the hamburger menu disappears but my regular paper-menu does not come back.
If I load the page with the window at <500px to begin with, the hamburger menu appears, but does not operate and when I expand the window to > 500px the paper-menu also does NOT appear.
Hoping someone can put me on the right track.
Inside index.html, you should use <paper-menu class="dropdown-content"> to make the dropdown menu work.
I have still no idea how to replicate the functionality of the original collapse-toolbar in polymer 1.0.
UPDATE:
Use <template is="dom-if" if="{{!smallScreen}}" restamp="true"> to make the menu reappear after enlarging the window.
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;
}