I am using a Wrapbootstrap Theme ACE Template https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR with AngularJS but it doesn't work fine; The sidebar and settings not works correctly; If i removed AngularJS, it Works fine; I think the Problem is related to the theme JavaScript files are loaded and executed before Angular load and render the partials; I want to know how to load Theme Scripts(two scripts ace-elements.js, ace.js) and execute them after the Angular finish his work;
Just fixed my issue, based on a clue you said. I moved the two (ace-elements and ace) javescript files to the end, after angular did all it's thing and suddenly the menu toggle button which was working on a PC but not on a mobile device worked!
Related
I've got a really weird bug in a create-react-app application. Onsenui is used as a css framework. But when I try to run the app, either in production or on localhost on a chromium based browser, the framework doesn't get loaded. Both css and js aren't loaded. (Only the OnsenUI ones, other css and js is loaded correclty) I then have to refresh the page multiple times to make it work. It loads correctly on Firefox and Safari.
The problem persists on both my MacBook and my Windows PC. I'm not the original creator of the repo and it's already a few years old. I have however updated onsenui, react-onsenui, react to the newest version.
Unfortunately, I can't share the link to the page.
So, in the end, it's been all because of a pop-up blocking extension I had installed. I can't believe I haven't thought of it and I've been refreshing the page multiple times/had to use other browsers just because of this.
So if anyone ever sees this is the future with a similar problem, double check all your active extensions.
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
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();
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