I'm using AdminLTE theme (Bootstrap). I have some custom elements on the sidebar. I want to hide them when the sidebar is collapsed. Is there some specific class to do that?
You can use the collapse event like this:
$(document).on('expanded.pushMenu', function () {
$('.your-special-element').show();
}).on('collapsed.pushMenu', function(){
$('.your-special-element').hide();
});
Instead of show and hide it looks nicer if you use fadeOut and fadeIn
Related
referred to this link:
Hide footer on keyboard open Ionic3
But then also issue is the same
Issue is same as in above image.... I have just added button in footer...
.html file
<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>
<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>
So, When click on textarea, keyboard opens and the buttons appears to be above the keyboard.
I want whenever the keyboard opens.....the footer get hide.
IONIC 4
Step:1 You need to install native keyboard plugin for using keyboard methods. You can install it from here.
Step:2 Then import it in your page.ts file like this
import { Keyboard } from '#ionic-native/keyboard/ngx';
Step:3 Then put it in the providers under #Component as
#Component({
providers: [Keyboard]
})
Step:4 After that , make a constructor for keyboard in your class in constructor section. Repeat same step 2-4 in your app.component.ts file
constructor(public keyboard:Keyboard) {
}
Step:5 Then take a variable to default hide keyboard on load of the page as in your class:
isKeyboardHide=true;
Step:6 After that, all you need to call default methods of keyboard in ionWillEnter method and on show put the variable value as false for showing keyboard.
ionViewWillEnter() {
this.keyboard.onKeyboardWillShow().subscribe(()=>{
this.isKeyboardHide=false;
// console.log('SHOWK');
});
this.keyboard.onKeyboardWillHide().subscribe(()=>{
this.isKeyboardHide=true;
// console.log('HIDEK');
});
}
Step:7 Hide and show bottom div or footer accordingly.
//// FOR DIV BOTTOM DIV////
<div class="" *ngIf="isKeyboardHide">
</div>
//// OR FOR FOOTER ////
<ion-content></ion-content>
<ion-footer *ngIf="isKeyboardHide">
</ion-footer>
The best solution is use 'inVisible' property to hide footer or div.
for example:
<ion-footer *ngIf="!keyboard.isVisible">
I am footer!
</ion-footer>
When a user scrolls through a webpage, how can I trigger animate css?
Is it a matter of when v-show="element" appears, trigger x?
Using Vue 2 + animate css
I found answer from Ikbel useful
How to display and transition when scroll position reaches element position in the screen?
you can achive this with custom directive which adds binding inViewport for window scroll event to elements that you want to animate.
I added data-transition to html element that I want to animate
<div v-vpshow data-transition="flipInX"><div>
and changed binding like this
el.$onScroll = function() {
if (binding.def.inViewport(el)) {
el.classList.add('animated')
el.classList.add(el.getAttribute('data-transition'))
el.classList.remove('before-enter')
binding.def.unbind(el, binding)
}
}
I have just started with Dojo widgets. Recently, I did this Dijit Horizontal Slider Sample,and I have been wondering how to make a tooltip follow the slider handle with the current slider value as the tooltip content.
I have tried the same but am facing two issues:
One, the tooltip appears at the end of the slider rather than constantly hovering on the slider handle.
Two, the tooltip displays a value only when I stop sliding rather than changing seamlessly.
How to overcome these?
If you want the tooltip to move with the slider, you have to find a way to open it from the slider handle, not from the entire horizontal slider widget. I do not know if the actual slider you move with the mouse is it's own widget or not. From the declarative sample online the HTML for the handle looks like this
<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div>
So you can try something like the following, if you can get a reference to the sliderHandle object.
/*
* Create the tooltip dialog that you want to show (I use tooltip dialog,
* but you can do the same with basic tooltip)
*/
var myTooltipDialogbase = new ttdialog({
id: 'myTooltipDialogBase',
style: "width: 275px;"
});
Then in your event handler (in this example right mouse click) you open the popup
/**
* On right mouse click, opens the tooltip dialog
*/
on(sliderHandle, 'contextmenu', function (event) {
popup.open({
parent: sliderHandle,
popup: myTooltipDialogbase,
around: sliderHandle.domNode
});
});
EDIT:
For your second question, you can use the slider property onChange() to do something each time the value of the slider changes. You must set intermediateChanges=true so onChange is called when sliding. In your case, in onChange(), if you can get a reference to the tooltip, then change the value of one of the tooltip objects for every value change of the slider.
Please see my fiddle below:
https://jsfiddle.net/okiewardoyo/s23v891m/11/
.affix {
top: 0;
}
To make the screen wider, scroll your screen.
What I want is, if I scroll, the sidebar become fixed when scrolling reach the bottom of header.
Then, when I scroll and reach the footer, the sidebar is not fixed and it follows the footer.
You will need to add an offset to the content class, and remove it again using jQuery.
Add the id 'content' to your content div. Then add the following jQuery script:
$('.sidebar').on('affix.bs.affix', function() {
$('#content').addClass('col-sm-offset-3');
}).on('affix-top.bs.affix', function(){
$('#content').removeClass('col-sm-offset-3');
});
You can test this here: https://jsfiddle.net/TimOgilvy/s23v891m/16/
Note I added a clearfix to the header.
How to Expand and Collapse the Bootstrap accordion panel as user choice means if i expand A collapsible panel and after that expand B collapsible panel then A should not collapse. If use want to collapse it then can do by click on the symbol.
you can do this by having different parents for each collapse
data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"
second one
data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"
bootstrap only detects the parent to hide previously opened collapse.
Requirement 1 : To Expand and Collapse the Bootstrap accordion panel as user choice not to auto close, please use the below code.
1) data-parent="#accordian"
Note : will work for auto close of expanded panel while click on another.
2) data-parent="#proposalAccordian"
Note : will work to stop auto close of accordion panel while click on another.
Requirement 2 : Adding (-) and (+) symbol while expand and collapse.
1) Add the following code in the appropriate place . Please refer the attached file to do this .
2) Also add the following javascript code in the header.
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});