I'm working on a case resolution system, and am currently using a jquery colorbox to display a list of open tasks to the user. Users want to be able to print this list, and I guess you can do it from within the page itself by adding a JavaScript link that triggers window.print from within the iframe. However, I've also got to account for users possibly selecting print from the browser's menu. In that case, if the colorbox is open, I just want to print its contents and not the overlying page.
Is it possible to hide everything except for the iframed content using a print media CSS file? If so, how can this be achieved? Failing that, I'll need to resort to JavaScript, so would achieving the effect in JavaScript be possible?
// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe>
// this is how you do it using jquery:
$("#print-iframe").get(0).contentWindow.print();
// and this is how you do it using native javascript:
document.getElementById("print-iframe").contentWindow.print();
In case the pure CSS solution will fail (didn't work for me but maybe I just missed something) you can have combined solution of CSS and JavaScript. First have this:
<style type="text/css" media="print">
.hideonprint { display:none; }
</style>
Then such JavaScript will cause all content to be hidden when printing, except your frame:
<script type="text/javascript">
window.onbeforeprint = function WindowPrint(evt) {
for (var i = 0; i < document.body.childNodes.length; i++) {
var curNode = document.body.childNodes[i];
if (typeof curNode.className != "undefined") {
var curClassName = curNode.className || "";
if (curClassName.indexOf("hideonprint") < 0) {
var newClassName = "";
if (curClassName.length > 0)
newClassName += curClassName + " ";
newClassName += "hideonprint";
curNode.setAttribute("original_class", curClassName);
curNode.className = newClassName;
}
}
}
document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class");
}
</script>
This also assume the iframe is direct child of the body otherwise it won't work either.
I have found a method that works to print just the IFrame's content even if the client uses the browser's print menu item, but I couldn't tell you why that is. The trick is to set the focus to the IFrame before printing. The print stylesheet is needed too, although the javascript seems to be what is happening when the user prints from the menu. You need both parts for it to work. It prints the entire document, even if it is larger than the IFrame! I have successfully tested it in IE8, Firefox 5 and 6 and Safari 3.2.
I use this script as a handler for an onclick event for a button or "print me" link:
<script type="text/javascript" language=JavaScript>
function CheckIsIE()
{
if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER')
{ return true; }
else
{ return false; }
}
function PrintThisPage()
{
if (CheckIsIE() == true)
{
document.content.focus();
document.content.print();
}
else
{
window.frames['content'].focus();
window.frames['content'].print();
}
}
</script>
The IFrame in question is named and id'd content. My button is in a div called print_iframe The browser sniffing is essential!
Then I use a print only stylesheet linked in like this:
<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" />
#charset "utf-8";
/* CSS Document */
body { background:none; }
#left { display:none; }
#main img { display:none; }
#banner
{
display:none;
margin-top:0px;
padding:0px;
}
#main
{
margin-top:0px;
padding:0px;
}
#print_iframe
{
display:none;
}
This could work if the iframe is a direct child of body
<style type="text/css" media="print">
body *{display:none}
iframe{display:block}
</style>
Related
I'll try to explain my use case here. In my site I have a break point for desktop view, and break point for tablet view (which is more compact). I'm trying to add a function to allow seeing the tablet view when browsing from desktop, cause some members prefer the compact design in their desktop as well.
For doing that, I figured I would need to trick the '#media(max-width:X)' query. I'm looking for a JS code that can manipulate the screen width value, so when the browser calculates max-width, it would be against a value that I specified.
One thing to note, this is suppose to work on desktop browsers, so the meta viewport can't be used here.
One solution is to apply a specific class (e.g: .tablet) to the body.
<body class="tablet"></body>
In your CSS:
#media screen and (/* your query */) {
.tablet .my-class {
/* tablet specific stuff */
}
}
You could then remove the .tablet class and replace it with .desktop via JavaScript
var body = document.body;
var switchToDesktop = function() {
body.className = body.className.replace('tablet', 'desktop');
}
var switchToTablet = function() {
body.className = body.className.replace('desktop', 'tablet');
}
var toggleView = function() {
(body.className.indexOf("tablet") > -1) ?
switchToDesktop() :
switchToTablet();
}
If you are using SASS or LESS, you can nest the tablet-specific styles.
#media screen and (/* your query */) {
.tablet {
h1 {
/* tablet specific h1 */
}
.my-div {
color: red;
}
/* etc... */
}
}
I have div that has a height: 300px; and overflow: auto;. It looks good in Chrome, but in Firefox it start scroll the page. When I decrease the height to height: 200px;` it looks good.
Can we give different div height when html page open in Chrome and Firefox?
Use the below CSS block for firefox
#-moz-document url-prefix() {
.selector {
width:200px;
}
}
and use the below CSS block for chrome
#media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
width:300px;
}
}
You can write browser specific code by detecting browser.
Here is the link for browser detection Browser detection in JavaScript?
Give the condition according to the browser using javascript
if (!!window.chrome == true) {
//condition for chrome
}
else if (typeof InstallTrigger !== 'undefined') {
//condition for firefox
}
else if (/*#cc_on!#*/false == true) {
//condition for safari
}
else if (!!window.opera || navigator.userAgent.indexOf('Opera') >= 0) {
//condition for opera
}
else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
//condition fo IE
}
This javascript code will detect the browser. Give onload function for body and give the code for that function.
I think better way to change the css files based on the browser. As I think it is better to separate the styles functionality from the JavaScript. It will be good coding practice and maintainability will be easier.
Use different styles sheets (css) based on the browser.
E.g.
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"Firefox.css\">");
}
else
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
or
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
I have a Javascript text animation on my homepage and would like to insert an #media command using internal CSS to the homepage scripted text 'we do content'. I am trying to make this so when viewed on an iphone screen size the text changes to be displayed on three separate lines, rather than one. ie:
We
Do
Content
I'm at a bit of a loss what to values/ elements to call out for the #media command. I think maybe /br may be one of the three things needed but otherwise a bit stumped! It's worth noting this is a wordpress theme and "bk_big_text" is a theme specific text id. Any help greatly appreciated!
<head>
<style type="text/css">
#media only screen and (max-width: 480px) {
.changer (not sure if this is right?) {
what goes here?: /br !important;
}
}
</style>
</head>
<p style="text-align: left;">[bk_big_text size="120" ]
<script type="text/javascript">// <![CDATA[
var words = ["content","brand", "identity", "digital", "fresh","integrated", "interactive", "creative", "powerful","witty", "editorial"];
var i = 0;
var text = "We do content";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/content/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 2200);
// ]]></script>
<span id="changer" style="color: #ffffff;">We do content</span>[/bk_big_text]
The HTML code below works fine in IE 8, but not in FF 11. Although the code seems to take different browsers into account, for some reason FF does not do the trick. Can someone please tell me how to get this to work in both IE and FF? The idea is to rotate several clickable pictures.
<html>
<head>
</head>
<body>
<ilayer id='l1'>
<layer id='l2'>
<div id='l1'>
<div id='l3' style='position:relative'>
</div>
</div>
</layer>
</ilayer>
<script language='JavaScript'>
<!--
var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<a href='http://www.google.com' target='_blank'><img src='image1.jpg' BORDER=0 height='50'/></a>";
bannerArray[1] = "<a href='http://www.google.com' target='_blank'><img src='image2.jpg' BORDER=0 height='50'/></a>";
bannerArray[2] = "<a href='http://www.google.com' target='_blank'><img src='image3.jpg' BORDER=0 height='50'/></a>";
bannerRotate();
function bannerRotate() {
if(myCount > bannerArray.length-1){myCount=0;}
// Write out rotation
if (document.all){ // it is IE
document.all.l3.innerHTML=bannerArray[myCount];
}
else if (document.layers){ // it is NN
document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout('bannerRotate()', 1000);
myCount++;
}
// -->
</script>
</body>
</html>
You haven't specified a DOCTYPE.
This is an important part of a HTML document. Without it, IE see the HTML as invalid and render it in Quirks Mode. Other browsers won't.
When I is in Quirks mode, it is basically rendering the page as it would have done in IE5.
This is why you are seeing the page look different in IE vs FF. Firefox is actually rendering it correctly; it is IE that is wrong.
Add a valid DOCTYPE to make IE render it correctly. If you don't know which doctype to use, use this one:
<!DOCTYPE html>
This will make the page render the same in all browsers.
It will, however, be IE that changes, so if you think it's rendering fine in IE now, then you'll probably have to make some changes to your layout to fix it.
Hope that helps.
In addition, your Javascript code is very badly obsolete. You will need to consider rewriting all of that from scratch. Nobody uses document.all or document.layers any more. However, the doctype is the main thing that is making your page render incorrectly in the first instance.
document.all and document.layers are proprietary and obsolete. Use document.getElementById() instead.
Just replace if (document.all) with if (document) and it will work in Firefox.
It will, but no really, don't do that! That's based on some almighty hacks.
Where-ever you got that code from, stop using it NOW.
There's plenty of tutorials out on the web that will show you how to rotate the display of images in a modern fashion. Go and find one.
Lets bring this code into the 21st century, and don't forget the docype!!!!
HTML
<ul id="banner">
<li id="bannerItem1"><img src="http://placehold.it/450x150/FF0000/FFFFFF/&text=Image1" /></li>
<li id="bannerItem2"><img src="http://placehold.it/450x150/00FF00/FFFFFF&text=Image2" /></li>
<li id="bannerItem3"><img src="http://placehold.it/450x150/0000FF/FFFFFF&text=Image3" /></li>
</ul>
CSS
#banner
{
list-style:none; /*Turn Off List Styling */
}
#banner li
{
display:none; /*Hide the List Items*/
}
#banner li#bannerItem1
{
display:block;/*Show The First One */
}
Javascript
var listItems = document.getElementById("banner").getElementsByTagName("li");
var limiter = 0;//this is to stop it infinatly looping...optional
var activeNode = 0;
var t = setInterval(function(){bannerRotate()},1000);
function bannerRotate() {
var listItemsCount = listItems.length;
//LOOP THROUGH List Items
for(i = 0; i < listItemsCount; i++)
{
//Turn off all but next active node
if(i != activeNode +1)
{
listItems[i].style.display = "none";
}
//Check if next active node is outside the list range
else if((activeNode + 1) < listItemsCount)
{
listItems[activeNode +1].style.display = "block"
}
}
activeNode++;
if(activeNode >= listItemsCount)
{
listItems[0].style.display = "block";
activeNode = 0;
}
if(limiter++ > 4)
{
clearInterval(t);
}
}
Example: http://jsfiddle.net/Hj78T/
I am trying to load an alert that redirects to another page, but the problem is the background of the page doesn't load. The only html to be rendered is the javascript alert. Any idea how to fix this so that at least some of the html loads before the alert?
also tried
var onFooEndFunc = function()
{
var delay = 50; /* milliseconds - vary as desired */
var executionTimer;
return function()
{
if (executionTimer)
{
clearTimeout(executionTimer);
}
executionTimer = setTimeout(function()
{
window.alert('Please download a game');
window.location.href='games.html';
}, delay);
};
}();
Since you've tagged using jQuery, you could do this:
$(document).ready(function(){
window.alert('Please download a game')
window.location.href='games.html';
});
Or natively:
window.onload=function(){
window.alert('Please download a game')
window.location.href='games.html';
};
Popup is what you need
just set a div
<div id="popup_download">
Please download a game!
Mario
Sonice Rider
</div>
at style set display:hidden
#popup_download
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
when page is loaded just set display:block
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup_download').style.display = 'block';
}
window.onload = show_popup;
</script>
The benefit of it is you can add any HTML elements,css and even php or asp or any code inside and your background will continue working.