I'm trying to print iframe content.
contentWindow.focus();
contentWindow.print();
This code works in IE, Firefox and Safari. But don't work in Chrome and Opera. These browsers print entire page.
I tried to use this topic How do I print an IFrame from javascript in Safari/Chrome. But it didn't help me.
Could someone help me?
This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this:
var clone=document.documentElement.cloneNode(true)
var win=window.open('about:blank');
win.document.replaceChild(clone, win.document.documentElement);
win.print();
I have not tested this but it should create a copy of the page in a popup window and print it, without having to load the content a second time from the server or loosing any DOM modifications you may want printed.
As I understand, it's impossible to implement iframe printing without opening new window.
My print function:
if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) {
var href = contentWindow.location.href;
href = href.indexOf("?") > -1 ? href + "&print=1" : href + "?print=1";
var printWindow = window.open(href, "printWindow", "scrollbars=yes");
printWindow.focus();
}
else {
contentWindow.focus();
contentWindow.print();
}
Also I added the following code to the end of the body (when print==1):
<script type='text/javascript'>
function invokePrint() {
if (document.readyState && document.readyState!='complete')
setTimeout(function() { invokePrint(); }, 50);
else if (document.body && document.body.innerHTML=='false')
setTimeout(function() { invokePrint(); }, 50);
else {
focus();
print();
}
}
invokePrint();
</script>
I cannot reproduce your problem with Chrome. Opera, however, does indeed still print the entire outer page when trying to only print the iframe.
I have devised a workaround and although it does work mostly, it is not 100% failsafe (amongst others because Opera wraps lines for printing; I don't know how to calculate the correct height in such cases). That said, the following code works at least reasonable (using jQuery for convenience):
if ($.browser.opera) {
var ifr = $('#youriframe');
var ifrbody = ifr.get(0).contentDocument.body;
var sheet = $([
'<style type="text/css" media="print">',
'body * {',
' display: none;',
'}',
'#youriframe {',
' border: none;',
' display: block;',
' height: ', ifrbody.scrollHeight, 'px;',
' margin: 0px;',
' padding: 0px;',
' width: ', ifrbody.scrollWidth, 'px;',
'}',
'<\/style>'
].join(''));
$('head').append(sheet);
window.print();
sheet.remove();
}
Hope this helps.
I tried above code and after making changes to the above codes I came with conclusive code as follows
var win=window.open('about:blank');
win.document.write('<html><head></head><body>');
win.document.write('<iframe frameBorder="0" align="center" src="'+window.location.href+'" onload="test()" style="width: 619px; height: 482px;"></iframe>');
win.document.write('<scr'+'ipt>function test(){window.focus();window.print()}</sc'+'ript></body></html>');
win.document.close();
if (window.focus) {win.focus()}
try this one
Related
I am modifying some JSP files, and every time I upload a new version, if people don't update the cache, the styles are not rendered as they should be; it is looking not good and without styles applied.
To solve this problem, I have followed an example from Stack Overflow that adds a numeric value to the CSS file, preventing it from being cached in the browser. The specific link I've seen is this one:
https://wpreset.com/force-reload-cached-css/
But I've found that whenever I press F5 or navigate to other JSP's that apply the same stylesheet, the files that are part of that CSS file are always seen just before rendering. I added a GIF with a dummy example to exhibit what I mean:
Animated GIF demonstrating the problem
How could I avoid this?
Would something like the following help?
/* CSS */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
|
// Js
$(window).load(function() { // Wait for window load
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
Like it is used here.
I have already been able to solve it.
In the end I have chosen to nest inside a window.onload, the document.ready like this:
window.onload = function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
var h, a, f;
a = document.getElementsByTagName('link');
for (h = 0; h < a.length; h++) {
f = a[h];
if (f.rel.toLowerCase().match(/stylesheet/) && f.href && f.href.indexOf("custom-common.css") != -1) {
var g = f.href.replace(/(&|\?)rnd=\d+/, '');
f.href = g + (g.match(/\?/) ? '&' : '?');
f.href += 'rnd=' + (new Date().valueOf());
}
}
$(document).ready(function () {
$('.main-link').click(function () {
And change the visibility of the html document. I have omitted the rest of the code, but you can get an idea. Many thanks to Robert Bradley and Adam for shedding light and helping me.
Hi and hope someone can help.
I have a live site and also a development site where I test out new code before deployment but basically they have the same content e.g.
Live = www.myserver.com/live/index.html
Development = www.myserver.com/development/index.html
Is there a way of setting the (say) CSS background property dependent upon the url that has been used to arrive at the site.
My current CSS =
body {
background: #eff;
/* change this to background: #ccc; if on development site */
margin:25px;
}
Why?
Well, I frequently find myself uploading or testing new code on the wrong site.
Not a big issue I know but useful if I could have a visual clue as to which site I'm testing.
My thanks for your interest.
Now Solved Thanks for input from #Adam Buchanan Smith, #Dekel and Mr Green.
I sort of used #Dekel's logic but changed it to jQuery along the following lines:
<script>
$(document).ready(function(){
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
// cab2 is the development site, cab the live site
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2
if (document.location.pathname.indexOf('cab2') > -1){
$('body').css({"background":"#BFFFDF"});
document.getElementById('live').innerHTML = "Development Site";
} else {
$('body').css({"background":"#efffff"});
document.getElementById('live').innerHTML = "Live Site";
}
}
</script>
My thanks to all for your interest!
Not something you can do in pure html/css, but you can use both javascript and server side language for that.
In javascript you can check if the document.location.hostname or document.location.pathname to check the domain/url you are currently using.
In javascript for example you can use:
if (document.location.pathname.indexOf('development') > -1) {
body = document.getElementsByTagName('body')[0]
body.setAttribute('class', body.getAttribute('class') + ' development')
}
Using PHP you can use $_SERVER['REMOTE_HOST'] and $_SERVER['REQUEST_URI'].
if (strpos($_SERVER['REQUEST_URI'], 'development')) {
echo "<body class=\"development\">";
} else {
echo "<body>";
}
And in the css file you can use:
body {
background: #eff;
}
body.development {
background: #ccc;
}
Theoretically something like this could work for you in just plain javascript using document.referrer;
<body onload="checkURL()">
</body>
<script>
function checkURL(){
var testPage = "www.testpage.com";
var livePage = "www.livepage.com";
var lastPage = document.referrer;
if (lastPage == livePage){
//do something here
}
else if {lastPage == testPage}
//do something else
}
else{
//umm what did you do?
}
</script>
I have following issues on conversion:
Text field not working on converting swf file to html5 using swiffy..
some animation are not working..
There is also sound problem in in some browser.
Is there any way to identify the textfield actions ?
I have googled but nothing works.. I think they are saying use js.
1) The key is to send the value to the swiffy object with this line in javascript:
function sendValue() {
myValue=inputFieldName.value;
stage.setFlashVars('myMessageFromTextfield='+myValue);
}
2) Then, inside the fla file, in actionscript2, get the value:
getValue = function() {
if(_level0.myMessageFromTextfield == "undefined" || _level0.myMessageFromTextfield == undefined) {
this.cat.animCat.myText.text = "";
} else {
this.cat.animCat.myText.text = _level0.myMessageFromTextfield;
returnButton._visible = true;
}
}
3) You need to constantly monitor when te data apears so use a setInterval:
myInterval = setInterval(this, "getValue", 100);
4) Now, to send the value back to html file, we use getURL with the data attached:
returnButton.onRelease = function() {
getURL("Javascript:showMessage('"+_level0.myMessageFromTextfield+" says the cat');");
}
5) And finally, again in javascript inside the html we execute the function with the parameter:
function showMessage(message) {
alert(message);
}
It works perfectly in IE, Firefox, Chrome, safari (ios).
So you now can send text in ipad or iphone.
I attached the source files in the next link:
https://onedrive.live.com/redir?resid=E64343A7ADE7D670!1401&authkey=!AO86aUEdyZRqQN4&ithint=file%2czip
Hope this help you (I've been trying to solve this during many months and until today i could).
Looked through the questions and there are few similar ones on the subject of "ReferenceError foo is not defined". However, I'm not able to detect the error in my code and get it working. It works fine in Chrome and Safari, but not in IE, Opera and Firefox:
The code in the HTML
<a href="javascript:foo(1)" target="_parent">
calls a javascript placed in the header as
<script type="text/javascript" src="http://www.site.com/include/script.js"></script>
which is defined as the following:
function foo(language){
url = window.parent.location.href;
parts = url.split('/');
page = parts[3];
newUrl = "";
if (language == 1){
newUrl = "http://www.site1.com/" + page;
} else if (language == 2){
newUrl = "http://www.site2.com/" + page;
} else{
newUrl = "http://www.site3.com/" + page;
}
window.parent.window.location.href = newUrl;
}
Reading the related questions I tested to change to window.foo = function(language){...}, but it didn't help.
Seems straight forward and as simple as it gets, but of some reason foo is undefined in IE and firefox.
Should be added that the javascript is in the "top.html" which is an embeded iframe for each page. Somehow chrome manages this while IE doesn't (but the script works if I browse to http://www.site1.com/top.html and click on the button calling redirect(language);)
Your problem is that the link is targeted (has a target="_parent" bit).
This means that it runs in the scope of the target window, not in the window it's in. And there is no function named foo there.
It look like your link is in a "iframe" tag, but the foo function is defined in top-level window object's scope.
There a two ways to fix this:
You should use window.partent to reference the top-level window object, try to change the link to
<a href="javascript:window.partent.foo(1)" target="_parent">
Or, move the function code to the same html file's head tag as the link.
By the way, you should use var keyword to declare variables.
Please dont mind for adding a vulnarable content as below.
jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
I have a multiline html text editor(tiny mce). When a user enters unappropriate words, as i entered above!. It will be saved properly in database. When i am trying to display the same data using a label. The displayed data disturbs the page design.
How can i fix this issue?
Please provide me a solution for this.
Thanks in advance
Regards,
Madhu BN
If it's about disturbing the page design when redisplaying the user's input and if the input is "inappropriate" then apply a CSS style to cut it off by using overflow:hidden.
<style>
.fixed { overflow:hidden; }
</style>
Then apply it to the div or container:
<div class="fixed" style="width:100px">The following input is really long and invalid.
fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>
This ensures the page layout is not disturbed. In the above example 100px is adhered to no matter the unbreaking length of the invalid text.
Edits:
If you want the wrapping behaviour try using CSS word-wrap: break-word;
<style>
.fixed {
word-wrap: break-word;
}
</style>
Or even put them both together to be really safe across browsers.
<style>
.fixed {
overflow:hidden;
word-wrap: break-word;
}
</style>
If you use PHP to print out the text, check out the wordwrap function.
Try inserting into the string. It's the HTML element for the "soft hyphen".
If using PHP, print(wordwrap($string, 75, ''));
More info on SO: Soft hyphen in HTML (<wbr> vs. )
This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:
(function($) {
$.fn.breakWords = function() {
this.each(function() {
if(this.nodeType !== 1) { return; }
if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
this.runtimeStyle.wordBreak = 'break-all';
}
else if(document.createTreeWalker) {
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function(str) {
str = str.replace(/^\s\s*/, '');
var ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
};
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
var node,s,c = String.fromCharCode('8203');
while (dWalker.nextNode()) {
node = dWalker.currentNode;
//we need to trim String otherwise Firefox will display
//incorect text-indent with space characters
s = trim( node.nodeValue ).split('').join(c);
node.nodeValue = s;
}
}
});
return this;
};
})(jQuery);
In javascript, add \u200b - Zero Width Space before displaying it
YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");
You could use InsertAt repeatedly to achieve #Ryan's solution, or you could perform validation to prevent such malformed data from reaching the database.
Regular expressions would also make this available to put the soft-hyphen in.
It can be fixed with a little CSS using overflow-x (lots of cool examples after link).
Just make sure you specify a width, otherwise overflow-x won't do you any good.
Try it here
<style>
div{
width: 105px;
overflow-x: hidden;
float: left;
margin: 10px;
padding: 4px;
background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>