History and Home page are work fine but 'ng-click="toggleMenu()"' are not working so please help me
click event ng-click="toggleMenu()"is not working..
can anyone help me to solve it?
My code is,
<ion-tab title="History" icon-off="ion-document" icon-on="ion-document-text" href="#/tab/history">
<ion-nav-view name="tab-history"></ion-nav-view>
</ion-tab>
<a class="button" ng-click="toggleMenu()">More</a>
.controller('MoreCtrl', function($scope,$ionicSideMenuDelegate) {
$scope.toggleMenu = function()
{
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
};
})
I think controller are not required here . can you try this way.
<ion-tab title="More" icon-off="ion-ios-more-outline" icon-on="ion-ios-more" ng-click="toggleMenu()">
</ion-tab>
</ion-tabs>
.run(function($ionicPlatform,$state,$rootScope,$ionicActionSheet,$ionicSideMenuDelegate) {
$rootScope.toggleMenu = function() {
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
}
})
check this question please Ionic framework ion tabs not firing event
more information this link for demo
http://codepen.io/cfjedimaster/pen/iplCx
Please add your full html code. Have you correctly attached MoreCtrl to the DOM? Is your DOM in line with Ionic guidelines for $ionicSideMenuDelegate? I don't see the <ion-side-menus> tag for example, like below:
<body ng-controller="MoreCtrl">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleRightSideMenu()">
Toggle Right Side Menu
</button>
</ion-side-menu-content>
</ion-side-menus>
</body>
Related
I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss
Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?
So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).
I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.
It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.
Any ideas?
Similar issues
Appearing around the internet are this issue report and this Stackoverflow question.
my-element.html
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
This is my solution:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
Special Note: This answer applies to those trying to implement a <paper-dialog modal> element inside a header element. Specifically, inside <paper-drawer-panel>.
Answer:
On this bug report rubenstolk provides a hack-fix as follows:
To implement #dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s
I have tested it and verifies that it works. So for now, that solves it. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.
It wasn't quite clear from the screenshot, but the problem is your modal dialog appears behind the <paper-drawer-panel>, yes?
If so, I believe the solution is the same here: just place the dialog or custom element containing the dialog outside of the <paper-drawer-panel>, e.g.:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
Here is a screenshot illustrating this:
I'm very new to using ionic/AngularJS and I was wondering how exactly to use ionic.Platform to print the current device. Right now I have
var currentPlatform = ionic.Platform.platform();
in my main.html ctrl. Is there a way to send it to the html page, or am I approaching it completely wrong?
from your controller data send to view use application model $scope , means just assign your variable to scope variable and get it directly where you call your controller in view.
Example :
angular.module('scopeExample', ['ionic'])
.controller('MyController', ['$scope', function($scope) {
var currentPlatform = ionic.Platform.platform();
$scope.currentPlatform = currentPlatform;
}]);
and in view you access
<body ng-app="scopeExample">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MyController">
{{currentPlatform }}
</ion-content>
</ion-pane>
</body>
For more details refer following links :
link1,link2 & link3 etc.
Hopes this will help you.
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
Fixed thanks to helpers below, see it in action here: http://bit.ly/15npgSC
I am learning jQuery and have come across a problem which I cannot find a fix for. I have a content slider which when a button is clicked, it slides open, and when the button is clicked again, it closes. This is all fine, the problem I have is that the slider opens automatically when the page loads, not only when clicked. How can I keep it closed when the page loads and have it only open when clicked? It works fine afterwards, its just that as the page loads, it opens. I tried putting $(document).click(function() { at the start which kind of worked but then when clicked it would open and then close immediately after opening with no click. I changed back to the jQuery code below but now have the problem of it opening when the page loads again.
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}).click();
});
If you are able to fix this problem, could you explain why this occurs with my current code and why the fix stops that happening please?
Thanks, Rafa.
Sorry for not posting the HTML code before, but this is it:
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<div>
<p class="slide">Click to open!</p>
</div>
Because you did not post any HTML so I guess '.pull-me' is an 'a' element.
Pls try below code(remove .click()):
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}); // modified here
});
You are triggering click event when the page first load.
Try this:
// HTML
<div class="pull-me">
Click here!
</div>
<div class="panel">
show/hide
</div>
// jQuery
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to open!");},
function() { $(this).html("Click to close!");
});
});
check here in this JsFiddle -> http://jsfiddle.net/GXCuz/1/