How to do a footer in dompdf 6.0 beta 2? - css

In the most recent dompdf release (domdpf beta 2), inline php was disabled for security reasons. This, in turn, caused the previous footer/header code:
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("helvetica", "bold");
$pdf->page_text(72, 18, "Header: {PAGE_NUM} of {PAGE_COUNT}", $font, 6, array(0,0,0));
}
</script>
To no longer work.
I'm now trying to re-create what this script did using CSS. So far, I've figured out how to get CSS to count the pages:
.pagenum:before { content: counter(page); }
The issue I'm having is sticking the footer to the bottom of the page. Most CSS tutorials on how to do this do not seem to be working. Here's the css for my page:
html,body {
font-family:interstate;
height:100%;
width:100%;
overflow:auto;
margin-left: 40px;
margin-right: 40px;
margin-top: 20px;
margin-bottom:40px;
min-height: 100%;
}
P.breakhere {page-break-before: always}
table
{
border-collapse: collapse;
page-break-inside: avoid;
font-size:15px;
}
td
{
border: 1px solid #000
}
.noBorder {
border: 0
}
#header {background:#ffffff url('gradient.png') no-repeat center center;
height: 100px;
}
#text {
position:relative;
text-align:center;
padding:10px;
}
.pagenum:before { content: counter(page); }
My hope is someone can provide me the appropriate #footer bit, so my footer text will properly stick to the bottom of the page.
Thank you!!

Inline script is disabled by default, but if you feel you are not vulnerable to any security problems you can safely re-enable it by setting DOMPDF_ENABLE_PHP to true.
To create a header/footer using HTML+CSS you would use a fixed-position element.
CSS
#footer {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 100px;
text-align: center;
background-color: lightgray;
border-top: 2px solid gray;
}
.pagenum:before {
content: counter(page);
}
HTML
<div id="footer">
<p>page <span class="pagenum"></span></p>
</div>
The main drawback to the HTML+CSS method is that there is currently no way to get the total number of pages using this method.

Related

How to automatically add text to image on hover

I have an image that I would like to add text to. I don't know what the best method would be. I have seen the map tag in HTML but I don't know if that helps me. For each individual part of the image, I'd like to add a text next to it on hover.
My best solution so far is to make a div with the image as a background image, and have multiple spans for each part of my image, but that stopped working precisely when rescaling the image.
Here is a snippet for you.
$('.hover-with-caption').on('mousemove',function(e){
$('#dynamicCaption').remove();
$('body').append("<span id='dynamicCaption' class='dynamic-caption'></span>");
$('#dynamicCaption').text('what ever you want to show here!! '+event.pageX + ", " + event.pageY); // you need to decide what to show and how you are going to generate the caption, As you have not given mush info about it.
$('#dynamicCaption').finish().toggle(100).
css({
top: e.pageY + "px",
left: e.pageX + "px"
});
$(document).off("click.customCaption").on("click.customCaption", function (e) {
// alert('context menu other mouse events');
if (!$(e.target).parents('#dynamicCaption').length > 0) {
$('#dynamicCaption').remove();
}
});
});
div.parent{
width:200px;
height:150px;
position: relative;
border: 1px solid black;
cursor:pointer;
}
img{
width:200px;
height:150px;
}
.dynamic-caption {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 0px;
list-style-type: none;
padding-left: 0px;
min-width: 100px;
margin-bottom:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img class="hover-with-caption" src="http://cdn.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />
</div>
Hope this helps you out.

CSS hovering issue

Please refer this fiddle , http://jsfiddle.net/shrikanth/79AfQ/
After hovering header(h2), div element(popup) is displayed , which is as per design.
However I can't navigate to new div.(new div gets disappear soon after moving out h2 element)
Is there any fix for this , so that user can click on headrer then can click on contact of another div element?
HTML
<h2>What is CSS?</h2>
<div id="popup">
Contact
</div>
CSS
h2 {
position:relative;
top:22px;
left:44px;
width: 170px;
height:33px;
text-align:center;
}
#popup {
width: 240px;
background: #727272;
padding: 10px;
border-radius: 6px;
color: #FFF;
position: relative;
top:15px;
left:44px;
font-size: 12px;
line-height: 20px;
display:none;
}
h2:hover+ #popup {
display:inline-block;
}
h2:hover {
background-color:green;
}
#popup:before {
content:"";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #727272 transparent;
position: absolute;
top: -15px;
left: 92px;
}
Just change the hover pseudo-selector rule to include the #popup element, too (assuming your goal is just to be able to click the contact link in the #popup)
h2:hover+ #popup, #popup:hover{
display:inline-block;
}
If you want to use this approach, I suggest adding padding to the h2 element to allow your mouse to leave it without immediately deactivating the hover state, or wrapping it with a larger, invisible element.
Another way would be to add the #popup inside the h2 and absolutely position it.
This way, when you're hovering over the popup, you'll be hovering over the h2 as well.
One thing to note here is not to leave any spaces between h2 and the popup, like ReeceJHayward suggested.
<h2>What is CSS?
<div id="popup">
Contact
</div>
</h2>
DEMO:
http://jsfiddle.net/79AfQ/7/

