I am using HTML bridge window.print() to print range between 20-30.
The client says it is printing blank pages.
We can only reproduce it on their machine.
This is the code in xaml that combines all the pages in one page and prints it.
This code works and prints all pages for me. We need this only on IE
I am using windows 8 and IE 10. But for the client it prints one blank page with the header and footer url. It works correctly if he prints the current page or prints all the pages from start to end.
But if he tries to print range, 23-30, it only prints 23-27 or so.
Sometimes it prints just one blank page with the header and footer url. Unfortunately none of these happen on my machine. The client said that they tried it on IE 8, IE 9 and IE 11.
Can some suggest what are my options or what are the things I could look out for
Page.xaml.cs
Dictionary<int, List<string>> AllPages = new Dictionary<int, List<string>>();
--code to add to AllPages
// Load all pages onto page
for (int Page = startPage; Page <= endPage; Page++)
{
if (AllPages.ContainsKey(Page))
{
List<string> PageLines = AllPages[Page];
this.m_Div = this.m_HtmlDoc.CreateElement("DIV");
if (Page != AllPages.Count)
{
this.m_Div.SetAttribute("ID", "Page");
}
this.m_Table = this.m_HtmlDoc.CreateElement("TABLE");
this.m_Div.AppendChild(this.m_Table);
for (int Line = 0; Line < PageLines.Count; Line++)
{
this.m_TR = this.m_HtmlDoc.CreateElement("TR");
this.m_TD = this.m_HtmlDoc.CreateElement("TD");
this.m_TD.SetProperty("innerText", PageLines[Line]);
this.m_TR.AppendChild(this.m_TD);
this.m_Table.AppendChild(this.m_TR);
}
this.m_PrintReport.AppendChild(this.m_Div);
}
}
HtmlPage.Window.Invoke("printfunction", m_PrintReport);
CSS
body
{
background:#ffffff;
color:#000000;
font-family: rvConsolas;
margin: 0px; /* the margin on the content before printing */
width:100%;
height:100%;
background-color:#DDD;
min-height:100%;
}
html{
width:100%;
height:100%;
}
#font-face
{
font-family: rvConsolas;
font-style: normal;
font-weight: normal;
src: url(EmConsola.eot);
src: url('EmConsola.eot?#iefix') format('embedded-opentype')
}
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
font-family: rvConsolas;
overflow: hidden;
display:inline-block;
}
td
{
font-family: rvConsolas;
overflow:visible;
font-size: 52%;
display:block;
}
#Page
{
page-break-after: always;
}
ASPX Page
<link href="Style/style.css" rel="Stylesheet" media="screen" />
<link href="Style/print.css" type="text/css" rel="Stylesheet" media="print" />
<script src="Scripts/Silverlight.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
printReport.style.display = false;
}
function onSLLoad(plugIn, userContext, sender) {
alert("silverlight");
window.status +=
plugIn.id + " loaded into " + userContext + ". ";
}
function printfunction(arg) {
var contents = arg.innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head>');
frameDoc.document.write('</head><body>');
var path = "Style";
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/print.css';
frameDoc.document.getElementsByTagName('head')[0].appendChild(style);
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
frame1.contentWindow.focus();
frame1.contentWindow.print();
document.body.removeChild(frame1);
},1000);
}
</script>
</head>
<body>
<div id="printReport" style ="
white-space: nowrap; ">
</div>
</body>
There are a few things worth checking, as you have not provided enough CSS to reproduce the problem
Firstly, this is a HTML problem, and has nothing to do with Silverlight. You should be able to generate a raw HTML file that reproduces the problem on the client site.
Secondly, you should try printing to different paper sizes. US A4 size is slightly shorter than international A4.
You should explore using CSS page break directive:
div#PAGE {page-break-after: always;}
Update If you wish to support page orientation, then you can use media queries in your CSS.
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
div#PAGE {page-break-after: always;}
}
Since our poor developer still has to support (cough cough) IE8 - try out polyfills. They are javascript libraries that give IE8 media query support. See respond.js or modernizr.
In order to show up in Internet Explorer, tables created with Javascript should have a TBODY element (Can't dynamically add rows to a <TABLE> in IE?).
Related
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
How do I define different fixed_top values within magellan's options, or css, to accommodate different header heights on various devices? My header height varies from 60px on medium to 120px on large.
The inline nature of Magellan's options trumps all css I use to change this within my media queries.
I have also tried interchange to swap out values to no avail.
I've had the same problem. Currently there is not really a way to fix this with solely Magellan, for it uses fixed parameters setting the offset. I've applied the following fix:
Remove fixed from the data-magellan-expedition attribute. Magellan will no longer handle the fixed-positioning
Add a 'break point' script that adds classes to the body which you can use to applied media queries. These break point classes are reusable for other applications as well. An example:
Let's say your html is like:
<div data-magellan-expedition class="your-magellan-nav-bar">
<div data-magellan-arrival="some-header">
<a href="#some-header">
</div>
</div>
<!-- ... -->
<h3 data-magellan-destination="some-header">Some Header</h3>
<a name="some-header></a>
Note the missing fixed in data-magellan-expedition="fixed".
Now add some JS to your document:
function activateScrollpoints(scrollPoints) {
var $window = $(window);
var $body = $(document.body);
var tId = null;
function onScroll() {
var windowScrollTop = $window.scrollTop();
scrollPoints.forEach(function(point) {
$body.toggleClass('break-'+point, windowScrollTop >= point);
});
tId = setTimeout(function() {
clearTimeout(tId);
window.requestAnimationFrame(onScroll);
}, 100);
}
window.requestAnimationFrame(onScroll);
}
activateScrollpoints([310, 500]);
The above will add a class break-310 once the user scrolls more than 310px and another class break-500 if the user scrolls 310px.
Now in your CSS you could do something like:
#media #{$medium-up} {
body.break-310 .your-magellan-nav-bar {
position: fixed;
top: 310px; /* Some value for your offset */
left: 0px;
}
}
#media #{$small-only} {
body.break-500 .your-magellan-nav-bar {
position: fixed;
top: 500px; /* Some value for your offset */
left: 0px;
}
}
I want to remove the footer of Disqus plugin. Disqus works fine, but the footer looking a little iterating.
I want to remove the footer so that I can only see the relevant comments.
You can see the footer at the end of the image.
<div class="well">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'destinationcompk'; // required: replace example with your forum shortname
function disqus_config() {
this.callbacks.afterRender.push(function() { alert('clayton') });
}
var disqus_identifier = "image_".concat(12);
var disqus_title = "image_title".concat(12);
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments
</a></noscript>
</div>
I'm just trying to hide footer that's it!
In your CSS add:
#disqus_thread {
position: relative;
}
#disqus_thread:after {
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0;
background: white;
}
You can use negative margins and overflow hidden.
#disqus_thread {
overflow: hidden;
iframe {
margin-bottom: -54px;
}
}
I was under the impression that the new disqus uses an iframe and therefore custom CSS can't be applied:
http://help.disqus.com/customer/portal/articles/526768-introducing-the-new-disqus-and-f-a-q-
For the most part, customization is different in the new Disqus because we decided to completely re-implement our commenting embed inside of an iframe. This iframe is hosted on disqus.com and, as such, the browser won't let your website apply styles to it using CSS statements.
Outside of the technical workarounds, there is a legitimate way to do this. According to the website, you can remove this with a Pro subscription, which is around $100/month at the time of this answer.
https://<accountname>.disqus.com/admin/settings/general/
In the Joomla administration panel go to administrator - extensions - plugin manager and disable Disqus.
Example screenshot below:
Am wondering if there is a way to ignore tags:
<!-- I can add code here -->
<!-- I cannot edit the following start -->
<style>
div, td {
color: #555555;
font-size: 10pt;
text-align: left;
}
</div>
<!-- I cannot edit the following end -->
<div id="myapp" style="color:red"><div>Test</div></div>
Am wondering if there is anything that I can add to skip these generic div/td styles. e.g. #myapp div { font-color: inherit; }
There is no straightforward CSS method to ignore later CSS rules.
The most reliable option is to use JavaScript to remove the tag.
Example: Remove the, say, first <style> tag after the <script> element:
<script id="unique-id-script">
setTimeout(function() {
var removeTheNthStyleElement = 1, found = 0,
script = document.getElementById('unique-id-script'), elem = script;
while (elem = elem.nextSibling) {
if (elem.nodeName.toUpperCase() === 'STYLE') {
if (++found === removeTheNthStyleElement) {
// Remove style element => disable styles
elem.parentNode.removeChild(elem);
// Remove temporary script element
script.parentNode.removeChild(script);
break;
}
}
}
}, 4);
</script>
... anything but a style element...
<style>
/* I want to prevent these rules from being used */
</style>
This will inherit red color
#myapp div{
color: inherit;
}
I'm working on adding content to a web-page with javascript. The problem is that the CSS in IE (7) doesn't seem apply to the dynamically added content.
Here's an example document..
<html>
<head>
<style type="text/css">
p.foo { color: #FF4400 ; background-color: #000000 }
p.bar { color: #FF0000 ; background-color: #000000 }
</style>
<script type="text/javascript">
function add() {
var node = document.createElement("p");
node.setAttribute("class", "bar");
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};
</script>
</head>
<body onload="add()">
<p class="bar">bar</p>
<p class="foo">foo</p>
</body>
</html>
In FF, the newly added 'New Content' paragraph has the style applied to it, but in IE, it doesn't. This seems like something obvious enough that it ought to be easily searchable-for, but some obvious queries gave me nothing.
So what's the trick?
Why not use a framework, such as jQuery, MooTools, extJs, Dojo, Prototype, etc., that has already solved all of these problems?
But if you insist on doing it yourself, try using:
function add() {
var node = document.createElement("p");
node.className = 'bar'; // <- use in leu of setAttribute()
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};