I have a bunch of icons stored as strings. I am working on a directive to add these basic icons to the DOM, with a few options for manipulation - adding an outline shape, adding/removing fills and strokes, etc. My directive $observes the element's attributes, updates the scope accordingly. I am using ng-bind-html inside the template to render the icons. I'm fairly new to Angular, and this is the most complex issue I've had to solve thus far. I'm using compile like so:
$compile(icon)(scope, function(e,s){
var svg = d3.select(e).append("circle").attr("r","20");
...
})[0].outerHTML)
Am I on the right track?
JsFiddle Example
Related
I have html of slider with with js and css in working condition, now i have to implement Joomla banners in that slider is it possible or right way ? if not than guide me how to do this or another method
Yes, is possible. In this case you need add your custom code in your template, and the custom code via override.
First try to add the HTML and content for example in one Custom HTML module for test:
Adding JavaScript and CSS to the page (add the css in your main css file)https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
By default the component banners has a single call at the same time, you'll have to modify the php code and include, for example a cycle to recover more banners or similar.
Here you can find more info:
Understanding Output Overrides.
Create an override.
I'm trying to use angular ui router with core-animated-pages. Right now I'm stuck because if I include the ui-views inside the sections of a core-animated-pages element, and all of that is inside a <template is="auto-binding"> element, then the transition works but angular does not fill the ui-views. I think it because the template makes it all part of the shadow dom.
Here's a plunkr: http://plnkr.co/edit/tYyuKLO1O5JQVtpNg9Th?p=preview
Thanks.
I was wrong - you don't have to use template.
And here's how you do it!
https://github.com/morgs32/angular-polymer
I am working on a responsive website. My site uses Bootstrap 3.1 and AngularJS. Bootstrap has a class called "visible-xs". This class basically says let something be visible on small screens and hidden on larger screens. It does this by changing the CSS display property value between none and block. Currently, I have a div that looks like the following:
<span id="smallContent" class="visible-xs">Mobile Content</span>
I need to do some stuff programmatically in my controller when smallContent changes from visible to hidden and vice-versa. My question is, how do I watch for changes on the display property of smallContent? I've noticed the $watch method on the scope (http://docs.angularjs.org/api/ng/type/$rootScope.Scope). However, this seems to watch for changes to a property in the scope, not for changes to a property in the DOM.
Is there a way to do what I'm trying? If so, how?
Thank you!
You don't need javascript watchers to do what you want. You can, but it would be kind of hacky and potentially bad on performance.
Another point is that "responsiveness" should be handled (a maximum) by HTML/CSS only. If you start having JS different for each resolutions, it's no good.
What you could do :
<span id="smallContent" class="visible-xs">Mobile Content</span>
<span id="smallContent" class="hidden-xs">Not Mobile Content</span>
Keep in mind that you can also simulate media-query in JS with Modernizr :
if (Modernizr.mq('only all and (min-width: 768px)') ) {
}
That can be usefull (you can alos add this to a watcher but, well my answer was primarily CSS-based and you should stick to CSS solutions when possible)
Here's a simple Plunkr that animates the insertion of items in a list. This uses -webkit-transform to scale insertions from scale(0) to scale(1). Switching the ng-animate="'insert'" to ng-animate="'fader'" will use Javascript animation to insert the items.
But: I'd like to be able to use CSS keyframe animation here instead. The last entry in the list is hard-coded and uses the "float-enter-start" class. I cannot seem to make ng-animate apply this class correctly. It seems like setting ng-animate="''float" should work, but it doesn't. What am I missing?
The reason why your CSS animation code isn't working is because it's using CSS3-Animations and not transitions. Right now AngularJS ngAnimate does not yet support detecting CSS animation- properties (only transition). There is a request to get this fixed this week and it I plan on doing it between Monday and Friday of this week coming up.
In the meantime if you wish to still support this then you can get this to work using a JavaScript animation with nothing inside the function body. All you do is call the done() method after XXXX milliseconds of your CSS animation. Then in your CSS code (since ngAnimate still adds the CSS classes to the element) you can use the same CSS animation code, but just use that total duration inside of the function body inside of a set timeout.
Here's the code for that. Just include your CSS code from before to do the actual animation.
https://gist.github.com/matsko/5426873
Hi I was using the mobile map demo here: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps
and I was trying to add a toolbar at the bottom of the map page. It works, but then the map quickly covers it up. After looking at the DOM it looks like the toolbar gets added within the map div.
Is there a way to make it appear on top of the map rather than underneath? This code is all contained in the Application.js file.
var maps = test.page.Maps.getInstance();
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
maps
]);
maps.show();
var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
maps.add(toolbar);
Thanks for the help!
With maps.add(toolbar) you're adding the toolbar to the map, that's why it is added to the map div. I guess you have to go through the page.Manager to add separate elements to the GUI. You might want to revise the mobile tutorial which achieves exactly that, also including a widget derived from NavigationPage like in the maps showcase.
have a look at:
https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
There are several important things in this example.
The methods "_createContent" and "_createScrollContainer()" are overridden.
A NavigationPage creates by default an iScroll container where you can put all widgets into.
But the OpenLayer div is not a qooxdoo widget, of course. It has its own scrolling logic.
That is why, you have to overwrite these methods. Much of the styling of OpenLayer can not be changed. The OpenLayer overlays all contents because its has an absolute positioning.
But there is a solution:
Use this method in initalize() method
this.addAfterNavigationBar(widget);
Assign a CSS class to your widget through
widget.addCssClass("your-class")
Change your "styles.css" in resource folder:
.your-class {
z-index: 5000;
position: absolute;
}
Greetz Christopher