Jquery UI - can't seem to figure out the css to customize tab colors

I am struggling through the documentation on jquery ui (specifically tabs:
I've digested the js functions...but I am struggling with the css. For example, I cannot figure how to change the border color (it is like my customizations are not even being read)...
Here is my code so far...
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
ui.tabs-container {position: relative; background: #0000cd; }
ui.tabs {
float: left;
background: white;
height:400px;
line-height: 30 px;
padding: 0 16px;
width:409px;
scrollbar:false;
cursor: pointer;
}
ui.tabs:hover{ background: #f4f4f4; }
ui.contents {
float: left;
position: absolute;
left: 5%;
height: 300px;
margin-top: 31 px;
padding: 0 px;
border: 1 px solid #ccc;
font-weight: normal;
display: none;
}
When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.
For example, with this:
.ui-state-default.ui-corner-top.ui-tabs-active {
background: red;
}
You can change the color of the active tab...
Demo: http://jsbin.com/umixan/1/edit
Probably you are looking for two classes. ui-state-default and ui-state-active. So, just add the styling you need for each state. Example:
.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}
Note, that your css (above code) must be after jQuery's jquery-ui.css, otherwise you have to use !important for changes to take place.
As darkajax mention though, you have to start using firebug (or Chrome's tools).

CSS center column that works in FF and IE9?

I am totally a beginner at CSS layouts, but I am trying to just start a basic one that is simply a 'fixed width' center column (just one div), so that the sides are flexible. I know this is not responsive/reactive, but I am just starting.
So I have tried googling tons of examples, but I can't find a starting point that works on both FF and IE9? I mean just getting started and they are different??
Here is latest example of simple style I tried:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#content {
width: 900px;
color: #333;
border: 0px solid #f5f5f5;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
}
so this is the very beginning but already FF shows this aligned to the center and IE doesn't. So already everything I try (i.e. left:50% and margin-right:-461px, as an example I found) affects these differently. I read all over the place this is a very common challege, but I fear there is some foundation logic here that I am unaware of?
any help with this is greatly appreciated!
EDIT: Thanks for the comment! I do have the following, which again works in IE (and in chrome) but not FF?
css:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
margin-left:auto;
margin-right:auto;
}
#content {
width: 900px;
color: #333;
border: 2px solid #f5f5f5;
background: white;
padding: 10px;
height: 600px;
position:absolute;
left:50%;
margin-left:-461px;
}
#welcomeBanner{
text-align:center;
font-family:"segoe ui light","segoe ui","segoe";
font-size:18pt;
padding-top:20px;
padding-bottom:20px;
margin-top:0px;
}
html: is literally only:
<div id="wrapper">
<div id="content">
<div id="welcomeBanner">Attempting to Learn This Stuff<div>
</div>
</div>
so in IE9 and Chrome I get the title in the center, big box center fixed with back ground color, etc. In FF nothing. I like there is not style applied to the page at all? I am using a link tag in the head, but it is obviously there and working for the others?
body {
width:100%
}
div {
width: 900px;
margin:0 auto;
}
should work
cf Centering a Div in IE9 Using margin:auto

How can I insert text before an item with CSS?

I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.
My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?
I tried like that with ":before" but that does not seem to do the trick
ThinkingRock
{
background-color: #ffffff;
width: 100%;
}
project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}
The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>
:before is a pseudo-selector itself, so it needs its own style block, like below:
project:before {
content:"Projekt:";
}
project {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
fiddle: http://jsfiddle.net/wNEt3/
fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/
Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D
use z-index , z-index Only Work with position: fixed,relative,absolute:
project:before {
width:100%;
height:100%;
position:absolute;
content:"";
z-index:-2;
}
project {
position:relative;
display: block;
z-index:30;
}
or:
project:before {
width:100%;
height:100%;
position:relative;
content:"";
z-index:-2;
}
project {
display: block;
z-index:30;
}
documention : https://www.w3schools.com/cssref/pr_pos_z-index.asp

Resources