I am currently working on a prototyp on for testing the usability of several frameworks when developing a Win8.1 WinJS app. During the development I discovered a very strange behaviour with forms.
This is the vanilla form of an freshly created WinJS App:
What you can see is a cursor within the inputbox and half of the the copy button. Since the drop-in virtual keyboard would overlay the inputbox, it automatically scrolls the content upwards.
Now I include AngularJS 1.3.1:
Now, there is no cursor, the copy button doesn't appear and the drop-in keybord actually overlays the inputbox. It is actually not possible to change the position of the non visible cursor, so I can only prepend characters to any existing text.
I analyzed the DOM tree of both versions:
Vanilla:
Angular 1.3.1 included:
What we can see is that angular nests a second level head within the head including some weird ass css definitions. Furthermore another body tag is created within the head element. I tried to remove those after loading angular using the following snippet:
<script type="text/javascript">
$(function () {
$('head > head, head > body').remove();
});
</script>
This solves the problem but now, ng-show, ng-hide directives do not work anymore.
I can observe this problem only when using AngularJS in a WinJS API. I searched the internet but I didn't find any clues on that behaviour - there are actually several blogs out there describing the process of using AngularJS within a WinJS application without mentioning any such issues.
Do you guys have any idea whats going on here?
I see you're including winstore-jscompat.js... Please see this issue:
https://github.com/MSOpenTech/winstore-jscompat/issues/8
..which is fixed in this fork:
https://github.com/ClemMakesApps/winstore-jscompat/blob/master/winstore-jscompat.js
Note that this will probably be pulled into the main project at some point so this issue should go away "soon".
Related
I have got an angular project generated with yeoman/generator-angular with both mobile and desktop views. The mobile templates heavily rely on mobile-angular-ui and it works just fine in development.
For some reason the modals are not displayed after grunt build. Instead, calling a modal would act as if a transparent component was added on top of the page (I mean, with the highest z-index), stealing the focus in the same way that a modal would do. As a consequence, the modal itself is not displayed and the page does not respond to any click event (assuming the fake modal is locking the focus).
The content of my modals is loaded via ng-include directives and it seems to work (from what I can see in the network tool of Chrome). There are no error message complaining about a missing resource in the console and the only thing I can think of is that the code responsible for toggling the modals visibility in mobile-angular-ui was somehow impacted by the build process. Sounds possible?
Any idea of what could cause this difference of behaviour between dev and production?
I am using mobile-angular-ui 1.2.0-beta.11. Feel free to request more information.
Bingo. The problem actually came from a clash between mobile-angular-ui and bootstrap, as I was using both of them for the mobile and desktop views respectively.
Since I use a very limited subset of bootstrap, I decided to remove all my bootstrap dependencies and only work with mobile-angular-ui which also provides a minimalist support for desktop views (namely col-md-xx etc. for responsive layouts).
I don't know about mobile-angular-ui, but in Angular ui-bootstrap you need to include not only the main code but also the templates:
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
When you don't include the tpls, the development is still working, because it's able to load the files from their location in bower_components.
In production you get a similar result as you describe when using modals, because the templates were not bundled in your dist directory. Maybe it's a similar problem?
I'm building a project with angularJS. I use ui-router for views, and nested views.
So I have a index.html with just the header, the footer and a "general" ui-view where I load asychronously the Home-view, Contacts-view, About-view, etc.
On the "home" page and on the "about" page there are two different Adobe Edge animations.
They work like charm when I load them for the first time, but when I navigate through the website and then I come back to the home or the about page nothing appears.
I've tried loading the edge scripts in different ways
in the index.html head with the script tags
in a angular directive
in the controller
during the routing processes via the resolve option of ui-router
None of this strategies fixed the problem. The animations still play just once.
Finally I decided diving in the js code crafted automatically by Adobe Edge (I'm not a designer, I have no idea on how to create animation with Edge).
I found that Edge create an AdobeEdge object and bind it to the window... then call the animation throught an event handler in a jQuery anonymous function
(function($, Edge, compId){
....
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-123456");
On the official Adobe documentation (really bad!) there are some methods to call on the AdobeEdge object...
I tryied to insert in the home-controller the following line
$window.AdobeEdge.getComposition("EDGE-123456").getStage().play();
but doesn't work.
After a wasted whole day I'm frustrated, I hate who ho conceived Adobe Edge scripting and overall I need an help to fix it the right way (beofore implementing horrible workaround).
Thank you
Try using playAll(). I imagine this plays all the Symbol timelines at once (it's difficult to know for sure since the documentation is so vague), but I've found it works for my purposes.
$window.AdobeEdge.getComposition("EDGE-123456").getStage().playAll();
I'm building a web application with AngularJS.
The application should behave like Codepen:
4 sections,
allowing the user to hide/show one section or another
with a resizing element allowing the user to shrink or enlarge sections.
I snooped on Codepen's code and I realized it's intensively relying on JQuery-UI.
I'd like to find any Codepen-like boilerplate template or similar example using Twitter Bootstrap or matching AngularJS
Thanks in advance
Plunker (http://www.plnkr.co) which is similar to CodePen is created using Angular.
Check out the GitHub Repo: https://github.com/filearts/plunker
At last I found these solutions:
UI-Layout
Flexy Layout (discontinued?)
this stackoverflow (CSS based)
Latest Update:
This got fixed in the new masonry version.
Original Post:
I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).
I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.
I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.
The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.
Update: I've noticed that the masonry website doesn't use paddings (like bootstrap does) but margins instead, and indeed when I remove paddings and add margins, it works. However the question remains - Why doesn't it work with paddings?
Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html
It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.
Here a screenshot of how it should look from Chrome:
And here a screenshot of how it looks for me in IE11:
Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?
After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.
Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.
The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.
Update:
This got fixed in the newer masonry version
I'm having an odd issue after having migrated my drupal project to a client's server.
After configuring the apache http.conf to accept clean urls, I'm now finding that the administrative overlay does not always respond.
-The Find content shortcut doesn't respond, but the Content link on the overlay does.
-The Edit link when on a node's detail page makes the site darken like it does when the overlay is being loaded, but the Edit window for the node never appears.
-The X (close) on an overlay page (like when using Content to see the list of all nodes, but then want to quit out of it and go back to the site) fails to close the overlay and a strange, second vertical scrollbar appears on the right of the browser screen.
I have had a similar problem before, but chalked it up to javascript on the page interfering with the overlay's own javascript. Now I'm not so sure.
If anyone else has had this problem, or can surmise what the issue might be, then I would appreciate any and all help given.
My thanks,
~M#
It looks as if you are using a jQuery version that is incompatible with the overlay module. It's probably because $.browser is deprecated in jQuery 1.9, see the following issue:
Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools
To fix this issue, you'll need to install the latest jQuery Update module and select something below jQuery 1.9 for the admin interface. This should clear up your problems in IE.