How do I put an image on a pop-up window and link it to a CSS file? Let's say I want to insert an image called big.jpg on my computer. Can this be done by simple Javascript code?
popupWindow.document.writeln('<html><head>');
popupWindow.document.writeln('<link rel="stylesheet" type="text/css" href="tressider.css" />');
popupWindow.document.writeln('</head><body>');
popupWindow.document.writeln('<h2 class="pp">'+help[3].office+'</h2>');
popupWindow.document.writeln('<p></p>');
popupWindow.document.writeln('<h3 >'+'725-0911'+'</h3>');
popupWindow.document.writeln('<p></p>');
popupWindow.document.writeln('<div class="wocao">'+help[3].Description+'</div>');
popupWindow.document.writeln('</body></html>');
popupWindow.document.bgColor="White";
popupWindow.focus();
popupWindow.document.close();
Yes this can easily be done by adding style and img elements into the window directly.
Just use:
var _image = popupWindow.document.createElement('img');
_image.setAttribute('width',#);
_image.setAttribute('height',#);
_image.setAttribute('src',"myimg.png");
popupWindow.document.appendChild(_image);
And do the same for the style tag.
var _style = popupWindow.document.createElement('img');
_style.setAttribute('src',"mystyle.css");
popupWindow.document.appendChild(_style);
Related
I am using document.write in a function to give different CSS to user's based on their choosing.
function blue() {
document.write('<link rel="stylesheet" type="text/css" href="http://ilam.irib.ir/documents/697970/237563314/blue.css" />');
}
I am calling the function from an anchor tag.
function color2(){
document.getElementById("navigation").innerHTML +='<a class="myButton" onclick="blue()" background-color:"#05c8f2";></a>';
}
As you can guess, when the link is clicked, the page clears out and I get a blank page.
Is there any way to fix this problem? I don't want to stop page refreshing, I'm just trying to fix the problem in any way possible!
Note: don't ask why I'm adding code using JavaScript, and not directly into HTML code. This site is a large scale system and we just have access to JavaScript and CSS. So this is all we can do to edit our pages.
document.write rewrites the body , as a result the only thing in your document remains is the css file you added and hence it is blank.
View this
Code from above link :-
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Instead of rewriting while dom , we append the link element inside head tag
I have the following code in my document:
<a class="twitter-widget" href="url" data-widget-id="138843679974442730">Twitter Timeline</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
data-widget-id is connected to one style. Right now if there is a theme change on the website (I replace all responsible stylesheets and images) everything changes but the Twitter widget.
Since the widget itself is an iframe, I can't change any stylesheets attached to it.
Is there an easy way to change the style of the widget without reloading it (deleting the tag, creating the tag, running js)?
You can style elements in the Twitter widget iframe using JavaScript.
First, you need the active document in the iframe's nested browsing context:
var doc = document.getElementById("twitter-widget-0").contentDocument;
Then, you can apply styles (e.g.):
doc.querySelector(".timeline-header").style["background-color"] = "black";
doc.querySelector(".timeline-header a").style["color"] = "white";
Example: http://codepen.io/smockle/pen/IJHnj
There is no straight forward way of doing this, so I've decided to bring in another dependency that will be delaying the onload event..
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
And here is the code that did the job:
var twitterBox = document.getElementsByClassName("twitterBox");
if (!twitterBox || twitterBox.length == 0) { return true; }
var twitterTimeline = document.createElement('a');
twitterTimeline.className = 'twitter-timeline';
twitterTimeline.href = 'url';
twitterTimeline.innerHTML = 'Twitter Timeline';
twitterTimeline.setAttribute('data-widget-id', '388742673974046720');
twitterBox[0].removeAttribute('data-twttr-id');
twitterBox[0].innerHTML = '';
twitterBox[0].appendChild(twitterTimeline);
twttr.widgets.load();
I am trying to copy a div to a new window for printing, That's working fine
but the div his copied without any style attached to it.
$('#PrintNews').bind('click', function () {
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=1000,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
var doc = myWindow.document;
doc.open();
$(printContents).find("#PrintNews").remove();
doc.write($(printContents).html());
doc.document.close();
doc.focus();
doc.print();
doc.close();
});
});
How can i open that div in a new window for printing, but with all of his styles like in the original div?
you should build the html of new window something like this, to link extarnal css files.
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='/css/print.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
doc.write("</head>");
doc.write("<body>");
doc.write($(printContents).html());
doc.write("</body>");
doc.write("</html>");
It's because styles had not been loaded before printing.
var showPrintWindow = function (context) {
var printWindow = window.open('', '');
var doc = printWindow.document;
doc.write("<html><head>");
doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />");
doc.write("</head><body>");
doc.write(context);
doc.write("</body></html>");
doc.close();
function show() {
if (doc.readyState === "complete") {
printWindow.focus();
printWindow.print();
printWindow.close();
} else {
setTimeout(show, 100);
}
};
show();
};
It depends on the way the div is styled. If the styles are applied based on the ID or class then you should be fine to just include the same stylesheet in the new window. However if any of the styles are based on the element's ancestors then it becomes tricky as you would have to copy the ancestral elements in order for the exact styles to be applied.
It sounds like you ought to be using print-specific styles. You can apply a stylesheet to print only by including the media="print" attribute on the stylesheet link. This stylesheet is then responsible for hiding any elements in the page that you don't want to print and positioning the ones that you do. This way you are not subject to popup blockers and give the user one less step to print the document.
You can achieve the same by using media queries in your original stylesheet. Here is a very simple example:
#media print {
.print {width:100%;}
.noPrint {display:none;}
}
To test this just remove the #media wrapper and see how it looks in your browser. It should give you a pretty good idea of how the page will look on paper.
Include external css into the window to which you are copying your DIV. otherwise only the inline styles will be copied.
I am trying to print a report which includes text and images. I am using a javascript function to invoke the print functionality. Everything works well except the images on the page do not show up in the new print window. I have included all the CSS files with it but still my images dont appear in the new print window. Its the same even if I dont include the CSS links.
My javascript function to print is :
function printfun(){
var disp_setting = "toolbar=no,location=no,directories=no,menubar=no,";
disp_setting += "scrollbars=no,left=0,top=0,resizable=yes,width=900 height=650,modal=yes,";
var content_vlue = document.getElementById('<%= tblCharts.ClientID %>').innerHTML;
var docprint = window.open("", "", disp_setting);
docprint.document.write('<html><head>');
docprint.document.write('</head>');
docprint.document.write('<body onLoad="self.print()">');
docprint.document.title = "";
docprint.document.write('<link href="../style/design.css" rel="Stylesheet" type="text/css" />');
docprint.document.write('<link href="../App_Themes/style/graphs.css" rel="Stylesheet" type="text/css" />');
docprint.document.write(content_vlue);
docprint.document.write(tblCharts);
docprint.document.write("</body></html>");
docprint.document.close();
docprint.focus();
}
Are the images background images in the CSS? If so, the browser likely isn't set to print those by default. That'd a browser setting the user would have to change.
Well, the title pretty much describes my question:
How to load the background-image dynamically after it has been fully loaded? Sometimes, I must use backgrounds that are so big that it can take a while for the browser to download it. I'd rather 'load it in the background' and let it fade in when it has been fully loaded.
I think jQuery would be best to be using, but I also want my background to appear if JavaScript has been disabled. If this really isn't possible, so be it, but I think it is?
Best regards,
Aart
........
EDIT:
Thanks a bunch, guys! I've been bugged with this for ages and just couldn't think of a nice and easy way.
I converted Jeffrey's Javascript-solution into a jQuery one, just because jQuery's built-in fade looks so awesome.
I'll just post it here in case anyone else has the same issue:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#img').css('opacity','0').load(function() {
$(this).animate({
opacity: 1
}, 500);
});
});
</script>
<img src='yourimage.jpg' id='img'/>
If the image is included with an img element:
<img src="bg.jpg" id="img" onload="this.style.opacity='1'">
<script>
document.getElementById("img").style.opacity="0";
</script>
That should load the image normally if JavaScript is disabled, but show it only once it loads assuming it's enabled.
One thing to note (that I overlooked): some browsers will not even attempt to load an image if its display property is none. That's why this method uses the opacity attribute.
You can't do it when JS is disabled. However, what you can do is set the background image in CSS and then use the following script (assuming the element has the ID myelem).
(function() {
var elm = document.getElementById('myelem'),
url = 'background image URL here';
elm.style.backgroundImage = "none";
var tmp = new Image();
tmp.onload = function() {
elm.style.backgroundImage = "url('"+url+"')";
// or insert some other special effect code here.
};
tmp.src = url;
})();
EDIT: Although, make sure your background images are optimal. If they are PNG, try having them Indexed with as small a colour table as possible, or make sure the alpha channel is removed if there is no transparency. If they are JPEG, try adjusting the compression.
Check the example on this page:
http://www.w3schools.com/jsref/event_img_onload.asp
Using "image.onload" will start your code only when the image is ready
Without javascript you can't have events, so you won't be able to know if the image is loaded, at least for the first rendering.
You can also use a css preload (put the image as a background in a hidden div), but that would work better in your first refresh and not while loading.
You can set a variable to the image, and when it loads, set it to the body background:
var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
What you are looking for is an image onLoad method. If you set the image with a display:none it wont be visible. To get around the possible lack of javascript, you do the following:
<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
document.body.style.backgroundImage = "url(image.png)";
}
</script>
This way, if javascript isnt enabled, the bg will load as normal. If it is, it will display at the end