i m trying to pickup contents of a div and open it in new window using window.open so user can print this printer friendly page. i have got the code somewhere on the net and made some modifications. below is the code snippet
function printpage() {
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById("memo_data").innerHTML;
var somestyle = '<style type="text/css"> #memotxt p {padding:0 0 0 0;margin:5px 0 0 0;}</style>';
var docprint=window.open("","sa",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Inter Office Memo</title>');
docprint.document.write('<link type="text/css" rel="stylesheet" href="../../Content/style.css"');
//docprint.document.write(somestyle);
docprint.document.write('</head><body><fieldset style="border:none;"><div class="memo-report-top"');
docprint.document.write(content_vlue);
docprint.document.write('</div></fieldset></body></html>');
docprint.document.close();
docprint.focus();
}
when i open this page in firefox it works exactly the way it is supposed to but when i open page in IE8 and press print button that triggers printpage() function. a new window pops up with ugly looks. i have also called a css file in printer friendly page but when i examine it in IE8 developer tool it shows me just css properties applied on body and fieldset. rest of properties are not there.
suggestions and help are highly appreciated
thanks
the div tag was left open in the following code line
docprint.document.write('</head><body><fieldset style="border:none;"><div class="memo-report-top"');
closing it resolved the problem
thanks everyone for ur input
regrds
adeel
Related
I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:
The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.
I have tried adding this to the CSS:
.k-popup .k-calendar {
font-size: 10px !important;
}
And the result was odd:
It only worked partially because only the month name was reduced, the numbers remained large...
The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.
EDIT
I tried to add the k-calendar class:
#(Html.Kendo().DatePicker()
.Name("concessionTOD")
.Start(CalendarView.Month)
.Value(DateTime.Now)
.Format("yyyy-MM-dd")
.Culture("pt-PT")
.HtmlAttributes(new { #class = "k-calendar" })
)
but the result was this:
you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.
EDIT 2
I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:
So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.
Also, I found in the documentation that
Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
I'm not sure how to interpret the second sentence but it may help in dealing with the issue.
Use the following CSS selector / definition:
.k-calendar {
font-size: 10px;
}
Check the following code snippet.
$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
title: "window with datepicker"
});
.k-calendar {
font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="win">
<input id="datepicker" value="10/10/2011"/>
</div>
OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.
So, I removed my iFrame setting from the Kendo Window:
#(Html.Kendo().Window()
.Name("addConcessionWindow")
.Modal(true)
//.Iframe(true)
.Visible(false)
)
and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).
Bottomline is:
it is not possible to have an overflowed iframe.
Say I'm embedding a bit of HTML code in an existing website. I'd like to know what CSS classes are already available. Currently I could do this as follows:
View the source for the page
Search for links that include .css files
Browse the contents of those until I find a useful class
That's tedious, and not exhaustive.
What's a better way?
EDIT You can also do this in Chrome:
Inspect Element
Select "Resources" tab
Navigate to Frames/../Stylesheets
View contents of individual stylesheets
I guess what I'm looking for is a higher level, interpreted view of the CSS styles available: not simply the contents of the CSS files. So if one style was defined identically in multiple places, I'd only want to see it twice. If two different styles applied to the same element, I'd want to see the two side by side.
Let's assume I can't do this by embedding code.
Press F12 in Chrome and select a magnifying glass.
In IE it's Also F12 and then select a little arrow.
Firefox has a similar feature or you can download Firebug which is great for web developers.
I think Web Developer plugin for firefox might be help you. You can add it from here.
The W3 CSS validator tool http://jigsaw.w3.org/css-validator/ will show all available css styles available to a webpage you specify, underneath a list of faulty styles.
copy this code immediately before the closing tag of the page's body :
I got code from here: http://snipplr.com/view/6488/
Tested in Chrome
//CODE
<div id="allclasses" style="text-align:left">
</div>
<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
var tag = allTags[tg];
if (tag.className) {
var classes = tag.className.split(" ");
for (var cn = 0; cn < classes.length; cn++){
var cName = classes[cn];
if (! classNames[cName])
{
classNames[cName] = true;
}
}
}
}
var classList = [];
for (var name in classNames)
classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>
I have this simple import of a stylesheet with media-query condition:
<style>#import url(/red.css) (min-width:400px) and (max-width:599px);</style>
I was assuming that browser will not use and not even download the stylesheet. However, stylesheet gets downloaded (tested in Chrome). Therefore I want to ask, if there is simple pure-CSS way how to make browsers not covered by media query to ignore and forbid them downloading the stylesheet.
Thank you for any help.
EDIT: I will re-phrase my question. Can I by using CSS3 specify stylesheet which should be loaded by browser depending on media-query condition (viewport width) ?
Well as #BoltClock and #Wesley Murch already mentioned, the browser will download the CSS even if is not able to supported or even if is not going to use it at that time, cause he needs to be prepared for the time he will be able to do so.
So if you really do not want to download the CSS file until something happens, the you can try to validate when the page loads if certain conditions are meet and if so, then you can do a "lazy load" and store the commented code (type 8 element, that would be in this case your style tag) inside a newly created style tag child, and that will make the browser to validate the newly created content and will download the CSS file for the style to work.
Any question you may face trying to implement it, do not hesitate in asking some clarification, maybe i can help you with your problem.
UPDATE:
I already tested it and IT WORKS :D, so you can use this code to start, hope it helps
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST CODE</title>
<script type="text/javascript">
function test(){
var elems = document.body.childNodes;
alert(elems);
for (var i = 0, il = elems.length; i < il; i++) {
var el = elems[i];
alert(el.nodeType);
if (el.nodeType == 8) {
var style = document.createElement('style');
style.innerHTML = el.nodeValue;
document.getElementById("css").appendChild(style);
break;
}
}
}
</script >
<style id="css">
</style>
</head>
<body onload="test()">
<!--#import url(red.css) (min-width:400px) and (max-width:599px);-->
</body>
</html>
NOTE:
I have not tried this on a style tag, just in images and stuffs like that, but i am sure (i have tried) that if you comment your style tag the browser do not download the CSS file, so maybe this is the way to go to accomplish what you want.
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.
Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?
What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print
Newer Firefox
Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.
Old firefox
Firefox does not need firebug now.
Run developer toolbar by pressing Shift+F2
Type media emulate print
Type media reset in order to return to standard view.
I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.
Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.
You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.
In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.
Actually, be aware that you might see #media print CSS when you don't expect it.
Like SO uses:
[..]#media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]
...and hence one might expect the CSS panel in Firebug to somehow show:
#media print {
#sidebar, #nav, [..], div.vote {
display: none;
}
}
But instead it shows the CSS as if the #media print is actually active, like:
#sidebar, #nav, [..], div.vote {
display: none;
}
(See also the related issue report: CSS Panel does not have #media UI.)
Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the #media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.
With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.
For example, you can switch an original
<link rel="stylesheet" type="text/css" media="print">
to
<link rel="stylesheet" type="text/css" media="screen">
and the browser will apply it. You'll also have to deactivate the screen-only ones.
Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.
Edit 1 This trick suggests me using javascript to automate this...
(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.
As pointed out above, this solution does not work with html code like this, because the styling inside the #media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
#media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):
There's a video of how to use the button in "View #media rules for Print" section of the "Examine and edit CSS" page.