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.
Related
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.
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
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;
...
I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}
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