I'm trying to produce a lightbox when a user clicks a link. I'm using this light box code here. I'm working with this jsbin.
I have this code here:
<button ng-click="add_overlay()">Button</button>
<div class="lightbox" ng-lightbox='{"trigger": "manual"}' id="lightbox">
<h1>This is some content</h1>
</div>
I thought by adding in the ng-click to call the overlay it would display it on click but it doesn't seem to work. I'm never to angular so any help in general would be appreciated. How can I produce the lightbox on click?
First, add_overlay() isn't accessible to you outside of the ngLightbox directive, so Angular has no idea what that method is in the context of your ng-click.
You're also using two versions of the Angular source, 1.2.1 and 1.0.7.
If you look at the angular-lightbox source, you'll see an override-able defaults object, such that you can provide the element you wish the lightbox be applied to:
var defaults = {
'class_name': false,
'trigger': 'manual',
'element': element[0],
'kind': 'normal'
}
So, set up your button like this, specifying the intended element:
<button ng-lightbox='{"trigger": "manual", "element": "lightbox"}'>Button</button>
Here's a working demo.
Related
Want to get iziModal to work. As a beginner the documentation is a bit daunting.
It works fine, but I cannot pass the available options over to the script. The documentation for that is here under 'Data Attributes'.
This is my HTML code:
<div id="modal" data-iziModal-title="My Title">
<button data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-izimodal-open="#modal-iframe">iFrame</button>
</div>
And here the JS:
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
iframe: true,
iframeURL: "http://izimodal.marcelodolza.com"
});
All I want is for the popup to display the title attribute and by extension all other attributes, of course. The documentation says that "all options can be set via data-attrs."
You might notice that the iframeurl is set twice (in HTML and again in JS). Take it out in JS and it will stop working... just as another example of that issue.
Does anyone know this script and what I might have missed?
Got it.
The documentation is somewhat unclear. So here is the solution for anyone trying to figure this out too. The id in the div has to match with data of the following elements. To explain:
<div id="modal-iframe" data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-iziModal-title="My Title"></div>
<button data-izimodal-open="#modal-iframe">iFrame</button>
In the example the div id is set to "modal-iframe". To get the button to respond with all the options, the button references the ID with data-izimodal-open="#modal-iframe". If the names don't match, it won't work.
Important: all options must be set in the div. In the example you see *data-iziModal-title="My Title" set correctly. Thus if placed into the it will not work.
Hope this helps anyone having the same issue.
EDIT
To clarify further: the JS code is fine. No changes necessary for it to work. You may change it's options, of course. The options in the HTML will always have preference over the ones set in the JS.
I have created a sidebar custom directive. It's working properly as it loads on where it should. What isn't working properly are the tags. Their supposed behavior is that of a drowpdown, where when clicked they show their inner elements. It works properly when the code is pasted directly but not when the directive is called with the code inside the other html file. I took 2 screenshots to show the difference between using a class="page-sidebar" inside the file that contains the html code of the directive and using it on the "root" file:
It's pretty clear that several properties on the highlighted lines are not being applied on the first one.
Please help as I need this as a "partial" view to be used across several pages.
EDIT: Directive code:
app.directive('sidebar', function () {
return {
restrict: 'E',
templateUrl: "/app/views/sidebar.html"
};
});
EDIT2:
Adding this in the post because it might be confusing from how I explained it:
I see where the confusion might be but they're different things. < sidebar > is a directive created by me. class="page-sidebar" is from the template I'm using and is what formats everything to its place. I tried to insert the class="page-sidebar" into the directive to see if it would work, but they're different things.
EDIT3:
To clear up the confusion, I hope: both pics show the sidebar is working. I know it's an element and as such I'm using < sidebar >, it's working, this is not the problem. The problem is when I use it, the contents such as Dropdowns (as shown in the second pic) don't work when I click them, while when the element contents are simply pasted into the index.html and not in the sidebar.html, it works.
EDIT4:
Found the issue but still no solution. I changed some stuff up and instead of the sidebar it's now on the widgets. Sidebar is now always loaded and it's the page contents which are loaded depending on the URL. This helped me track down the issue:
$(".owl-carousel").owlCarousel({mouseDrag: false, touchDrag: true, slideSpeed: 300, paginationSpeed: 400, singleItem: true, navigation: false,autoPlay: true});
The previous code is in a plugins.js file which is included in the html. For some reason, this line is NOT being run when the page is loaded. When I ran this line in the chrome console, the proper widget appeared.
For some reason, the js contents are not being run when the page loads.
Your main problem is the restrict: 'E',, which is restricting it to elements. This explains why it works for <sidebar>, but not for <div class="sidebar">. If you want to use classes, you need to change it to restrict: 'C'.
Another problem is that when you are trying to use the directive as a class, you are using class="page-sidebar" rather than class="sidebar".
See the docs for directives.
From angular documentation:
The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches comment
These restrictions can all be combined as needed:
'AEC' - matches either attribute or element or class name
The directive definition object for your sidebar quite clearly states that it will treat a DOM node with the tag name sidebar to render the directive template due to the restrict : 'E' property.
So use the directive as an HTML node, and NOT in a class (as it would require the property restrict to be set to C letter).
<sidebar></sidebar>
I have a basic md-button with a md-tooltip inside. Although, I require a way to globally remove all tooltips from my website if the user is on a mobile device.
<md-button class="md-primary md-raised">
Hello
<md-tooltip>This is a buttons tooltip</md-tooltip>
</md-button>
After the template is loaded and directives have run, the above gets converted into the following:
<button class="md-primary md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Hello">
<span class="ng-scope">
Hello
</span>
<div class="md-ripple-container"></div>
</button>
There button element no longer contains the md-tooltip, otherwise I'd simply just remove the tooltip element.
The reason for wanting to do this is because on mobile, the md-tooltip eats the button click. Therefore having the tooltip displayed on the first click and the buttons click action on the second click. This is definitely not a desirable effect.
How can I remove all tooltips from all elements on my page so that my buttons click action is the first click/tap instead of the second?
Ok, so I've successfully implemented my suggestions earlier, here's the DEMO
I created another version of md-tooltip just to override angular material's version of it. Then I created an angular.decorator to choose which directive version of md-tooltip will angular use.
app.directive('mdTooltip', function(){ //create your overriding directive
return{
replace: true,
template: '<span style="display:none"></span>',
scope: {}, //create an isolated scope
link: function(scope, element){
element.remove();
scope.$destroy();
}
};
});
app.decorator('mdTooltipDirective',function($delegate){
var version = 0;
var onMobile = false;//do your checking here
if(onMobile) //here comes the switching
version = 1;
return [$delegate[version]];
});
the Directive word in mdTooltipDirective is important, to say to angular that we want to select it for the Directive not a service.
EDIT: I added a link function and removed the element that is placed by the overriding directive
I don't see any mention on their docs on how to do this.
There are two ways that I can think of to work around this.
display: none all <md-tooltip> if your on a mobile device.
override the mdTooltip directive then conditionally $compile the original md-tooltip or a blank one (if you are on a mobile)
HTML
<md-tooltip md-direction="bottom" class="tooltip">Tooltip Bottom</md-tooltip>
CSS
#media(max-width:599px) {
md-tooltip.tooltip {
display: none !important;
}
}
As per this issue, the md-tooltip is the buggy code.
In that case, I suggest you show the tooltip code based on the condition, i.e. only display the content if you are in a web browser.
For this task, you can use the ng-device-detector lib:
I got a problem in Meteor.
I want to show and hide a part of a template when I click a button (Like revealing a answer to a question e.g).
The problem is that this part of the template is created dynamically and I just want to reveal the answer that is correlated to the button. so you cant just have a template helper, that needs to return "true" to show the answer, because then on a button click every answer is revealed.
<template name="cardList">
{{#each card}}
<div class="card">
<h3>{{frontsideText}}</h3>
<p class="answer">{{backsideText}}</p>
<button class="btn btn-danger deleteButton">delete</button>
<button class="btn btn-default showButton">show Answer</button>
</div>
{{/each}}
</template>
I tried it with jQuery, which worked kind of. something like:
Meteor.startup(function () {
$(".answer").hide();
}
Template.cardList.events({
"click .showButton": function(event) {
$(event.target).prevAll(".answer").first().show();
}
But this doesnt work, because then every new added Question or whatever has the answer revealed, because they are just hidden on startup. I guess I need to put the hide() function somewhere else, but I dont know where.
And is there a way to solve this problem with just Meteor and no jQuery?
There are numerous ways to do this, here are two:
1. Using meteor
You could make a new template called card, put it in the {{#each card}} and use the following event. This will hide the answer whenever a new card is rendered.
Template.card.rendered = function(){
this.$("p.answer").hide();
};
2. Changing your snippet to work with JQuery
The problem is you're hiding your element the wrong way. You shouldn't hide it with js, but with css. That way it's hidden by default.
.card p.answer{
display: none;
}
Either way would make your click event code work. Personally I'd combine the options I suggested: Make a template for the cards (it's cleaner/easier to work on nicely contained templates) and adjust the css so it is hidden by default.
Let me know if you have any other questions
I'm using nanoscroller.js and tiptip.js , although for my question I'm not sure specific libraries matter that much (but they may).
I have a working tool tip, I have a working scrollbar. When used seperately.
My goal is to have a working custom scrollbar inside the tooltip.
HTML:
<a class="tooltip">Open tooltip</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="nano">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
</div>
JS:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();
First thing I noticed about the above: With this arrangement the nanoscroller was only applied to the first set of html, not the set that is in the tooltip.
So I then applied the scrollbar first before grabbing the html and adding it to the tooltip, this applied the scrollbar to the tooltip but it wasn't functional.
Tried a lot of different approaches here (applying the scrollbar to every id that matched, different order of when to call which, etc), and I'm definitely stuck. Any help is appreciated, thanks!
Without having used either of those libraries, my guess is that what tiptip does is create a copy of the DOM node, and that nanoScroller saves some reference to the node to which it is applied.
Combined, these these two behaviors could cause what you're seeing: $(#mail-content.nano) will always point to the original HTML, and if you copy the HTML after adding the scroller, the scrollbar may still be trying to scroll the original node.
Therefore, you may want to try adding nanoScroller after the tipTip is created. Something like this (untested):
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({
activation: 'click',
maxWidth: "230px",
defaultPosition: "bottom",
keepAlive: true,
content: tip_html,
enter: function () {
$(this).find("div.nano").nanoScroller();
}
});
This uses the enter property of tipTip to add a function that's executed when the tip is opened, which then adds the nanoScroller to the new DOM elements.