I have a drop-down menu created by JavaScript on all pages and some columns have up to 20 items. This drop-down appears topmost over all content in Mozilla browsers but in Internet Explorer it gets partially covered when an ActiveX object is displayed just below it.
I have tried displaying the ActiveX in a DIV layer and setting z-index but so far I haven't found a solution that works. Adding style to the object tag had no effect...
<object etc style='z-index:3;'>
Applying style to a DIV containing the object also had no effect...
<div align="center" style="z-index:2;">
The dropdown menu has a z-index=1 applied. Adding a 'wmode' parameter to the object also did not work...
<param name='wmode' value='transparent'>
Apparently the issue is in-process vs out-of-process plugins. In-process plugins (and activex) will run in the same environment as the web page itself and honour z-ordering. But in-process is rare. Most browsers run plugins and activex in a separate process, so the web page is in one process and the activex/plugin is in a different process. The browser makes it APPEAR like it’s a single process by causing the plugin/activex to DRAW itself in the screen area containing the web page, but you understand its smoke and mirrors and z-ordering is practically ignored. It draws the web page (including menus) and THEN it causes the plugin/activex to draw.
The only way around it (and doesn’t always work) is to wrap the html menu in an iframe.
I wanted to expand on the issue here. The answer provided by WilliamK is kind of in the right direction but doesn't really explain the real cause of the problem nor does he provide an adequate solution.
The main cause of the problem is the fact that some UI elements are rendered in a windowed context (vs. windowless) which basically means that it's rendered in a separate OS-level process which takes place on top of the browser and not within the browser. This follows what WilliamK was trying to explain, except browsers these days are multithreaded so "out-of-process" doesn't tell the whole story. Here's a great explanation of windowed vs. windowless.
An easy solution to this is not to render something within an iframe, but to have an iframe sitting behind any content you want rendered on top of another windowed object. This is best explained by example. Assume that the <object> is some ActiveX or Flash object rendered in its own windowed context:
<style>
.overlay {
position: absolute;
/* adjust for your site - values shown here are arbitrary */
width: 600px;
height: 600px;
top: 100px;
left: 100px;
z-index: 1;
overflow: auto;
}
.overlay-content {
position: relative;
z-index: 2;
}
.overlay iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<object ...></object>
<div class="overlay">
<div class="overlay-content">This is content you want to appear on top of the windowed object</div>
<iframe border="0"></iframe>
</div>
</body>
Related
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.
I have Foundation installed in an application where prettyPhoto is also used.
The problem is the top-bar menu is disabled (hovering, links and dropdown are all disabled as per this page here on certain pages, whereas on any other page for example here the functions are fully enabled.
I have isolated the problem in the following generated code:
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
If it is removed, the functions return. I believe it is a javascript issue because links and css would appear to not cause the issue in other page locations...
How can both set of functions be made to co-exist?
The problem is not with JavaScript conflicts.
It is because of the
<div id="container">
according to css
#container {
margin: 0 auto;
position: absolute;
padding-top: 50px;
padding-left: 142px;
z-index: 300;
}
your z-index is 300. Which means it is on top of everything including couple of menu-options.
remove your z-index property everything should be fine
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
So here's a stump I've hit.
I'm designing a... Thing. It sizes itself to the browser window, with some controls at the top and a rather large list near the bottom. Anyways, it's basically a table cell that sizes with the browser window, whos size is the document size - 130px in height, and document size - 50px in width. What I want it to do, is when the list of stuff inside that cell is bigger then the cell, it to become scrolly using css's overflow: auto.
The problem, is that I can't get it to do that, only make the entire document scrolly. Currently, the cell has no properties aside from valign:top, and it has a single div in it (to which the list elements are written), and it's set to overflow:auto. However, it's just scales up the entire document when the list becomes to long.
I don't want to give it a static size since it sizes with the page.
Any ideas?
Thanks!
-Dave
I'm not sure I understand correctly, but here's a try that may give you ideas.
<head>
<title>Test</title>
<style>
div.outer {
background-color: red;
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
div.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>
</body>
The solution of buti-oxa is very nice, but doesn't work in Internet Explorer.
For a cross-browser solution, you need to assign a fixed height to the div that contains the list. You can't do it using only css, because the height to assign depends from the height of the browser window.
But you can use a simple javascript function to dinamically assign the height to the div.
Here is an example, using jQuery:
function resizeDiv(){
var h = $(window).height(); //maybe the window height minus the header and footer height...
$("#yourDivId").css("height", h + "px");
}
You should call this function when the page is loaded and when the user resizes the window:
$(document).ready(function(){
resizeDiv();
$(window).resize(function(){
resizeDiv();
});
});
You can see this in action in this demo page I posted (resize window to test):
http://www.meiaweb.com/test/BMS_DM_NI/
if I m not wrong and your content is only text you can add wrap property although this dosen't work in firefox u can add wbr to your text
I think you should consider fluid layout design patterns.
Couple of tips:
MediaQueries
Use % instead of fixed values like px
I think an iFrame would help. Put your 'thing' into a base URL, and then use another page with an iFrame to load it. As the 'thing' goes crazy in size, the scroll bars appear, but your outer page is not effected.
An old fashion frame should work too, but iFrames are just more fun ....