z-index on jquery dialog not working inside an iframe - javascript

I'm using bootstrap, which uses jquery dialog. If the z-index of the dialog is set to 1 or more works fine in the stand alone script. However, when I call the same script inside an iframe. Then the dialog shows underneath the other elements on the same page. Bizarrely enough, if I try to close the dialog, I can't because it seems that the semi-transparent layer is on top of the dialog itself.
ui-dialog {
z-index:99999999 !important;
}
.ui-widget-overlay {
position: fixed;
z-index:99999999 !important;
}
.ui-dialog {
z-index:99999999 !important;
}
.fixed-dialog {
position: fixed;
top: 50px;
left: 50px;
z-index:99999999 !important;
}
.ui-dialog-titlebar {
border-left: 30px solid transparent;
min-height:40px;
background-color:#f09;
background-image:url(images/yellow_alert_icon.png);
background-position: -22px 8px;
background-repeat:no-repeat;
z-index:99999999 !important;
}
I'm very stocked !!!
UPDATED CLARIFICATION:
The iframe is empty. It doesn't contain any other elements. I just use it as a dialog.
So the entire code inside the iframe is the same script. therefore, the parent script.
the parent script isolated works fine.
the moment I put it inside the iframe, when the jquery dialog pops up, it's showing underneath the parent script.

All elements of an iframe are isolated in that iframe. Any z-index value that is applied will be applied in relation to other elements inside the iframe.
The iframe itself can have a z-index, but that will affect the entire iframe and all it's contents. If you want one element in the iframe to appear above elements from the parent document, while other elements in the iframe are underneath, it isn't possible unfortunately.

I found my own error,
I hope this can help someone,
I had this piece of code which was bringing the .ui-widget-content one layer down when inside an iframe.
if($frame=='iframe'){
echo'<style>
.ui-widget-content{
z-index:-1 !important;
...

Related

creating unscrollble background image using html and css only

i am trying to make a web page which background is fixed (meaning width is 100% and height does not scroll ) but the main div of the page which contain all the content of the page is scroll-able in y direction. you can see the effect here http://btemplates.com/2016/blogger-template-topgames/demo/. is it possible to achieve this effect using html and css only ? if not then how it can be done with javascript?
Yes, you can easily do that using a background image. If you inspect the page you can see how they did it.
CSS:
body {
background: url('<<Your URL Here>>'), center top no-repeat fixed;
}
content-wrapper {
width: 960px;
margin: 46px auto 0px;
padding: 0px;
}
HTML:
<body>
<content-wrapper>
</content-wrapper>
</body>
In the future, right-click the page and inspect the HTML and CSS and you should be able to figure most things out.

Modal content gets cut off after first page in print preview

I am running into an issue when printing module content, and this happens to all browsers. When I print the modal content, it only previews the first page and anything after the first page would get cut off. I have tried debugging in Chrome print emulator but still cannot figure out a solution.
At some point, I added a scrollbar to the print emulator and I can scroll down to see all the content, but when I print preview, it shows the scrollbar and still cuts off any content after the first page. I don't know why print preview behaves so differently from the emulator.
The project is in react, plain modal that doesn't use any third-party library like bootstrap modal.
Media query for print:
#media print {
body, html {
height: 100%;
overflow: visible !important;
}
.account-header {
display: none;
}
.list-wrap {
height: 100%;
// overflow: scroll !important;
}
.account-content {
margin: 0;
padding: 0;
border: 2px solid red;
position: absolute !important;
overflow: visible !important;
visibility: visible !important;
display:block;
}
.account {
background-color: none !important;
display: inline-block;
font-size: 12px;
border: 1px solid blue;
}
}
Note: .list-wrap is a class applying to the parent container for .account-content. Using the overflow: scroll style would add a scrollbar to the print emulator and I would be able to see all the modal content there. But in the actual print preview, it still shows the first page only.
The problem, when printing, is that you have to set the page size property. The rules that give you the issues you are describing are the ones related to height.
Depending on how you would like to print pages and how you want to handle page breaks, you have to act as described in the following documentation:
https://www.w3.org/TR/WD-css2/page.html
The sections you should check are, at least:
https://www.w3.org/TR/WD-css2/page.html#page-size-prop
https://www.w3.org/TR/WD-css2/page.html#page-breaks
Another article that can help you is this one:
https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm
If you want be make sure to have a more wide as possible compatibility with browsers, this GitHub repository may help you:
https://github.com/cognitom/paper-css

Facebook Send button - manipulating the popunder div

I am positioning the facebook 'send' button at the right edge of my page.
Therefore, when clicking it, and opening the underlying div (where the details of the send information are being filled) it opens to the left, extruding from the page width.
This is why I am trying to move this div to the left when it is opened.
Unfortunately I dont see a way to this without moving also the button since both of these elements are loaded in a cross-domain Iframe (from facebook).
Is there any way to position the popunder div separately from the button?
Will CORS help me achieve this goal?
Many thanks,
junkycoder
Yes, it's possible, you could style it like this:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: 0px;
margin-left: -475px !important;
border:20px solid black;
padding: 10px;
height: 225px !important; /* Edit if you want to restore native border */
}
.fb-send{
float:right;
}
You can check it in here: http://codepen.io/anon/pen/GekKs
It's not perfect, but it does the job.

jQuery .css body opacity

I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
However the box itself dims either. Is there a way to make the box ignore this command? Or maybe there is another way around?
As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:
#overlay {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
display: none;
}
#pbox {
z-index: 1;
}
So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.
The jQuery code would be a little like this:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("#overlay").show().css({"opacity": "0.5"});
});
Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.
The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.

Scrollbar Inside and On Top of the Div

I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html

Categories

Resources