I am writing a Safari extension. It needs to overlay content from another source on top of the page when I click a button in the toolbar.
How do I position it at the top left corner of the browser, on top of the content? When I click the close button the iframe should be destroyed, displaying the content that was previously covered up?
Thanks!
You can put the CSS either inline or in a stylesheet.
<iframe src="http://path.to/content" style="width: 200px; height: 100px;
position: absolute; top: 0; left: 0; z-index: 100000;" id="overlay_frame"></iframe>
Then, for your "close" link, you have a choice of either completely destroying the iframe:
<a href="#" onClick="document.getElementById('overlay_frame').removeChild(
document.getElementById('overlay_frame').childNodes[0] );">Close</a>
or just hiding it:
Close
Personally, I'd just hide it so you could re-use it again by changing the source:
Change Frame
Related
Made a plugin that utilizes CKEditor contextmenu. When used inside a bootstrap modal, the first right-click results in an incorrect positioning of the menu. Subsequent attempts work fine.
Tough to debug:
CKEditor exists in one iframe and the contextmenu exists in its own separate iframe that gets generated at first use. That new iframe appears completely outside the modal, with a div wrapper, one level in from the outermost <body> tag on the page.
normal CKEditor iframe which exists inside the modal looks like this:
<iframe src="" frameborder="0"
class="cke_wysiwyg_frame cke_reset"
title="Rich Text Editor, ControlLabel" tabindex="0" ...
contextmenu wrapper looks like this:
<div lang="en" id="cke_28" dir="ltr" class="cke cke_reset_all ...
<iframe id="cke_28_frame" class="cke_panel_frame" ...
The contextmenu wrapper is getting inline position styles calculated against the <body> tag. It gets it wrong the first time you right-click to bring up the contextmenu.
z-index: 10001;
position: absolute;
top: 177px; // wrong. too small.
left: 932.5px;
opacity: 1;
width: 130px;
height: 203px
Second time is correct. Click away, then right-click to bring the contextmenu back and you get a proper rendering:
z-index: 10001;
position: absolute;
top: 487px; // correct. proper distance
left: 719.5px;
opacity: 1;
height: 203px;
width: 130px;
What gives? This has been a herculean debug effort since I've had to creep into iframes, one of which is dynamically generated (gotta use javascript tricks beyond what's offered by Chrome devtools).
There's an open() method in the contextmenu source code here, which starts like this:
open: function( offsetParent, corner, offsetX, offsetY ) {
this.editor.focus();
// ...
Having spent so much time already, before I start stepping through a mountain of code, I'm wondering if I'm even on the right track here. Any help is greatly appreciated.
Fix was an incredibly simple bootstrap css override.
body.modal-open {
position: fixed;
}
Background scrolling was confusing the contextmenu coordinate calculations. It is my suspicion that by default a bootstrap modal will not prevent the background from being scrolled programmatically in all cases.
Bootstrap attaches the .modal-open class onto the <body> tag when there's an open modal.
I implement in my gallery a tabbing system, I have two tabs "gallery1" and "gallery2", first tab it's ok but 2nd tab loads only 1 image,
I've found this
<div class="container" style="margin-left: 10px; width: 0px; left: 0px;">
and I removed the width but the horizontal scrolling of the thumbnails doesn't work.
I think something is positioned incorrect in css or in the html markup(the integration of tabs in actual gallery) because the javascript code is fine ( if I remove the tabs the gallery is showing properly).
Check out this link to see what I'm talking about.
Or give me another solution for not displaying both thumbnail containers simultaneously
Many Scripts can't work without the actual container visible.
Try setting up the Tabs script after initializing the gallery, and make sure both tabs are visible on gallery init.
Please remove the width tag of div:
this time is : <div class="container" style="margin-left: 10px; left: 0px; width: 0pt;">
now changed:<div class="container" style="margin-left: 10px; left: 0px;">
I have work in inspect Element of browser and and show all images in both tabs.
Please remove "width" tag .
Script Title: dropline menu
Script URL: http://www.dynamicdrive.com/style/cs...rop_line_menu/
I got the menu working just fine, however, I discovered that when I have the stumble upon toolbar on, the submenu suddenly is placed about 22px lower than it should be. Sometimes this increases to multiple times that difference. You can test out this behavior for yourself in Chrome browser, having the stumbleupon toolbar enabled and hovering over one of the menu items which has a submenu: http://kwestievan.nl/unityexpress/
How can I fix this? I checked if body.offset().top was the problem, but actually that one is higher than the difference: 32px, while the difference in the menu is only 22px.
The reason the sub menu is lower beacuse the element
<ul class="sub-menu"</ul>
is being given a style of
position: absolute;
left: 233px;
top: 224px;
What this does is place the sub-menu "RELATIVE" to the browser window as such that it is 223px from the left and 224px from the top of the "browser window". This works fine when there is no "stumbleupon" toolbar. However when you do add the stumbleupon toolbar, it adds the toolbar in the form of a iframe element. The height of the iframe element than causes the sub-menu to be pushed down since the dimensions of the browser window have changed.
You can quickly test this by finding out the height of the "stumbleupon" toolbar and than comparing that height to the amount of distance the sub-menu has pushed down on you monitor/screen resolution. They will be same.
The solution is to give the element
<li id="menu-item-1738"</li>
a style of
position: relative;
and than style the sub-menu so that it aligns and is "absolutely" positioned "RELATIVE" to the containing li element. For example
position: absolute;
top: 20px;
left: 15px;
Offcourse all this is being done by your script. I am not sure why are you using javascript for this. This can be easily acheived by CSS alone.
My page is having left side menu and right side content with links.
When the links in the content are clicked then i need an iframe loading the content in the link and come up so that it covers the right side div having the content.
This iframe should be minimized when not needed and should be visible like a bar at the bottom always floating and when reached bottom of page it should be visible above the footer bar.
Can anyone suggest me how to do this. If example is provided that will be much better.
Thanks,
Sandeep
Im attaching a demo layout of what i wanted.
If you structure your right side content with a containing div, and within that div make a nested div that holds your regular content and an iframe; then you can setup click handlers for your link that will hide the nested div and show the iframe:
$(document).ready(function() {
$('#inner_div > a').live('click', function() {
$('#inner_div').slideUp();//just an example animation, you can set whatever attributes you would like with jquery, like just change the height with .css({height: '0px'})
$('#iframe_id').slideDown();
});
});
<div id="outer_div">
<div id="inner_div">
Link Text
</div>
<iframe id="iframe_id" style="display:none;"></iframe>
</div>
----EDIT----
As for the floating bar attached to the bottom of the page:
<div id="floating_footer" style="position: absolute; bottom: 0px; right: 0px; width: 90%; height: 50px; background-color:#069;"></div>
And if you want to hide this "floating div" when the iframe shows up, just add the following to the javascript code (right with the other slideUp/slideDown code):
$('#floating_footer').slideUp();
If I have a popup (using a div), how can I have the div to go back to the hidden state when someone clicks anywhere outside of the div?
i.e. the popup is visible, then someone clicks outside the popup, the div should be hidden again.
How can I achieve this functionality?
A popular way to do this is with an overlay. When your create your div popup, also create a <div id="overlay"> immediately beneath it that takes up the whole screen:
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Optionally, you can use this overlay to darken all other content with, for example, background: #000 and opacity: 0.5.
After you've crafted your JavaScript to add this overlay right beneath your popup, add a click listener to it. When the user clicks the overlay, you'll know that s/he has clicked outside of your popup.
Note that position: fixed doesn't work in older browsers. One workaround is, when the overlay is visible, to instead set the overlay to position: absolute, then temporarily add overflow: hidden to <body> to prevent the user from scrolling down.
A different way of doing it that seems more straight forward to me, is this:
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#popup").remove();
$("body").unbind("click");
}
});
In short, the originalTarget is what was actually clicked, and the script then checks if #popup is one of its ancestors (called parents in jQuery). If it isn't, the click was outside, and we remove the popup.