I have managed to get simplemodal working--very happy with it--but I would like to get it working responsively; any suggestions? On smaller viewports the modal-window extends out of the viewport. Have I missed something in the options that already does what I want?
Alternatively what can I do with smaller viewports? Turn it off?
I could not get the modals to work so I have relied on the fall back I alreay put in place for no js. Quite simply I'm turning the modals off when the screen size becomes troubling.
(function() {
if (viewport.width() >= 705) {
modal code here
}
}());
Related
I want to display a route between 2 or more coordinates. I don't want any fancy direction instructions or start and end markers. So basically something like a <Polyline /> that goes along roads. I know there is a leaflet-routing-machine, but I wasn't able to make it work using React and Typescript.
What is the best way to do that?
Edit: I have tried this but I don't know how to edit the L.Routing.Itinerary properties which I need to edit to disable the directions instructions and the Marker style.
You need to add two things to achieve that behavior:
1.According to the maintainer add this to make routing panel dissapear on styles.css.
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
}
2.Add this to make markers dissapear when you create the routing control instance
createMarker: function () {
return null;
}
Demo
I am working on a project with videojs that must work on Firefox and IE 11, and is built with a angular-ui-router. One of the states has a video player, and on the first time loading, videojs properly generates the content. However, if you navigate away from that state and come back, videojs content isn't generated and the default html5 video element is displayed. Is there a way to deal with this problem? In addition, (more often in IE 11), videojs will sometimes randomly fail to generate the content on the first page load. I can't figure out if the problems are related, or what is even causing the problem because there are no errors in the console log.
I'm not sure what code will even be relevant to post. Here is the html for the video:
<video controls preload data-setup="{}" class="video-js vjs-default-skin vjs-big-play-centered full-video" poster="img/CollaborationPoster.png">
<source ng-repeat="src in video.srcs" ng-src="{{src.url | trustUrl}}" type="{{src.mimeType}}"/>
</video>
In addition I have:
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
At the start of my app. However, the problem still exists if I get rid of this.
Feel free to ask for any other code that could help diagnose the problem
(NOTE: I am also open to suggestions on using a different framework/etc for the video component. videojs has been very frustrating overall)
EDIT: In case it's relevant, 'full-video' is the only custom class for the video and its styling is:
.full-video {
width: 100%;
height: auto;
}
I have the same problem, and I find a way to solve it.
Add this code in your controller may help you.
$scope.$on('$destroy', function () {
video.dispose();
});
Video is the player object created by videojs() function.
Can look at this discussion for more infomation.
angular single page app, videoJS ready function only fires on page load
I assume you are using some form of routing? Perhaps you need to reload the controller/directive/component.
scope.$watch('[apps, date]', function() {
...
...
...
}
Now I know that the above works, but what I need is it to display nothing unless an app is selected first and THEN after that when an app or a date is changed, the code must re-run.
Perhaps this isn't possible.
Any help would be greatly appreciated. :)
**Context:
What happens is I get a UI grid returned with no data(as no app has been selected) until I eventually select an app.
If your intent is to watch a group or a collection you just have to scroll down this page:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Search for example: $watchGroup inside the page
There are answers to this problem but they don't work on my current situation.
solution 1: resize.
google.maps.event.trigger(map, 'resize');
The resize redraws the map but it doesn't center, the center gets moved to the top left corner.
I tried to also put another event trigger like ...trigger(map, 'center') without success.
ng-if and refresh=true don't work at all, the map is not rendered as before.
other questions seem to be solved by using angular ui (not quite sure what they meant by this) but this is based in angular material.
Thanks to all for the help.
When using angular google maps 2.0.19 and angular material, a Google Map displays properly the first time it loads. But if the user clicks on a different state and then comes back, without reloading, of course, it only displays a corner of the original map.
Notice on the left the angular material look and on the right the empty space in darker gray, where the rest of the map should show.
The configurations is pretty vanilla:
<ui-gmap-google-map draggable="true"
pan="true"
zoom="map.zoom"
dragging="true"
center="map.center"
events="map.events"
control="map.control"
refresh="true">
And the loading from the controller also:
$scope.map = addressStore.setMap({lat: address.latitude,
lng: address.longitude});
//...also loads other parameters.
In a previous project had the same problem with Angular UI but got solved with this command at the begining of the controller:
google.maps.visualRefresh = true;
But then I moved to Angular Material in this app and the problem showed again.
Thanks in advance.
Given something like this:
View = Backbone.Marionette.ItemView.extend({ });
myView = new View();
//region already exists
myLayout.region.show(myView)
//some time later this gets called again:
myLayout.region.show(myView)
I can see currentView in the docs but this only seems to apply at initialisation. Once a view is shown can I query the region to see the view? Either the view instance or type would be helpful. Looking in Chrome's debugger I can't see any properties/methods on the region that would help.
The motive for wanting to do this is so I don't show a static item view in a region again if it is already displayed as this can (especially if images are involved) cause a slight flickering effect on the screen.
Thanks
--Justin Wyllie
you can add a condition before calling show method:
if (myLayout.region.currentView != myView)
myLayout.region.show(myView)
so if you'll try to call show with the same View it wont be shown.
if you want to call region.show(myView) once you can check in this way:
if (_.isUndefined(myLayout.region.currentView))
myLayout.region.show(myView)
You can check the isClosed and $el attributes of the view. Something like
if (myView.isClosed || _.isUndefined(myView.$el)) {
myLayout.region.show(myView);
}
This is the same way the region checks to see if the view is closed or not:
show: function(view) {
this.ensureEl();
var isViewClosed = view.isClosed || _.isUndefined(view.$el);
...
I'm going out on a limb here and assuming that the OP's question is based on app behavior when navigating to different parts of the app via an anchor tag in the navigation or something similar.
This is how I found the question and I thought briefly that the answers would save my day. Although both answers so far are correct they do not quite solve the problem I was having. I wanted to display a persistent navigation bar. However, I did not want it to display on the login page. I was hopeful that detecting if a Region was already shown or not I'd be able to properly let the display logic take care of this.
As it turns out we were both on the right track to implement Regions as this provides granular control, but even after implementing the above I found that my nav bar would still "flicker" and essentially completely reload itself.
The answer is actually a bit ridiculous. Somehow in all the Backbone tutorials and research I've been doing the last two weeks I never came across the need to implement a javascript interface to interrupt normal link behavior. Whenever a navigation item was clicked the entire app was reloading. The routing was functioning so the content was correct, but the flicker was maddening.
I added the following to my app.js file right after the Backbone.history.start({pushState: true}); code:
// Holy crap this is SOOO important!
$(document).on("click", "a[href^='/']", function(event) {
if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
event.preventDefault();
var url = $(event.currentTarget).attr("href").replace(/^\//, "");
Backbone.history.navigate(url, { trigger: true });
}
});
Check out this article for some explanation about the keyPress detection stuff. http://dev.tenfarms.com/posts/proper-link-handling
Boom! After adding this stuff in my app no longer completely reloads!
Disclaimer: I am very new to Backbone and the fact that the above was such a revelation for me makes me think that I may be doing something wrong elsewhere and this behavior should already exist in Backbone. If I've made a giant error here please comment and help me correct it.