I have a page where I plan on having multiple modals that can be opened. The first one works fine, I link to it in several places on the page. When I added the second one though upon clicking it all I get it a darkened screen. The modal doesn't show up.
I read through everything I could find both here and on materialize website. Tried a few things like adding multiple triggers to init.js:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger1').leanModal();
});
Nut that didn't do anything. Tried calling it as a js function under onclick instead of through the href tag and class, but its the same.
Any ideas?
Try to place the modals just below the calling button, it may work. I've gone through it a lot of times. So go through it once, if it still create a problem please let me know. And please post the modal code also.
When I added the second one though upon clicking it all I get it a darkened screen
It's mean that it could not get the id of second modal.
Related
I have <router-outlet [routes]="Routes.all"></router-outlet> set in my app component. I have a page with links at the bottom of the page. If a user clicks a link I want them to be taken to the top of the new page.
If I use RouterLink the current scroll position is retained so the user lands in the middle of the new page.
<a [routerLink]="RoutePaths.featurePage.toUrl()">...</a>
If I use a regular HTML link, I get the behavior I want, the user lands at the top of the new page.
...
What I really don't get is how they can respond differently yet compile to the exact same HTML code.
<a class="_ngcontent-zbb-0" href="/feature-page">...</a>
What am I missing here?
I understand regular non-Dart Angular has something called scrollPositionRestoration but it doesn't seem to exist for AngularDart.
The answer is really a hack to return the scroll position by utilizing the
window.scrollTo(x,y) function.
This issue was raised in here in regular angular
Equivalent to autoscroll=true: automatic scroll to top when route changes
remmeber to import dart:html
I'm building an app to manage some users, where i have a page to list them. On each user i have some buttons to make some actions on them, like edit them or delete them.
When the delete button is pressed, i would like to have a modal to show up and ask if you really wawnt to delete the user. As i may be using this modal in other places, i thought i should make it kind of generic to receive the different messages i want to show, so i built a component for it.
I've searched through some examples, but i couldn't find one similar to mine.
I've made the template for the modal and the component to back it up, but i don't know how to show it, for example, on a button click.
Any help is appretiated :)
Thanks
EDIT: i'm trying to use bootstrap modals
use bootbox instead of making a modal from scratch. they can be perfectly used for delete confirm or alerts. I use them. http://bootboxjs.com/. It is also available for angularjs.
I am trying to create a new page from an existing page with a back button. I have recreated the issue here in a plunkr. In the trip analytics option When I click the first card i.e. Enter Home address. I want the todayDetail .html page to come up with a back button. I have already tried two approaches
First approach The ng-click approach. In which I give $state.go(statename) to give that page. But then I wouldn't get a back button as the navigation stack is changed.
Second approach - If I keep the navigation stack i.e. keep the state name as initial.trips.today.todayDetail. The page doesn't load at all.
What is the issue? How should I go about it?
I'm creating a contact form, which I want to be pop out (and greyed) and wanted to know if fancybox could be used for this purpose. I currently use it for images but curious to see if it could work for this purpose.
You can use fancy box for a form.
You might have to make some changes to the plugin to get it work though
you can see how to do it here
Based on your comment: There are a few ways to get that done:-)
One way, is to have multiple divs within the form. Make the next button hide one div and show another in the modal. This can be done as many times as you need to do it within the same modal. Then when the form is complete, you can have a submit button now instead of a next or previous button.
Here is my problem:
I have successfully included the Facebook Like button on my test page. There are several items per page and there is a facebook like button per item. I am using the XFBML version.
Everything runs fine if the buttons are present in the page on load. However, Now I want to show the buttons per item only on mouseover on the container element having the item and the button.So, the fblike button html is hidden on page load and I added some code like this to show them on mouse-hover:
$(content).mouseenter(function(){
$(this).find('.fblike').show(); // toggle the display of the button
FB.XFBML.parse( this ); //re-parse xfbml
});
The button shows up perfectly on mouse-hover on the container now but never works. Clicking the button doesn't do anything.
Has anyone run across this problem before ?
EDIT:
.fblike is a class on a div containing the fb:like tag.
Re-parsing is required because on page-load, each div with the class .fblike is hidden. The Facebook JavaScript SDK doesn't parse the xfbml tags inside elements which are hidden.
I think you problem is in this variable scope. Try this:
FB.XFBML.parse($(this));
Because you don't need this (anonymous function being called) but element (on which this anonymous function was called).