I want the search form hide on init, scroll down to show. But when I used on-pulling on ion-refresher,it didn't work.
code:
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()" on-pulling="showSearch()"></ion-refresher>
Check this may help you...
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="loadTransactionList()"
refreshing-text="Refreshing!">
</ion-refresher>
The controller method is:
$scope.loadTransactionList = function(){
console.log("Refresh called");
$scope.$broadcast('scroll.refreshComplete');
}
Related
When I click the keyboard and it opens op, the keyboard first finishes the animation. Then the view is resized. This causes for lag when the view scrolls to the field.
I have tried fixing it this way:
this.keyboard.onKeyboardWillShow().then(() => {
this.content.scrollToBottom();
});
But because the view is not yet resized, it does not scroll. How can I fix this? The app doesn't feel native at all without this.
The solution I found for this is as follows.
I created a wrapper within my <ion-content>:
<ion-content>
<div id="wrapper"></div>
</ion-content>
And styled it this way:
#wrapper{
height: 100%;
margin-bottom: 200px; /* it is best to get the keyboard height here from `onKeyboardWillShow()` */
}
Then in ts I did this:
this.keyboard.setResizeMode(KeyboardResizeMode.None);
this.keyboard.onKeyboardWillShow().subscribe(() => {
this.content.scrollToBottom();
});
this.keyboard.onKeyboardWillHide().subscribe(() => {
this.content.scrollToTop(500);
});
Works just like I want it. But I am still open to better answers.
This spinner option from ionic is spinning all the time Like here
<ion-spinner icon="spiral"></ion-spinner>
How to make the spinner spin only after user presses the button, not before!?
You can try this also inside your controller
$scope.show = function() {
$ionicLoading.show({
template: '<p>Loading...</p><ion-spinner icon="android"></ion-spinner>'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
You can call $scope.show($ionicLoading); to start the spinners and you can make it end with this $ionicLoading.hide();
of course you have to inject $ionicLoading in your controller.
It worked for me hope it will help you
You can simply show and hide ion-spinner directive. In the codepen link you can change the button part and paste this:
<button type="submit" ng-click="click()" class="button button-block button-positive">
<ion-spinner ng-hide="showing" class="spinner-energized"></ion-spinner>
<span class="button-text">Click me!</span>
</button>
and add to MainCtrl
$scope.showing = true;
$scope.click = function(){
$scope.showing = false;
}
so when you press the button spinner will show. Of course you need some logic to stop it but this is just to show you how you can handle this. Hope it helps.
HTML
<button ng-Click="someFunction()"></button>
Controller
$scope.someFunction = function(){
$ionicLoading.show({
noBackdrop :false,
template: ' <ion-spinner icon="spiral"></ion-spinner>',
duration :20000//Optional
});
//Do Something
$ionicLoading.hide();//Hide it after Something is completed
}
It will show spinner as soon as you press button .
Regards
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
I'm struggling with plugging in the correct selector into jquery. When I plug in ".accordionButton" the entire div is clickable and the functionality works great. However, I want to make only the "h3.toggle a" clickable, but plugging that selector in doesn't work. Is there something else in the jquery I need to change here? Any advice is greatly appreciated. Thanks!
The HTML:
<div class="accordionButton">
<div class="case-top">
<div class="case-left"></div>
<div class="case-right">
<h3 class="toggle">Our Strategy and Results</h3>
</div>
</div><!--end case-top-->
</div><!--end button-->
<div class="accordionContent">sliding content here</div>
The JQUERY:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton h3.toggle a').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
You are using
$(this)
but you change the selector, you need to change all $(this) selectors to
$('.accordionButton')
FIDDLE
Ok, here is where I'm at... the buttons are now working correctly, but on click all the instances of .accordionContent open, not just next one. ( FYI, I removed the mouseover from this code snipped)
Jquery
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.accordionButton').next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON (correct)
$(this).addClass('on');
//OPEN THE SLIDE
$('.accordionButton').next().slideDown('normal');
}
});
I'm guessing the lines:
$('.accordionButton').next().slideDown('normal');
and
if($('.accordionButton').next().is(':hidden') == true) {
are the lines which need editing. I need these two lines to open and close just the "next" .accordionContent instances not all of the instances together.
I am a beginner in jQuery and JavaScript. I have the following problem: Every time I try to open an div area it is immediately collapsing. The HTML is:
<ul class="information"><li><a class="opener" href="#">opener</a> <div class="slide-block"> ...
The JavaScript:
jQuery(".information .opener").on("click", function(event){
var opener = jQuery(this);
// Show/hide the content by toggling active class
opener.parent().find(".slide-block").slideToggle("fast",function(){
opener.parent().toggleClass("active");
});
// Return false to subdue the click
return false;
});
In think it has to do with an upgrade of jQuery...
Thanks in advance
Julius