the Css is not read in the print code - javascript

I have tried this script but the style is not read properly while printing can anyone help me figure out the problem?
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//frameDoc.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>


Issue may be with css file path.
Write it according to root path like this.....
<link rel="stylesheet" href="../css/style.css" />

Related

How to change file name of window.print()

I can't change the filename of window.print()
Here's my code:
function printDiv() {
var divContents = document.getElementById("report_div").innerHTML;
var a = window.open(' ', ' ', 'height=700, width=900');
a.document.write('<html><head>');
a.document.title= "Case Report";
a.document.write('<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">');
a.document.write('<link rel="stylesheet" href="../../css/style.css" />');
a.document.write('<style>#page{size:landscape} .statustxt{color:black !important;}</style>');
a.document.write('</head><body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
setTimeout(function () {
a.window.print();
}, 500);
}
And here's the window
And when i try to save as pdf
i want to make the default file name from download.pdf to casereport.pdf

Why this Javascript code won't work on Chrome if Jquery loads as async?

I have a JavaScript in the WP theme I'm developing that hides part of the text inside <p> tag with the class "more". I set the Jquery to load as async in the header, but for some reason it works well on Firefox but not on Chrome. In my understanding, it's always good to use the async attribute with all independent scripts.
Header:
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script async src="https://use.fontawesome.com/726be72ac8.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
The JavaScript code that provides the hide-text function goes right after the opening <body>. This way I assure it executes before the <p> tag is loaded:
<script>
$(document).ready(function() {
var showChar = 150;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
Tag:
<p class="more">Text goes here</p>
If I remove the async attribute, it works fine on Chrome.

Adding async tells the browser that it's OK to run the jQuery script after your code - although that's not guaranteed and the script can run whenever the browser decides to run it. So it's just not appropriate in this case even if it works in Firefox.

avoid loading jquery multiple times

using Google Page Speed I can see it seems that Jquery UI and Jquery and other js-libraries are loaded multiple times even though I only include them once in my page:
How can I avoid this ?
UPDATE
My code looks like this (I have removed the main part of the html leaving all the javascript stuff):
<!doctype html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" >
<head id="hdHead"><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
My Page
</title>
<!--Utils-->
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mysite" /><meta name="viewport" content="width=980,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/css/touch/gfx/hs-icons/h/apple-touch-icon.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/css/touch/gfx/hs-icons/m/apple-touch-icon.png" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/css/touch/gfx/hs-icons/l/apple-touch-icon-precomposed.png" />
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/css/touch/gfx/hs-icons/l/apple-touch-icon.png" /><link rel="shortcut icon" href="/css/gfx/favicon.ico" />
<!-- W3C way of 2005 for XHTML1.0 http://www.w3.org/2005/10/howto-favicon -->
<link rel="icon" type="image/png" href="/css/gfx/myspot.ico" />
<!--Styles-->
<link href="/plugins/jqueryui/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="/css/desktop/myspot.min.css?v=2803" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop/myspotoldie.css?v=0114" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="/css/desktop/myspotie.css?v=0114" />
<![endif]-->
<!--scripts (more in page bottom-->
<script src="/scripts/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log("no jquery");
document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
}
if (typeof jQuery.ui == 'undefined') {
console.log("no jquery ui");
document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
}
var defText = 'Restaurant ved åen...';
</script>
<script src="/scripts/desktop/behavior.min.js?v=2803" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/libs/jquery.cookie.js"></script>
<!--do not move recordOutboundLink to bottom -->
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function () {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function () {
googletag.defineSlot('/1025597/Place_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-0').addService(googletag.pubads());
googletag.defineSlot('/1025597/Place_sidebar_bottom', [160, 600], 'div-gpt-ad-1328824112752-1').addService(googletag.pubads());
googletag.defineSlot('/1025597/Place_sidebar_middle', [234, 60], 'div-gpt-ad-1328824112752-2').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-3').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_1', [234, 60], 'div-gpt-ad-1328824112752-4').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_2', [234, 60], 'div-gpt-ad-1328824112752-5').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_3', [234, 60], 'div-gpt-ad-1328824112752-6').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_4', [234, 60], 'div-gpt-ad-1328824112752-7').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_5', [234, 60], 'div-gpt-ad-1328824112752-8').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<script type="text/javascript">
//Tabs
jQuery(document).ready(function () {
jTabs = jQuery("#tabs").tabs({
select: function (event, ui) {
try {
var newhasharr = ui.tab.toString().split("#");
window.location.hash = newhasharr[1];
}
catch (err) {
}
}
});
LoadTabFromHash();
function LoadTabFromHash() {
try {
var hash = window.location.hash.replace('#', '');
if (hash != '') {
jTabs.tabs("select", hash);
}
}
catch (err) {
}
}
jQuery(".jclickatab").click(function (ev) {
ev.preventDefault();
var hash = jQuery(this).attr("href").replace("#", "");
if (hash != '') {
jTabs.tabs("select", hash)
}
});
});
</script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
</head>
<body>
<form method="post" action="/mypage" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1">
<div class="aspNetHidden">
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
ChangeColourOfInvalidControls();
return true;
}
//]]>
</script>
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '139505527456',
channelUrl: '//www.myspot.dk/channel.html',
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/da_DK/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<div id="container" class="placepage">
<!-- AddThis Buttons BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:width="105">
</a>
</div>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_google_plusone"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=myspot"></script>
<!-- AddThis Buttons END -->
</div>
<script>
jQuery(document).ready(function () {
TidyUpPlaceImages();
jQuery(".mainplacepix a").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'titlePosition': 'over',
'overlayShow': false,
'showNavArrows': true
});
});
function TidyUpPlaceImages() {
var mainImageHeight = jQuery(".mainplacepix a:first").height();
var thumbsHeight = 0;
jQuery(".mainplacepix a:gt(0)").each(function (index) {
thumbsHeight += jQuery(this).height();
if (thumbsHeight <= mainImageHeight) {
jQuery(this).show();
}
else {
return;
}
});
}
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#txtReviewBody').keyup(function(event) {
if(jQuery(this).val().length>50 && !jQuery('#reviewparametercontainer').is(":visible")) {
jQuery('#reviewparametercontainer').slideDown();
_gaq.push(['_trackEvent', 'Reviews', 'LenghtAbove50', 'empty']);
}
}).blur(function() {
if(jQuery(this).val().trim().length<1) {
jQuery('#reviewparametercontainer').slideUp();
_gaq.push(['_trackEvent', 'Reviews', 'BlurWithoutWriting', 'empty']);
}
});
jQuery(".writeReviewDatePicker").datepicker(
{
maxDate: new Date()
});
})
</script>
<script type="text/javascript">
var reviewErrorMess = 'Some error';
var ratingErrorMess = 'Some error';
var reviewScriptErrorMess = 'Some error';
function validateReviewForm() {
var imValid = true;
var reviewlength = jQuery('#txtReviewBody').val().length;
var myspotrating = jQuery('#rating input[type="hidden"]').val().length;
if (reviewlength < 2) {
setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewErrorMess);
imValid = false;
}
else {
if (jQuery('#txtReviewBody').val().indexOf('<') > -1) {
setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewScriptErrorMess);
imValid = false;
}
}
if (rating < 1) {
setErrorFeedbackToTheRight(jQuery('#rating'), ratingErrorMess);
imValid = false;
}
return imValid;
}
jQuery(document).ready(function () {
jQuery('#ratingmyspot.error').live('click', function () {
removeErrorFeedback(jQuery(this));
});
jQuery('textarea.error').live('keyup', function () {
removeErrorFeedback(jQuery(this));
});
jQuery('#ddlTypes').change(function (ev) {
FilterReviewParams(jQuery(this).val());
});
FilterReviewParams(jQuery('#ddlTypes').val());
});
function FilterReviewParams(categoryId) {
var selector = '#reviewParameters .ratingcontrol.' + categoryId;
var jAll = jQuery('#reviewParameters .ratingcontrol:visible');
if (jAll.length > 0) {
jAll.hide({
duration: 1000,
complete: function () {
jQuery(selector).show(1000);
}
});
}
else {
jQuery(selector).show(1000);
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#listOfOffers input[type="submit"]').button();
if (jQuery(".offersFromDateTimePicker").length > 0) {
jQuery(".offersFromDateTimePicker").datetimepicker({
onSelect: function (selectedDate, sender) {
setMinDateTime(selectedDate, ".offersEndDateTimePicker");
}
});
var minDate = jQuery(".offersFromDateTimePicker").val();
jQuery(".offersEndDateTimePicker").datetimepicker({
minDate: minDate
});
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#placepageevents input[type="submit"]').button();
if (jQuery(".eventsFromDateTimePicker").length > 0) {
jQuery(".eventsFromDateTimePicker").datetimepicker({
onSelect: function (selectedDate, sender) {
setMinDateTime(selectedDate, ".eventsEndDateTimePicker");
}
});
var minDate = jQuery(".eventsFromDateTimePicker").val();
jQuery(".eventsEndDateTimePicker").datetimepicker({
minDate: minDate
});
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".aboutplaceimages a").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'titlePosition': 'over',
'overlayShow': false,
'showNavArrows': true
});
});
</script>
</footer>
<script src="/scripts/libs/jquery.highlightFade.js" type="text/javascript"></script>
<script src="/plugins/jqueryui/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/desktop/mygmap.js"></script>
<script type="text/javascript" src="/scripts/desktop/place.min.js?v=0310a"></script>
</script>
<script type='text/javascript'>
jQuery.ajax({
url: 'http://demo.easyrec.org:8080/api-js/easyrec.js',
dataType: "script",
success: function () {
if (typeof (easyrec_sendAction) != "undefined") {
easyrec_sendAction("view",
{
itemId: "48863",
itemUrl: "/mypage",
itemDescription: "Mypage",
});
}
}
});
</script>
<link rel="stylesheet" href="/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
type="text/css" media="screen" />
<script src="/plugins/jqueryui/jquery.ui.datepicker-da.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/libs/jquery.lazyload.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("img.lazy").lazyload();
});
</script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</form>
</body>
</html>
thanks,
Thomas

