Directive on ready function should only execute once - javascript

Hi Experts I have a directive 'my-table' in which there is a button for edit record.
Inside directive template (html file) I have a button
<a data-activates="editScreen" class="button-collapse">Edit
</a>
Inside JS file
angular.element(document).ready(function () {
$('.button-collapse').sideNav({
menuWidth: 450,
edge: 'right',
closeOnClick: true
});
})
I want to initialize sideNav on document ready function
Problem is this directive call in loop and every time directive called this code execute that will create problem. (So many Backdrop classes in view that will not let side nav close as expected)
I want this code to execute only once.
How can I solve this issue.
Thanks in Advance

Just use a true directive, something like this :
angular.module('[moduleName]').directive('buttonCollapse', function(){
return{
restrict:'C',
link:function(scope, element, attrs){
$(element).sideNav({
menuWidth: 450,
edge: 'right',
closeOnClick: true
});
}
}
})

Related

Javascript not working on more loaded content

I have this script where it adds some effects on my items listed.
$(document).ready(function(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators')
.popup({
boundary: '.ui.card.work',
});
})
However, when I click
= link_to_next_page #works, 'Load more...', params: params, :remote => true, id:'view_more', class: 'fluid ui basic button'
load more button coded above, javascript i mentioned above is not working on loaded items...
How could I fix this...?
Thank you for you time!
The problem is that you're calling the "effects" script only on document.ready you need to call it when you add an item as well.
These are the steps you should take:
First make a "wrapper" function that does the "effects"
function card_effects(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators').popup({
boundary: '.ui.card.work',
});
}
Then call it where you want the "effects" to happen.
$(function(){ // jQuery document.ready shorthand
card_effects();
});
function that_adds_new_items(){
/***functions-code***/
card_effects();
}

Re-apply JQuery in Meteor template

I have a template with a slick carousel, depending on some JQuery. I add this code to the template as follows:
Template.show_house.rendered = function () {
$('#carousel').slick({
dots: true,
arrows: true
});
};
This template depends on a helper:
Template.show_house.helpers({
house : function() {
return Houses.findOne({_id : Session.get("selectedHouse")});
},
...
When the session changes (user clicking on another item), the data in the template changes, but the JQuery isn't applied again, and the images are just shown as a list rather than a carousel.
I've been playing around with UI.render, but to no avail. What can I do?
I had the same problem, the things for is that i wasnt applying the event Template.foo.rendered to the specific template. Try to apply the jquery event on "rendered" to the proper template and see if it works!

How to autostart nanoGallery?

I have an image gallery that is displayed using
nanogallery js plugin
And I need to autostart it when page is loaded.
My Code
<script>
function myThumbnailDisplayEffect($elt, item, eltNumber) {
$elt.css({'transform-origin': 'top right', 'rotate': '10deg', 'top':'-30px'});
$elt.delay(eltNumber*30).transition({ 'rotate': '0deg', 'opacity':'1', top:'0px'},700);
$elt.find('.nanoGalleryThumbnailContainer').click();
}
function loadGallery(){
jQuery("#gallery").nanoGallery({thumbnailLabel:{display:false},
colorSchemeViewer:'light',
viewer:{display:false},
thumbnailHoverEffect:'imageOpacity50',
thumbnailWidth: 200,
thumbnailHeight: 133,
lazyBuild:'loadData',
thumbnailLazyLoad:true,
fnThumbnailDisplayEffect:myThumbnailDisplayEffect
});
}
$(document).ready(loadGallery());
</script>
How to do that...?
Thanks in advance for any help!
you can simulate a click event on the first element. you will need to add an ID or Class or data attribute to the div that holds the first image and then using jquery you can do this:
var firstElement = $('.nanoGalleryContainer').children()[0];
$(firstElement).trigger('mouseenter').trigger('click');
You could use deep linking to implement this using URL parameters.
For example: http://nanogallery.brisbois.fr/nanogallery_demo3.html#nanogallery/nanoGalleryExample/5870136791457517345/5871255268929586546
To enable this feature, you have to set the plugin parameter locationHash to true.
More examples: http://nanogallery.brisbois.fr/nanogallery_demo3.html

Popover content not working with angularjs ng-click

I have already read all the posts about this, but unfortunately none of them was helpful: jsfiddle and plunker links appear to be no longer working.
What I am trying to do is to simply put a button inside the bootstrap pop-over which makes a call to a function inside the scope of the directive I've created. The problem is that using jquery to grab the content it does not work since the scope appear to be outside. Also trying to create the content inside the function it won't work because it will be not compiled.
I created an example on jsfiddle, but somehow angularjs is not loaded in the right point and therefore it doesn't work either.
$("#pop-over-link").popover({
'placement': 'top',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $("#pop-over-content").html();
}
});
This is the piece of code that opens the pop over, grabs the contents and shows it.
Here the jsfiddle: http://jsfiddle.net/75zLT/2/
And here is the working example on my dropbox: https://dl.dropboxusercontent.com/u/19470623/hatethis/test.html
There were 2 issues your were not including ngRoute in your fiddle and your need to compile the content returned in the popover.
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
Also you do not need the timeout.
Example: Plunker

How to get AlloyUI modal body to render properly when initialized as visible: false?

I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.

Categories

Resources