I have proof of concept imagemap code using angularjs here.
I am writing something to behave the same as the jquery example that I put together here.
You'll note in the first example doesn't work because the imagemap is being populated by a scope variable, so on page load the image src is a 404. This prevents the imagemap from activating at all. I would really appreciate help understanding how to fix this problem.
I used the $timeout service to wait for the DOM to be rendered as described here: Slick Carousel with Angular JS
However, I needed to specify an actual timeout value as the default didn't work in my case (for both slick and mapster)
Related
I just started learning AngularJS and I'm not really familiar with the terminologies in AngularJS yet. Here's my concern, I created a Loading Animation that shows up when I go to pages, but then I want to stop the Loading Animation as soon as all the contents of the pages has loaded. It's fairly easy to do in plain jQuery since I can just trigger $(window).load() but it doesn't seem to work in angular. $(document).ready() seems to work but that's not what I actually need since it gets triggered even though the images are not finished loading yet. I already tried $scope.init inside my controller as well as $window.onload inside my controller but I still can't make it work.
Hotfix answer
Actually you do not need to wait for any of these events in angular.
Just use $().. in your angular controller - the site was already loaded. (similar to the window.load() event. In case jquery does not find the html elements please try to wrap it with $timeout( function() { ... } );
Recommendation
Please do not! There are angular ways to animate stuff which fits better than crazy $('#id'). logic. This will break in growing applications.
I would recommend you forget about jQuery when you are working on AngularJS application. So figure out how to work everything out in AngularJS way - move all jQuery logic that you have to angular controller and avoid direct DOM manipulation (jQuery way).
Also, there's a good tutorial online if you are moving to AngularJS from jQuery:
https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers
If you need a solution for switching pages go with ui-router - it will give you even more flexibility with loading pages and resolving properties for different pages:
https://github.com/angular-ui/ui-router
And in this particular case you can use simple boolean property on $scope and show preloader div based on that:
<div ng-show="showOverlay" class="loader" />
then inside your controller you could put something like:
$scope.showOverlay = true;
and then after your page logic is loaded and promises are resolved you could just hide that preloader with:
$scope.showOverlay = false;
To illustrate I created simple fiddle with preloader for you. Also keep in mind there are tons of different ways of implementing this but this is simple one that should work for almost any case:
https://jsfiddle.net/pegla/ng1mn8qp/3/
There's also one answer here on stack overflow that could help you:
How to execute angular controller function on page load?
I'm having problems in several cases when attempting to update data / onscreen controls and then use these controls with jQuery, especially images. My present case is the following:
button click ---> call angularJs function that creates div controls on the screen ---> angularJS function at the end call JS function ---> JS function call JQuery selectors for the created divs.
The problem is that JQuery can't find the created divs.
What is the best/indicate solution for this case? (not only for this case, but for the cases where we need to wait for the dom render complete)
Regards.
There could be several cases that could apply depending on your implementation. First make sure jQuery doesn't override angularjs functionality or vice versa. Second angularjs makes any JavaScript code in script tags invalid. You have to include your JavaScript in your controllers. You can use debugging tools like Firebug to see what's going on. Posting some code here would also help a lot.
I am using angular-masonry for my website, and the order in which images are loaded changes each time.
Is anyone familiar with angular-masonry enough to tell me how to make the order consistent?
I'very not used angular-masonry, but looking at their docs (https://github.com/passy/angular-masonry/blob/master/README.md), I can see the "preserve-order" option. Are you using this, or can you provide some initialization code you're using?
I found jquery mobile is not rendering correctly when the element is generated by knockoutjs (or probably not rendering correctly when element is generated dynamically). See the demo at http://jsfiddle.net/wRRZk/1/
updates:
One solution is to load jquery-mobile js file after KO binding finished as shown in http://jsfiddle.net/wRRZk/3/, however this doesn't solve the problem that jquerymobile render fail when changing KO model dynamically, as shown in http://jsfiddle.net/wRRZk/4/
I think you'll need to tell jQueryMobile to create those elements into the jQM enhanced version using the API. Check here :: http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html and look halfway down for "Enhancing new markup" and the section just below.
As for the create/refresh ... might need to be somewhat judicious in know when and where you're adding new stuff, and whether a create or refresh is needed.
I've done a new version of the jsFiddle here :: http://jsfiddle.net/wRRZk/5/.
I'm also removing from the model afterwards, which does seem to remove the links too, BUT, I think that may also be because the jQM enhancement is keeping the same anchor, thus the reference knockout as is still valid.
Not too sure how well that will work for the other enhancements done by jQM.
I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});