How to set font to particular div in m-PDF ?
I am using like this. but it's not working
div { font-size: 14pt; font-family: dejavuserif;}
You can put style as Inline like this
$html = "<div style='font-size: 14pt; font-family: dejavuserif;'>Text Here</div>";
$mpdf = new mPDF('utf-8', 'A4-L');
$mpdf->WriteHTML($html);
$mpdf->Output();
or
create a css file with name customeStyle.css.
add this style into customeStyle.css
div { font-size: 14pt; font-family: dejavuserif;}
and code is
$stylesheet = file_get_contents('customeStyle.css');
$html = "<div>Text Here</div>";
$mpdf = new mPDF('utf-8', 'A4-L');
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML($html);
$mpdf->Output();
Related
I have a code that sends an email using System.Net.Mail.MailMessage. Unfortunately, the recipient's Outlook is blocking images in the signature. Images are blocked only when sending using this script. Could someone tell me may I avoid this? Thank You very much.
I tried following things:
IsBodyHtml = 'true' /'false'
Different users
My code:
Connect-VIServer -server srv01.xxxxx.co.com
$myCol = #()
ForEach ($Cluster in Get-Cluster)
{
ForEach ($vmhost in ($cluster | Get-VMHost))
{
$VMView = $VMhost | Get-View
$VMSummary = “” | Select ClusterName, HostName, CPUSockets, CoresProCPU, VMs
$VMSummary.HostName = $VMhost.Name
$VMSummary.ClusterName = $Cluster.Name
#$VMSummary.MemorySizeGB = $VMview.hardware.memorysize / 1024Mb
$VMSummary.CPUSockets = $VMview.hardware.cpuinfo.numCpuPackages
$VMSummary.CoresProCPU = ($VMview.hardware.cpuinfo.numCpuCores)/2
$VMSummary.VMs = (get-vm -location $VMhost.Name| measure-object).count
$myCol += $VMSummary
}
}
#$myCol | Sort-Object -Property HostName| Format-Table
################################
# Mail Report Setup Variables #
################################
[string]$ReportEmailFromAddress = 'Lic#xxxxx.com'
[string]$ReportEmailToAddress = 'n#xxxxx.com'
#[string]$ReportEmailCCAddress = 'd#xxxxx.com'
[string]$ReportEmailSubject = "Lic" + ' ' + (Get-Culture).DateTimeFormat.GetMonthName((Get-Date).AddMonths(-1).Month) + ' ' + (Get-Date).AddMonths(-1).ToString('yyyy')
[string]$ReportSMTPServer = 'remote.xxxxx.com'
[int32]$ReportSMTPPort = '25'
[boolean]$ReportSMTPServerEnableSSL = $True
################################
# Mail the Report #
################################
function MailReport {
$message = New-Object System.Net.Mail.MailMessage
$mailer = New-Object System.Net.Mail.SmtpClient ($ReportSMTPServer, $ReportSMTPPort)
$message.IsBodyHtml = 'true'
$message.From = $ReportEmailFromAddress
$message.To.Add($ReportEmailToAddress)
# $message.CC.Add($ReportEmailCCAddress)
$message.Subject = $ReportEmailSubject
$htmlhead = "<html>
<style>
BODY{font-family: Arial; font-size: 12pt;}
H1{font-size: 22px; font-family: 'Arial,sans-serif;}
H2{font-size: 18px; font-family: 'Arial,sans-serif;}
H3{font-size: 16px; font-family: 'Arial,sans-serif;}
TABLE{border: 1px solid black; border-collapse: collapse; font-size: 12pt;text-align:center;}
TH{border: 1px solid #969595; background: #dddddd; padding: 5px; color: #000000;text-align:center;}
TD{border: 1px solid #969595; padding: 5px; text-align:center;}
td.pass{background: #B7EB83;}
td.warn{background: #FFF275;}
td.fail{background: #FF2626; color: #ffffff;}
td.info{background: #85D4FF;}
</style>
<body>"
$htmltail = "</body></html>"
$bodytextstart = 'S'
$bodytextend = "
<br><p style = 'font-family:'Arial', sans-serif; font-size: 13px;'>
E-Mail: <a href='mailto:xxx#xxxxx.com'>xxx#xxxxx.com</a><br>
<a href='http://www.xxxxx.com/'>www.xxxxx.com</a><br><br>
<img src='https://exchange.xxxxx.com/Signature/xxxxx_Slogan.jpg' alt='xxxxx Slogan'><br><br>
<a href='https://www.instagram.com/xxxxx/'><img src='https://exchange.xxxxx.com/Signature/Insta.png' title='xxxxx Instagram' alt='Instagram'></a>
<a href='https://www.instagram.com/xxxxx/'>#xxxxx</a> <a href='https://www.facebook.com/xxxxx/'><img src='https://exchange.xxxxx.com/Signature/FB.png' title='xxxxx FB' alt='FB'></a> <a href='https://www.facebook.com/xxxxx/'>#xxxxx xxx</a></strong></p>
"
$Table = $myCol | Sort-Object -Property HostName| ConvertTo-Html -Fragment
$body = $htmlhead + $bodytextstart + $Table + $bodytextend + $htmltail
$message.Body = $body
$mailer.send(($message))}
MailReport
Outlook always blocks external images. If you don't want that, you need to add the image as an attachment and refer to it from the HTML body through its content-id.
See Including Pictures in an Outlook Email
Microsoft Edge shows a confusing icon when dragging and dropping elements using the html "draggable" attribute. I think it might be considered a "cursor", but I am unsure. Regardless, is it possible to hide this copy/stop icon?
Microsoft Edge on Windows Example
As far as Windows is concerned, it looks like this icon only shows up on Edge. Chrome has a default behavior of a cursor change (much less obtrusive).
Google Chrome on Windows Example
Any browser on MacOS has neither the icon or the cursor change.
Here's a codepen example where you can see the behavior reproduced
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.setDragImage(document.getElementById("drag-image"), 0, 0);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
.droppable {
float: left;
min-width: 100px;
min-height: 80px;
border: 1px solid black;
margin: 0 32px;
padding: 8px;
}
#drag-image {
background: #eee;
padding: 4px;
position: absolute;
bottom: 0;
left: 0;
}
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<h1 draggable="true" ondragstart="drag(event)" id="drag1">Drag Me</h1>
</div>
<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag-image">Drag Me</div>
Background/why it matters: This could be considered a minor inconvenience, but for an application that is centered around drag and drop behavior this sort of UX mishap can be really confusing for the end user. Not only does the icon compete for attention with the drag image, but the icon is also potentially misinforming the user on the action they are taking. The "copy" icon is used when a droppable area is available, but the user could be moving (cutting) or creating a net new object from something that does not exist yet (think dragging a new component onto the screen in squarespace or a similar app).
I suggest you to use DataTransfer.dropEffect property in your code may help to solve the issue for MS Edge.
The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur.
Example:
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.
</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
JsFiddle Example link
Output in MS Edge:
Reference:
DataTransfer.dropEffect
Below is one page of a Joomla 1.5 extension another developer created quickly that ultimately works like the core Joomla Related Articles but a bit more custom. The code is not very pretty but it works. It shows the title and date for the latest 5 articles that are tagged with the same tag on the current page being viewed. The only problem is it shows articles from 2013 and 2012, since there are only a couple 2013 articles. So ultimately it should show 5 related items only from the current year. So if its 2013 (which it is), and there are only 4 articles from 2013 it should only show those 4.
On the line: for($y=2001; $y <= $intYear; $y++) I tried changing 2001 to 2013 but didn't change anything on the front end. Tried changing to 2014 and didn't change anything either.
The other option I was thinking was on the line: $objDb->setQuery("SELECT sectionid, catid, title if there was a way to say WHERE created='$currentYear' kind of thing.
Once again the code is not pretty and imagine the performance not so great, but looking for a quick fix to this issue, until the whole module can be replaced with a better solution later on. Any help would be most appreaciated!
<?php
// Include the syndicate functions only once
//require_once (dirname(__FILE__).DS.'helper.php');
//
//$list = modRelatedItemsHelper::getList($params);
//
//if (!count($list)) {
// return;
//}
//
//$showDate = $params->get('showDate', 0);
//
//require(JModuleHelper::getLayoutPath('mod_related_items'));
// no direct access
defined('_JEXEC') or die('Restricted access');
// Include the syndicate functions only once
include_once( dirname(__FILE__).DS.'helper.php' );
if( !defined('NL') )
{ define('NL', "\n"); }
$prmRptShowFilter=$params->get('rpt_show_filter');
$prmRptSection=$params->get('rpt_section');
$prmRptCategory=$params->get('rpt_category');
$prmRptDateFormat=$params->get('rpt_date_format');
$arrMonths=array();
$arrMonths[1]='January';
$arrMonths[2]='February';
$arrMonths[3]='March';
$arrMonths[4]='April';
$arrMonths[5]='May';
$arrMonths[6]='June';
$arrMonths[7]='July';
$arrMonths[8]='August';
$arrMonths[9]='September';
$arrMonths[10]='October';
$arrMonths[11]='November';
$arrMonths[12]='December';
$arrYears=array();
$intYear=date(Y);
for($y=2001; $y <= $intYear; $y++)
{ $arrYears[]=$y; }
$varArticleId=JRequest::getVar('id');
$objDb=&JFactory::getDBO();
//--- Database Script ---//
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' LIMIT 1");
$rows=$objDb->loadObjectList();
$section_id=$rows[0]->sectionid;
$cat_id=$rows[0]->catid;
//--- Database Script ---//
$arrList=modGtSidebarCustomHelper::getList($params);
?>
<style type="text/css">
#idForm1 {
float: right;
}
#idForm1 ul {
margin: 0;
padding: 0;
list-style: none;
clear: both;
}
#idForm1 li {
float: left;
margin: 0 1px 0 0;
padding: 0;
}
#idGtReportDisplayB {
text-align:left;
margin:3px 5px;
}
#idGtReportDisplayB a:hover {
text-decoration: underline;
font-weight: normal;
}
#idGtReportDisplayB span.zoom-link {
display: none;
}
#idGtReportDisplayB dl,
#idGtReportDisplayB dl dt,
#idGtReportDisplayB dl dd {
padding: 0px 5px 0px 5px;
margin: 0;
}
#idGtReportDisplayB dd {
color: #680e0e;
}
#idGtReportDisplayB dl {
width: 284px;
padding-bottom: 15px;
}
#idNoRelatedLatestNews {
display: none;
}
</style>
<div id="idGtReportDisplayB">
<?php
$strDisplay='';
$prmRptDateFormat='n/j/Y';
if( !empty($arrList) )
{
$strDisplay.='<h2>Recent News</h2>'. NL;
$numSize=sizeof($arrList);
for($x=0; ($x < $numSize) && ($x <= 5); $x++)
{
$tmpDtm=strtotime($arrList[$x]->created);
$strDisplay.='<dl>'. NL;
$strDisplay.=' <dt>'. $arrList[$x]->title .'</dt>'. NL;
$strDisplay.=' <dd>'. date($prmRptDateFormat, $tmpDtm) .'</dd>'. NL;
$strDisplay.='</dl>'. NL;
}
echo($strDisplay);
}
else
{
# include( dirname(__FILE__).DS.'..'.DS.'mod_latestnews'.DS.'mod_latestnews.php' );
?>
<style type="text/css">
#idNoRelatedLatestNews {
display: block;
}
</style>
<?
}
?>
</ul>
</div>
Try something like,
$current_year = date('Y');
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' AND YEAR(created_on) = $current_year ");
It will load only current year data ..
Since there wasn't much of any response from the community on this one, I ultimately created a hack that resolved the issue for now. In which I added the article year as the class name to each dl and then through css just hid the old year I didn't want. While not ideal it works and hopefully will be replacing all the code soon enough anyway.
Say I've got something like this:
$padding = 5px 25px;
$border = 1px solid #f00;
Can I retreive the single values? Something like
$padding-vertical = $padding[0]; // returns 5px;
or:
$padding-vertical = $padding(top); // returns 5px
or:
$border-size = $border[border-width]; // return 1px
$border-color = $border(border-color); // return #f00
etc...
Is this possible?
The nth() function is the only way to retrieve specific items in a list, and it requires knowing its position.
$padding-vertical = nth($padding, 1); // returns 5px;
Because many shorthand properties don't require all values to be set, you might not get the results you're looking for. For the variables you've provided, this will work:
$border-size = nth($border, 1); // return 1px
$border-color = nth($border, 3); // return #f00
Aloha Stockoverflow.
In advance, thank you!
I am trying to modify my randomly changing background on my webpage, to add a FADE effect, so the change from 1 background to another is not so sudden and sharp.
I have tried to search through the web endlessly for a solution to my issue, but it all points towards adding a jQuery plugin which I would preferably avoid if it is possible.
My working code is as follows and needs to have added some kind of fadein / fadeout effect.
<script type="text/javascript">
var num;
var temp=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var preloads=[];
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg',
'images/bg5.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else {
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;
setTimeout(function(){rotateImages()},speed);
}
}
if(window.addEventListener){
window.addEventListener('load',rotateImages,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',rotateImages);
}
}
</script>
Thank you very much for taking the time to look at it. :)
How to do it without plugins:
Use 2 layers for the background image, position them on top of each other.
Init the page with the first image on the bottom layer, make the top layer invisible (using CSS opacity property, make sure to Google this, different browsers use different approaches).
When fading:
Set the new image for the top layer.
Use a short, looping (frameduration < 40ms) setTimeout to increment the opacity of your top layer to 1. Use increments of 1/(speed/frameduration).
When comletely faded in, set the bottom layer to use the new (now visible) image, and set the top layer to opacity 0.
Like this:
<html>
<head>
<script type="text/javascript">
var num;
var current=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var fps = 25;
var fadeDuration = 1000;
var opacityIncrement = 1/(fadeDuration/(1000/fps));
var preloads=[];
var topLayerOpacity = 0;
var topLayer = document.createElement("div");
var bottomLayer = document.createElement("div");
setOpacity(topLayer, 0);
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg'
);
function loadComplete(){
//add layers to background div
document.getElementById('backgroundContainer').appendChild(bottomLayer);
document.getElementById('backgroundContainer').appendChild(topLayer);
rotateImages();
}
function preload(){
//preload images
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
// selecte new random image from preloads and start fade-in
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
//don't select current image
if(num==current){
rotateImages();
}
else {
topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
current=num;
//start fade-in
fadeIn();
setTimeout(function(){rotateImages()},speed);
}
}
// fade in topLayer
function fadeIn(){
if (topLayerOpacity < 1){
topLayerOpacity += opacityIncrement;
setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
setTimeout(fadeIn, 1000/fps);
}else{
fadeInComplete();
}
}
//return opacity for element
function getOpacity(el){
alert (el.style.opacity);
return el.style.opacity;
}
//sets opacity on element
function setOpacity(el, val){
el.style.opacity = val;
el.style.filter = 'alpha(opacity=' + val*100 + ')';
}
//called when fadeIn completed
function fadeInComplete(){
bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
topLayerOpacity = 0;
setOpacity(topLayer, topLayerOpacity);
}
if(window.addEventListener){
window.addEventListener('load',loadComplete,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',loadComplete);
}
}
</script>
<style type="text/css">
#backgroundContainer{
width:100%;
height:100%;
position:absolute;
/*background-color:green;*/
}
#backgroundContainer div{
width:100%;
height:100%;
position:absolute;
top:0;
}
.page {
width:100%;
text-align:center;
position:absolute;
}
.contents{
width:400px;
margin:0 auto;
background-color:lightblue;
}
</style>
</head>
<body>
<!-- holds background layers -->
<div id="backgroundContainer"></div>
<!-- substitutes for 'body' on this webpage -->
<div class="page">
<!-- contents for your webpage, through css centered within page-div -->
<div class="contents">
<p>Contents</p>
</div>
</div>
</body>
</html>
OR
Use jQuery/mootools/script.aculo.us/...
Best of luck!