I'm a bit of a noob to ionic so this may be a dumb question.
On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.
My app is based on the tab sample app.
So far I've tried the following
app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}
my-tab.html
<ion-content class="dark-overlay" (ng-hide)="showOverlay">
....
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>
my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll("dark-overlay");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}
Even if i can get this to work it's not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.
I think it's related to property binding.
Any ideas?
Thanks
you need to use pointer-events to let events go through your dark overlay.
I have demonstrated that in this Plunkr (go to second tab which shows home page)
style.css
.dark-overlay{
position:absolute;
width:100%;
height:100%;
background-color:#888;
opacity:0.9;
top:0px;
left:0px;
z-index:1000;
pointer-events: none;
}
and have this in home.html
<button (click)="stealthMode()">Tint</button>
<div class="dark-overlay" [hidden]="showOverlay"></div>
and this in home.ts
showOverlay:boolean = false;
stealthMode(){
this.showOverlay = !this.showOverlay;
}
You can make a binding to render that part dynamically using angular directives.
Check this for clean implementation:
ngIF
Related
All my secondary header navigation links can only go (top left, bottom left, top right, etc.).
Currently enabled as "top left", however I want two out of those four links to be "top right".
Current code works perfect, other than after the 75% resizing mark, the links discombobulate.
#media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}
It has been said that using absolute positioning within flex-box will not work reliably. I'm going to guess that, because I was viewing your site in Firefox and Chrome and did not see the issue, that you are viewing your site in Safari, where the issue can be seen.
In any case, due to the above, I would recommend using Javascript in order to move the navigation items to the desired location. Then, add some additional CSS in order to get those newly-moved items to look like the others.
First, remove the CSS you've added that addresses those navigation items.
Then add this via site-wide Footer code injection:
<script>
(function() {
var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
var i;
for (i=0; i<targetLinks.length; i++) {
targetParent.appendChild(targetLinks[i]);
}
})();
</script>
And finally, add this via the CSS Editor:
body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
margin: 0 .618em;
padding: .618em 0;
font-family: myriad-pro;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
display: none;
}
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!
Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
change #container-large-desktop from ((1140px + #grid-gutter-width)) to ((940px + #grid-gutter-width)).
change #grid-gutter-width from 30px to 20px.
then download your custom version of bootstrap and use it. It should be 960px by default now.
I wanted the max width to be 810px, so I used a media query like this:
#media (min-width: 811px) {
.container{
width:810px;
}
}
Bootstraps gridsystem is FLUID. This means it works in percentages.
So just set a width to page wrapper, and you are ready to go
HTML:
<body>
<div class="page-wrapper">
<!-- Your bootstrap grid/page markup here -->
</div>
</body>
CSS:
.page-wrapper {
width: 960px; /* Your page width */
margin: 0 auto; /* To center your page within the body */
}
The easiest way is to wrap everything in a container like this..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
http://bootply.com/94943
Or, you can go with LESS/custom build: http://getbootstrap.com/customize/
I made a vertical carousel which consists of images that when clicked should be visible fullscreen. But the problem is i'm not able to figure out how to make sure the fullscreen images are preloaded or something and works like the thumbnail images(getting preloaded).
I'm not sure what approach to follow for preloading the fullscreen images using css background and how to make sure the images fadeIn or just some transition when i click on the thumbnail in the carousel.
Please have a look at the following link where my code is uploaded.
http://www.lluvia.me/slideshow/carousel.html
If its convenient,feel free to check the script by checking the source.
Help would be appreciated. Thanks!
Found this post and figured it might help you, Preloading images with jQuery
Try and post some of the code in your body for future reference. :)
Quick and easy:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Or, if you want a jQuery plugin:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Alternatively, if you want to stick purely with CSS check out this page: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ You can just have the background image be positioned off screen then come on screen when needed.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }