I have a search screen
like this
. On click of search I am showing busy image with overlay.
But there is a stop button is there in screen which I am not able to click because its coming under the overlay.
Can you pls help to solve this issue?
<input type="button" value="Stop" style="z-index: 100;position: absolute;" />
#overlay {
position: fixed;
display: none;
width: 100%;
height: 97.5%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
height:97.5%%;
margin-top: .4%;
}
if you test it alone it works. But i think the problem is that your stop button is a child of an element with a relative position. Maybe you must make the entire sidebar menu absolute or not covered by the overlay. Try also putting the stop button in the same level as the loader image, it more comprehensive that way.
#overlay {
position: fixed;
display: block;
width: 100%;
height: 97.5%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
height:97.5%%;
margin-top: .4%;
}
<div id="overlay"></div>
<input type="button" value="Stop" style="z-index: 100;position: absolute;" />
Related
Issue: I cannot natively lazy load an iframe on a modal window. When I check the waterfall in Inspect element > Network, the iframe loads immediately.
Goal: The iframe should load ONLY when modal is triggered. Can you help please?
I don't use dependencies like jQuery, but javascript is OK if it provides a solution. I tried the native and several other lazy loading solutions with no success.
My code:
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe loading="lazy" class="responsive-iframe-pay" src="https://store.website.com"></iframe>
</div>
</p>
</div>
</div>
iFrames load when they're encountered in the rendered HTML DOM. Since your iFrame exists as part of the initially loaded code, it will load when the parser hits that portion of the HTML.
You can defeat that initial load action by either adding the iFrame to the DOM or modifying the URL right before the modal window is opened.
Modifying the <iframe src="" /> is likely the best solution since it will keep the loaded content for any additional times the modal is displayed.
You can do this by adding an "onchange" event to the checkbox which will run the javascript to change the src attribute of the iframe.
Make sure to change the src on the iframe to an empty string"" so it doesn't try to load anything right away.
var toggle = document.getElementById('modal-store');
var frame = document.getElementById('the-iframe');
var urlTarg = "https://google.com";
// put the page you want to load in the frame in the urlTarg
function toggleModal() {
if(toggle.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe id="the-iframe" loading="lazy" class="responsive-iframe-pay" src=""></iframe>
</div>
</p>
</div>
</div>
Edit: Apply to multiple different buttons showing content in the same iframe
You can apply this to multiple iframe targets on the same page or the same site with a few modifications. This assumes that:
You'll re-use the modal window AND iframe HTML code.
That you want to display a different URL each time the modal is opened
The modal window HTML exists on each HTML page that you want to have modal + iframe.
You would modify the Javascript to something like this:
// you'll pass all the required values to the function
function toggleModal(checkbox, frameTarg, urlTarg) {
var frame = document.getElementById(frameTarg);
if(checkbox.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
You will only need the javascript once per parent page since the same function can work for any combo of checkboxes, iframes, and URLs
And the checkbox HTML to:
(Note: the same function could be applied to a button, link, etc)
<input class="modal-state"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'the-iframe', 'https://theurltoloadinframe.com')"
/>
<input class="modal-state2"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'iframe2', 'https://someotherurltoload.com')"
/>
Basically, the function expects you to pass in:
The current checkbox - (denoted by this)
The ID of the iframe you want to change make sure its a string with quotes
The URL you want to load in the iFrame also in a string
I'm used my university project for Ionic -3 I'm try to create sample image as
Avatar to set of the small icon, but its cant do that correctly , any one know how to make correctly like this
My code sample
my code
<ion-item>
<ion-avatar item-start>
<img src="assets/imgs/user.png">
<div>
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
</ion-icon>
</button>
</div>
</ion-avatar>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<ion-note item-end>3:43 pm</ion-note>
</ion-item>
css
#notification-button {
position: relative;
width: 42px;
top:1px;
right: 1px;
overflow: visible!important;
}
#notifications-badge {
background-color: red;
position: absolute;
top: -3px;
right: -3px;
border-radius: 100%;
}
Underneath the answer, Before I saw your code...
I don't have ion stuff, but I can help you with the css, is this kinda what you need?
position: relative; on the .ion-item and to get the small button on its right place, just put this position: absolute; right: -5px; bottom: -5px; in the button
.ion-item{
position: relative;
height: 100px;
width: 100px;
}
.ion-avatar{
border-radius: 50%;
background-color: tomato;
box-shadow: 0 0 4px 3px #ccc;
height: 100%;
width: 100%;
}
button{
position: absolute;
right: -5px;
bottom: -5px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: blue;
border: gray 1px solid;
cursor: pointer;
color: white;
}
<div class="ion-item">
<div class="ion-avatar">
<div>
<button id="notification-button">
<div class="ion-icon">
!!!
</div>
</button>
</div>
</div>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<p>3:43 pm<p>
</div>
update
When I played with chrome web tools a bit, I found this to get the button to the point you wanted it.
#notification-button[_ngcontent-c0] {
position: absolute;
width: 42px;
top: 25px;
left: 30px;
overflow: visible !important;
}
changed your position: relative; to position: absolute; and changed the top and right, I'm not sure if your working responsive. But take a look if this helps. Otherwise, I know another good solution.
I'm following an blog post on displaying a "Loading" image when an Ajax call is being performed. The example has all of the styles inline and it works but I'm trying to convert it to having the CSS properties in an style sheet. Everything is converting just fine except for the filter property.
Here is the original code. The filter is in the main div and it is supposed to set the back ground of page to be transparent by 50% to draw attention to the Processing message.
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=50); display:none">
<p class="submit-progress" style="position: absolute; top: 30%; left: 45%; color: White;">
Processing, please wait...<img src="~/images/ajax-loading.gif">
</p>
</div>
This is the CSS I'm trying to convert it to.
.ajax-loading-wrapper {
position: fixed;
margin: 0px;
padding: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100px;
background-color: #666;
z-index: 30001;
opacity: .8;
filter: alpha(opacity=50) !important;
}
.ajax-loading-div {
position: fixed;
top: 50%;
left: 50%;
height: 7em;
padding-top: 2.3em;
width: 20em;
margin-left: -10em;
padding-left: 2.1em;
background-color: black;
color: white;
border-radius: 5px;
}
.ajax-loading-text {
position: absolute;
top: 15%;
left: 20%;
color: white;
}
.ajax-loading-icon {
position: absolute;
top: 45%;
left: 39%;
color: white;
}
<div id="divLoading" class="ajax-loading-wrapper" style="filter: alpha(opacity=50) !important;">
<div class="ajax-loading-div">
<span class="ajax-loading-text">
Processing, please wait...
</span>
<span class="ajax-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
</div>
When I inspect the page I see that the filter property is crossed out. I tried adding the !Important but that didn't work. I also tried adding just the filter to the divLoading style and that doesn't work either. What I see with these setting is a small section (~25%) at the top of the page that has this background color but I'm needing it on the whole page.
That's not quite how filter works (since IE8). It requires a list of filtering functions, each given a value. A working version of your example would be:
filter: opacity(0.5); // Opacity is 0 to 1, like the CSS property
Further Reading: MDN Docs
I am trying the create a search page, where when i add text in search panel the images of those text will display. The issue I am facing is that the images are overlapping on the search div even though I have positioned it well.
I don't want to fix it using top values as I want the page to be responsive and the top values will be changing based on the width of the page. Is there a cleaner way to do it ?
<div class="jumbotron text-center">
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}">
</div>
css:
#body {
width: 100%;
}
#search {
position: absolute;
top: 174px;
left: 0px;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 10;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
.card {
position: absolute;
}
You can set the overflow on the card class to hidden(to hide the overlapping content) Or you can set it to auto( scroll bars appear if overlapping).
.card{
overflow: hidden;
}
Well you haven't positioned anything well there. Does everything really need the position property set to absolute? If so, try using JavaScript to get the search area's height (or set a fixed one) & apply it to the "top" property in the card.
I try to close lightbox by clicking outside of the current image, but I don't how to do.
I just have a link "Back" in order to close this lightbox...
I use only CSS3, maybe Script is the solution, thanks for your help.
Here's a short CSS :
/*thumbnails*/
.album {
position: relative;
width:1200px;
height:auto;
float: left;
}
/*fullscreen*/
.overlay {
position: fixed;
left: 258px;
top: 0px;
padding: 0px;
overflow: hidden;
}
/*close fullscreen, back to thumbnails*/
.close {
position: absolute;
top: 50px;
left: 50%;
}
HTML
<ul class="album">
<li>
<img src="images/thumbs/example.jpg>
<div class="overlay" id="example">
<img src="images/full/example.jpg" />
BACK
</div>
</li>
</ul>
You could use a pseudo-element on the .close element and position that between the lightbox and the image using z-index.
.overlay:target .close:before {
position: fixed;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.overlay { z-index: 5; }
.lightbox image { z-index: 15; }