Obviously you are using/loading multiple versions of jquery, jquery-ui, etc. which is definitely suboptimal
For example:
jquery-1.7.min.js
jquery.min.js (Version 1.7.1)
jquery-ui.min.js (Version 1.8.11)
...
Also the following block seems to be obsolete, so try to remove it and load the js files from your server instead from google.
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log("no jquery");
document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
}
if (typeof jQuery.ui == 'undefined') {
console.log("no jquery ui");
document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
}
var defText = 'Restaurant ved åen...';
</script>
You are using many 3rd party libraries, so I cannot guarantee, that they load jquery as well

Search your solution for the Jquery.min.js file and ensure it is not getting referenced twice. If you are using a master page or a template, ensure it is not defined on that page and also on the page you are currently viewing.

Random CSS file loading - not working in IE8 (7?)

I'm loading a CSS file dynamically using a little bit of randomization:
var cookie = $.cookie('necgroupcolour', { path: '/' });
if (cookie == null) {
var rnd = Math.floor(Math.random() * 3);
$.cookie('necgroupcolour', rnd, { path: '/' });
}
switch ($.cookie('necgroupcolour', { path: '/' })) {
case "0":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
break;
case "1":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/blue/HomeMaster.css" />');
break;
case "2":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/green/HomeMaster.css" />');
break;
default:
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
}
This works fine in Firefox, Safari, Chrome, but not in IE8 or lower.
When running this through Fiddler and checking the source you can see that no CSS file is getting loaded.
Any ideas how I could solve this?

Maybe try put this code in head and use document.write. ugly, but will work....

I know this may be too late, but it may help someone else.
Instead of using
$('head').append('<link rel="stylesheet" type="text/css" href="PATH_TO_CSS_FILE>');
use the following code:
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", PATH_TO_CSS_FILE);
document.getElementsByTagName("head")[0].appendChild(fileref);

jQuery append css link to iframe head

I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.
<script type="text/javascript">
$(document).ready(function() {
$('#outline_text_ifr')
.contents()
.find('head')
.append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>

var $head = $("#IFrame").contents().find("head");
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));
or
$('#IFrame').contents().find('#div1').css({
color: 'purple'
});

Categories

Resources