It seems a very z-index issue, but I am not able to get a solution.
I am trying to get an element in ion-view to come above $ionicBackdrop.
Example Pen: http://codepen.io/ankitjain11/pen/grwZav
JS:
angular.module('myApp', ['ionic'])
.controller('IonicBackdropCtrl', function($scope, $ionicBackdrop, $timeout) {
$scope.show = function() {
$scope.back = true;
$ionicBackdrop.retain();
};
$scope.hide = function () {
$scope.back = false;
$ionicBackdrop.release();
}
});
HTML:
<body ng-controller="IonicBackdropCtrl">
<ion-view>
<ion-content>
<button class="button" ng-click="show()">
Show Backdrop
</button>
<button class="button" ng-click="hide()" ng-show="back">
Hide Backdrop
</button>
</ion-content>
</ion-view>
</body>
Here, the Hide Backdrop button, would come over the backdrop. Once, the backdrop is visible.
Though, my implementation is not as straight forward as the Pen, but still would serve my purpose.
Here is a discussion about same problem. And there is workaround for what you want as described in this discussion. Make the buttons direct child of body and then z-index changing would work. Look here http://codepen.io/anon/pen/EKNvrZ
Related
I created tab application and need to expand active tab but I'm not able to apply CSS under the shadow element like below.refrence
I want to give
Overflow : "visible" to .button-native inside shahow root
expected result.
Please help.
I got my respective example the beautiful tabs in ionic 5
https://github.com/rajneshbiz/ionic-custom-components/tree/master/ionic-v4-v5/tabs-custom-icon-floating-button
I created a recursive method and I called in the AfterViewInit hook..
setStyle() {
const all = document.querySelectorAll('.tab-has-icon');
if(all.length === 0) {
setTimeout(() => {
this.setStyle();
}, 0);
return;
}
all.forEach(el => {
el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')
});
}
I find 2 metods in SASS: you cant use pseudoelement ::part, this you can find in your button shadow
<button type="button" class="button-native" part="native"><span class="button-inner"><slot name="icon-only"></slot><slot name="start"></slot><slot></slot><slot name="end"></slot></span><ion-ripple-effect role="presentation" class="md hydrated"></ion-ripple-effect></button>
you can see part ion-button is "native" so your css can be:
ion-button::part(native){
overflow: visible!important;}
and in javascript you can access to shadown element like:
document.querySelector("ion-button")
.shadowRoot
.querySelector(".button-native").setAttribute("style","overflow:visible")
In my project, I use a bootstrap popover to show a table which populates through knockout observableArray. My problem is, it shows popover correctly to 'hover' but not to the 'focus'
This is my anchor link which triggers the popover.
<a style="cursor: pointer; font-weight: 100" data-bind="event: { mousedown: TndTrainingRegisterAdmin.ShowSchedule } , attr: { id: 'schedule' + appId()}" data-toggle="popover" data-trigger="focus" data-placement="right" data-html="true"> View Schedule </a>
I tried removing data-trigger="focus" and adding only one side of the code. it also didn't work out. So it's not due to code repetitions.
This is the knockout model's side code.
var ctrlId = '#schedule' + rs.appId();
$(ctrlId).popover(
{
template: '<div class="popover" role="tooltip" style="width: 100%; max-width:600px"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>',
html: true,
content: function () {
return $('#divViewSchedule').html();
}
});
This is div code which contains the table.
<div id="divViewSchedule" class="hide">
#Html.Partial("~/Views/TrainingRegistration/_CourseSchedule.cshtml")
</div>
This popover works fine when I use data-trigger='hover' or trigger: 'hover' But I want it to work as 'focus' behavior. I tried adding data-trigger='focus' and trigger: 'focus' none of these working neither showing any errors in console.
Can Anyone help me, please? :)
I'm using sidemenu template.
I have toggle (true= online, false= offline) in the left menu,
while the button (true= online, false= offline) in the other html.
What I'm trying to do is, if the user turn on the toggle 'leftMenu.html', it will be true, then the button in 'page1.html' also change into true.
Here is my code for toggle in my left menu (leftMenu.html)
<span ng-controller="toggleCtrl">
<p ng-bind=toggleColor></p>
<ion-toggle ng-checked=toggleColor ng-click="one()" toggle-class="toggle-calm">
Airplane Mode
</ion-toggle>
</span>
Here is my code for button in the other .html (page1.html)
<button class="btn btn-default" ng-click="one()" ng-class="{'on': toggleColor, 'of': !toggleColor}">on</button>
<button class="btn btn-default" ng-click="one()" ng-class="{'on': !toggleColor, 'of': toggleColor}" >off</button>
Here is my js (app.js). Both HTML used the same controller 'toggleCtrl'
.controller('toggleCtrl', function($scope) {
$scope.toggleColor = true;
$scope.one = function(){
$scope.toggleColor = !$scope.toggleColor;
}
})
Already implement ng-bind, but it didn't worked in other HTML. It only worked in the same HTML.
Here is my codePen http://codepen.io/aishahismail/pen/pgPEoJ
According to your scenario use $rootScope instead of $scope variable and issue will be solved.
Just change your controller to the following and issue will be solved I have checked the same in your code pen.
.controller('toggleCtrl', function($scope,$rootScope) {
$rootScope.toggleColor = true;
$scope.one = function(){
$rootScope.toggleColor = !$rootScope.toggleColor;
}
});
Hope issue is resolved.
I have a function which shows/hides divs on a page. Within these revealed divs is an image and the 'close' button. I'm trying to get this to zoom animate up/down.
I've got a reasonable zoom function but the problem is the zooms all happen on page load, when I need them to be triggered on the div reveal. Any suggestions on what I need to do to achieve it with the code I have (or suggest better ways) would be appreciated.
Thanks
HTML
<div class="box1" id="box1ID" style="display:none;">
<div class="page_image_wrapper">
<!--<img src="images/1.png" width="1080" height="1920">-->
<div id="zoom-box">
<img src="images/13.png" width="1080" height="1920" />
</div>
</div>
<div class="close_box">
<a href="#" name="1" onclick="conceal('box1ID');">
<img src="images/transparent.png" width="100" height="100">
</a>
</div>
</div>
Show/Conceal function
function conceal(boxId) {
if(document.getElementById(boxId).style.display=='block') {
document.getElementById(boxId).style.display='none';
}
return false;
}
function show(boxId) {
if(document.getElementById(boxId).style.display=='none') {
document.getElementById(boxId).style.display='block';
}
return false;
}
Zoom-box function:
$(document).ready(function () {
$('#zoom-box').animate({
width:'1080px',
height:'1920px',
top:'0',
left:'0',
'font-size':'50px',
'line-height':'300px'
}, 1000);
});
Wrap your zoom in a function and call it after the div is revealed. I've gone ahead and used jQuery for the show and conceal functions as well since you're already using it for the zoom.
$(document).ready(function () {
function zoomIn() {
$('#zoom-box').animate({
width:'1080px',
height:'1920px',
top:'0',
left:'0',
'font-size':'50px',
'line-height':'300px'
}, 1000);
}
function conceal(boxId) {
$('#' + boxId).hide();
// You could potentially create a zoomOut function and call it here to 'reset' the zoom
// zoomOut();
}
function show(boxId) {
$('#' + boxId).show();
// Call your zoom function here
zoomIn();
}
});
As noted in the comment, you could also create a zoomOut function to 'reset' the zoom and call it in the conceal function.
so here is my question:
lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.
what I need is something similar to http://subtlepatterns.com/
I dont need a stop preview option, as long as the background image change again when I select a different button.
how can I do that?
also, if its not possible, this will also work for me:
change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.
have 3 different body class in ur CSS sheet:
body.class1 {
background: ...;
}
body.class2 {
background: ...;
}
body.class3 {
background: ...;
}
use jQuery to dynamic change body class
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
then finally put a id in each button to jQuery find this in DOM:
<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>
Using just javascript you could do something like this
function changeBg(color) {
var color = '#' + color;
document.body.style.background = color;
}
http://jsfiddle.net/62SXu/
You can also change this to pass it the path to whatever your image is
does have to be done with CSS? it seems alot easier method to do with jQuery. something like this would work:
<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>