i am doing a project for my school, why is it my logo doesn't included in my print layout?. I am populating my <div class="cliniclogo" style="background-image: url()"> through ajax. and now i want to include it in my printing layout. How can i include this?
i tried my code below, but this doesn't include my printing logo.
Here is my code:
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p class="printingdate">Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12 justifypar">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
</div><!-- border -->
Now as you can see in my javascript printing, i put a css there which is to display my logo like this:
'.cliniclogo { ' +
'display: block;' +
'}' +
now, here is my css in printing using javascript (full code):
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'#page {' +
'size: landscape;' +
'}' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'border-style: double;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'margin-top: 28px; ' +
'padding: 0px; ' +
'}' +
'.certheader { ' +
'font-size:20px;' +
'margin:0px;' +
'padding:0px;' +
'}' +
'.medcert { ' +
'font-size:38px;' +
'font-weight: bold;' +
'text-align: center;' +
'margin: 58px 58px;' +
'word-spacing: 12px;' +
'}' +
'.printingdate { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-bottom: 53px;' +
'}' +
'.certmarg { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'}' +
'.startindent { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-right: 14px;' +
'}' +
'#cert_physician_signatory { ' +
'font-size:21px;' +
'font-weight: bold;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-top: 95px;' +
'}' +
'.justifypar { ' +
'text-align: justify;' +
'text-justify: inter-word;' +
'}' +
'.cliniclogo { ' +
'display: block;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
Related
I am trying to pass multiple parameters in a 'onclick' but it is not working and JS gave me headaches.
When clicking the 'div' and going to agregarADetalleMenu gives me this error:
SyntaxError: missing ) after argument list
function LlenarTableMenu(data) {
$('#cards-productos').empty();
$.each(data, function(i, val) {
var block2 = '<div class="col-4 col-md-6" onclick="agregarADetalleMenu(' + val.id + ', ' + val.name + ', ' + val.price + ')">' +
'<figure class="card card-product"> ' +
'<div class="img-wrap">' +
' <img src="' + val.imagen + '">' +
#* '<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>' + *# '</div>' +
'<figcaption class="info-wrap">' +
'' + val.name + '' +
'<div class="action-wrap"> ' +
'<div class="price-wrap h5">' +
#* '<span class="price-new">' + val.price.toFixed(2) + '</span>' + *# '<span style="display: none;" class="catid">' + val.id + '</span>' +
'</div>' +
'</div>' +
'</figcaption> ' +
'</figure> ' +
'</div>';
$("#cards-productos").append(block2);
});
}
Do you mean this?
Note I wrapped the function values in quotes - you nested your quotes
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="col-4 col-md-6" onclick="agregarADetalleMenu('${val.id}','${val.name}',${val.price})">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
This is better
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="agregar col-4 col-md-6" data-id="${val.id}" data-name="${val.name}" data-price="${val.price}">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
and then have
$('#cards-productos').on("click",".agregar",function() {
agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price)
})
You're missing quotes around the values being passed in to the function. Because you already used single and double quotes in your string, you can use escaped single (or double) quotes as follows:
onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"
How to display one of two classes based on if there is data in the js array.
e.g. if there is responseData.title show class grey else class white
I am trying this now:
let resultHTML = '<article class="item">\
<div class="post-main">\
<header class="clear">\
<a href="' + responseData.url + '"</a>\
<span class="post-date">just now</span>\
</header>\
'if (responseData.title) {
'<section class="grey">'
} else {
'<section class="white">'
}'\
' + articleImage + '\
<h3>' + responseData.title + '</h3>\
<div class="post-about">' + responseData.about + '</div>\
</section>\
</div>\
</article>';
You can use the ternary operator.
In your case, it would be like this:
let resultHTML = '<article class="item">\
<div class="post-main">\
<header class="clear">\
<a href="' + responseData.url + '"</a>\
<span class="post-date">just now</span>\
</header>\
' + responseData.title ?
'<section class="grey">'
:
'<section class="white">'
+ '\
' + articleImage + '\
<h3>' + responseData.title + '</h3>\
<div class="post-about">' + responseData.about + '</div>\
</section>\
</div>\
</article>';
I will prefer using Template literals (Template strings) with Conditional (ternary) operator which is more cleaner.
Demo:
let responseData = {title:'abc'}
let articleImage = 'test';
let resultHTML = `<article class="item">
<div class="post-main">
<header class="clear">
<a href=responseData.url </a>
<span class="post-date">just now</span>
</header>
${
responseData.title ?
'<section class="grey">'
: '<section class="white">'
}
${articleImage}
<h3> ${responseData.title} </h3>
<div class="post-about"> ${responseData.about} </div>
</section>
</div>
</article>`;
console.log(resultHTML);
I created multiple bootstrap panels using for loop with the help of Jquery.
The problem is that the tabpanel is not working, I am unable to expand nor collapse the panel body.
JSFiddle
<div class="container-fluid text-center" name="drawing">
<h2><b> TTT </b></h2>
<hr>
<div class="row">
<div class="container-fluid text-center col-sm-2" name="filters">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
</div>
<div class="container-fluid text-center col-sm-10" name="chart">
<span id="chart1"></span>
</div>
</div>
<hr>
</div>
JS Code:
var headingList = ["heading01", "heading02", "heading03", "heading04", "heading05", "heading06", "heading07", "heading08", "heading09", "heading10"];
var collapseList = ["collapse01", "collapse02", "collapse03", "collapse04", "collapse05", "collapse06", "collapse07", "collapse08", "collapse09", "collapse10"];
var labelList = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"];
var filterList = ["f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10"];
var i = 0,
len = headingList.length;
for (i; i < len; i += 1) {
console.log(headingList[i]);
console.log(collapseList[i]);
console.log(labelList[i]);
console.log(filterList[i]);
$("#accordion").append(
'<div class="panel panel-default">' +
'<div class="panel-heading" role="tab" id=' + headingList[i] + '>' +
'<h4 class="panel-title">' +
'<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>' +
labelList[i] +
'</a>' +
'</h4>' +
'</div>' +
'<div id=' + collapseList[i] + ' class="panel-collapse collapse" role="tabpanel" aria-labelledby=' + headingList[i] + '>' +
'<div class="panel-body">' +
'<select multiple id=' + filterList[i] + ' size="10"></select><br>' +
'</div>' +
'</div>' +
'</div>'
)
};
Thanks.
You just missed adding # to <a> tag href attribute
So replace
<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>
with
<a role="button" data-toggle="collapse" data-parent="#accordion" href=#' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>
in your js code
Working jsfiddle
My page makes an AJAX call with and adds some data to a div. Then appends to a DIV with jquery append. It seems that the appended content doesn't follow the css properly. I checked the output with the help of alert and pasted the output manually to the page , it looks fine. What could be the problem?
Here is the code
var myDiv = '<div class="list-group-item" onclick="myhref(' + "docinfo.html" + ');">' +
'<div class="row" id="row">' +
'<div class="col-xs-3 col-sm-5"/>' +
'<img src="' + docDetails[25] + '" class="img-thumbnail" width="100" height="100">' +
'<p><b>₹ </b>' + docDetails[24] + '</p>' +
'<p><span class="glyphicon glyphicon-eye-open"></span>' + docDetails[2] + '<br></p>' +
'<p><span class="glyphicon glyphicon-thumbs-up"></span> ' + docDetails[13] + ' </p>' +
'</div>' +
'<div class="col-xs-8 col-sm-9">' +
'<ul class="list-group">' +
'<p><b>' + docDetails[22] + '</b></p>' +
'<p>' + docDetails[10] + ' <span class="glyphicon glyphicon-briefcase"></span>' + docDetails[17] + 'yrs </p>' +
'<p><strong>Location:</strong>' + docDetails[14] + '</p>' +
'<p>' + day + '<br>' +
'<span>' + time + '</span><br>' +
'<a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span>' +
'</ul>' +
'</div>' +
'</div>';
$("#searchfield").append(myDiv);
Output of myDiv when checked through alert function:
<div class="list-group-item" onclick="myhref(docinfo.html);"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="500" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>0</p><p><span class="glyphicon glyphicon-eye-open"></span>null<br></p><p><span class="glyphicon glyphicon-thumbs-up"></span> Shalimar Bagh </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>null</b></p><p>4 <span class="glyphicon glyphicon-briefcase"></span>nullyrs </p><p><strong>Location:</strong>Kamlesh clinic</p><p>undefined<br><span>null</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>
and CSS is of bootstrap
and here is the snippet of searchfiled
<div class="container-fluid" id ="searchfield">
</div>
this the result , when appended with jquery: http://imgur.com/LYE9alR
and this is when I manually pasted the output of myDiv in #searchfield :http://imgur.com/jrWtuyN
Why are you concatenating string with no variables and values. Just create the string like this
var myDiv='<div class="list-group-item" onclick="myhref('+"docinfo.html"+');"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="'+docDetails[25]+'" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>'+docDetails[24]+'</p><p><span class="glyphicon glyphicon-eye-open"></span>'+docDetails[2]+'<br></p><p><span class="glyphicon glyphicon-thumbs-up"></span> '+docDetails[13]+' </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>'+docDetails[22]+'</b></p><p>'+docDetails[10]+' <span class="glyphicon glyphicon-briefcase"></span>'+docDetails[17]+'yrs </p><p><strong>Location:</strong>'+docDetails[14]+'</p><p>'+day+'<br><span>'+time+'</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>';
$("#searchfield").append(myDiv);
Verify div appended correct location and css file loaded. Verify using browser Inspect element.
While working on my first mobile app, I noticed that when I access the site and hover my mouse on each list, the link shadow does not cover the width of the displayed lists. Please see image link which shows a gap at the bottom on mouse hover:
I noticed when I use the following scripts:
<link href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
Combined with:
Everything looks fine without any gap but the issue with this is when nI click on each link, my home botton icon displays a + sign rather than a "home" sign eventhough my 'data-icon="home"'.
When I change the scripts to anything higher than 'jquery.mobile-1.0a2.min.css' and 'jquery.mobile-1.0a2.min.js', the home botton displays correctly but the gap issue occurs.
Anyone with a possible workaround on this?
var postlimit = 10;
document.write(
'<div data-role="page" id="list">' +
' <div data-role="header" data-position="fixed" data-theme="c">' +
' <h1><span class="hd">My First App</span></h1>' +
' </div>' +
' <div data-role="content">' +
' <div data-role="listview" data-filter="true" id="articleList" >'
);
for(var i=1; i<=postlimit; i++){
document.write(
'<li id="list' + i + '"><a class="atcss" '+' href="#article' + i + '" id="link' + i + '"></a></a>' +
' <p class="adcss">Date: <span id="articleDate' + i + '"></span>' +
' <p class="apcss">By: <class="author">Sysadmin</p>' +
'</li>'
)
};
document.write(
' </div>' +
' </div>' +
'</div>'
);
for(i=1; i<=postlimit; i++){
document.write(
'<div data-role="page" id="article' + i + '">' +
' <div data-role="header" data-position="inline" data-theme="c">' +
' Home' +
' <h1 id="articleHeader' + i + '"> </h1>' +
// ' <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' +
// ' class="ui-btn-right" rel="external">Open</a>' +
' </div>' +
' <div data-role="content">' +
' <div id="articleContent' + i + '" class="articleContent"></div>' +
' <div data-role="controlgroup" data-type="horizontal">' +
' <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
' data-inline="true" class="prevButton">Prev</a>' +
' <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
' data-inline="true" class="nextButton" data-iconpos="right">Next</a>' +
' </div>' +
' </div>' +
'</div>'
)
};