I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
I have created a div that loads hrefs using jquery .load function.
When you mouseenter over an href it loads another popup div using .load.
Everything appears normal when 1 div (with the dates) is loaded see pic(show1) enter image description here
But when I load a second div of dates the popup gets all distorded see pic(show2)enter image description here
Any ideas why this is happening?
Thanks.
This is the code that loads the divs with the hrefs:
<script>
$(document).ready(function(){
$("#left1");
});
</script>
<script>
$(document).ready(function(){
$("#center1");
});
</script>
<script>
$(document).ready(function(){
$("#center2");
});
</script>
<script>
$(document).ready(function(){
$("#center3").load("2016_select_paycheck_to_view.php");
});
</script>
<script>
$(document).ready(function(){
$("#center4").load("2015_select_paycheck_to_view.php");
});
</script>
#center3 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
display: inline-table;
width: 190px;
height: 480px;
}
m3
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m3t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m3b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
#center4 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
width: 190px;
height: 480px;
}
m4
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m4t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m4b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
<div id="firstwrapper">
<div id="left1"> 2019 </div>
<div id="center1"> 2018 </div>
<div id="center2"> 2017 </div>
<div id="center3"> 2016 </div>
<div id="center4"> 2015 </div>
</div>
This is the code that loads the popup divs:
$(function() {
$("a#trigger").mouseenter(function () {
$("div#pop-up").clearQueue();
$("div#pop-up").show();
});
$("a#trigger").mouseleave(function () {
$("div#pop-up").delay(60).slideUp();
});
$("div#pop-up").mouseenter(function () {
$(this).clearQueue();
});
$("div#pop-up").mouseleave(function () {
$(this).delay(200).slideUp();
});
$("a#trigger").mousemove(function(){
var x = $("#center3").offset();
if(x.top > 400, x.left > 9) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else if(x.top > 600, x.left > 40) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
}
});
<style type="text/css">
#secondwrapper {
border: 0px dashed red; /* black */
background: transparent;
position: relative;
left: 0px;
top: 0px;
z-index: 20;
width: 190px;
height: 480px;
}
#middle1 {
border: 1px dashed teal;
width: 190px;
height: 480px;
display: block;
clear: both;
float: left;
position: absolute;
left: 0px;
top: 0px;
margin-top: 0px;
margin-bottom: 20px;
background-color: #FDF5E6;
}
m1year
{
font-family: arial;
color: black;
font-weight: 700;
font-size: 0.9em;
text-align: left;
border: 1px dotted red;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.3em;
width: 50px;
height: 8px;
line-height: 0.7em;
background-color: transparent;
}
m1
{
font-family: calibri;
color: #8c0000;
font-size: 1em;
text-align: left;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.36em;
margin-bottom: 0em;
margin-left: 10px;
width: 155px;
height: 5px;
line-height: 4.3px;
background-color: white;
}
a:link {
text-decoration: none;
color: #8c0000;
}
a:visited {
color: #8c0000;
} /* visited link */
a:hover {
color: red;
} /* mouse over link */
div#pop-up {
display: none;
position: absolute;
left: 100px;
z-index: 30;
width: 550px;
height: 600px;
background: transparent;
color: #000000;
border: 0px dashed #ff6600; /* ORANGE */
}
</style>
<script>
$(document).ready(function(){
$("#pop-up").load("2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php? THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?>" ); });
</script>
<div id="secondwrapper">
<div id="middle1"
<m1year> 2016 </m1year>
<m1>
<A HREF="2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php?THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?> "
TARGET="mainFrame" id="trigger">
<?PHP
print ("$newMonth1");
print (" ");
print ("$newDay1");
print (" ");
print ("-");
print (" ");
print ("$newMonth1a");
print (" ");
print ("$newDay1a");
?>
</A></m1>
</div>
</div>
<div id="pop-up"> </div>
<div id="pop-up2"> </div>
<div id="pop-up3"> </div>
<div id="pop-up4"> </div>
Ok I think I fixed it. It was my css I removed some divs and it appears to be working ok now.
Please, show us the markup and css you're using: it looks like something inherent to css issue.
I'm currently learning php by project I'am trying to implement a 3 column website. 1 column is the main column. Other two column is set to display:none. They appear onmouseover event, when pointer comes over twitter or facebook icon. how do I fit these columns in firefox alongside with chrome
here is a link http://slavesofdestiny.com/yenisite/
//style.css
.main-part h1{
font-weight: 500;
letter-spacing: 0.8px;
}
p, h1, a{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: rgba(255,255,255,0.75);
}
p{
font-size: 16px;
}
body{
background-attachment: fixed;
background-position: center;
background-color: black;
background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: black;
border: 2px solid white;
}
.header-image{
background-size: cover;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
height: auto;
}
/* Navigation Items */
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
border: 1px solid black;
font-size: 20px;
display: block;
background: rgba(0,0,0,1);
background: linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -moz-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -webkit-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 2px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: "";
clear: both;
display: block;
}
ul li {
display: block;
float: left;
}
ul li:hover {
border-radius: 10px;
background: rgba(95, 0, 0, 0.4);
background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
color: rgba(255, 255, 255, 1);
}
ul li a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
.social-media{
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 4.7px;
padding-bottom: 4.7px;
}
/*Content Part*/
.body-part{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0px;
width: 1200;
min-height: 800px;
border-radius: 5px;
}
.container{
float: left;
position: relative;
text-align: center;
display: inline-block;
margin-top: -20px;
width: 800px;
min-height: 800px;
background-color: rgba(0,0,0,0.6);
padding: 0;
//border-radius: 10px;
}
#sideBarRight{
position: relative;
float: right;
width: 200px;
display: none;
vertical-align: top;
}
#sideBarLeft{
position: relative;
float: left;
width: 200px;
vertical-align: top;
}
.side-bar{
display: inline-block;
position: relative;
min-height: 50px;
vertical-align: top;
}
.main-part{
display: inline-block;
padding-top: 10px;
width: 780px;
min-height: 800px;
margin: auto;
padding-bottom: 10px;
}
.main-part div{
width: auto;
background-color:rgba(150,150,150,0.36);
border: 1px solid black;
//border-radius: 20px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 8px 8px 5px #000000;
}
.main-part div img{
//max-height: 600px;
max-width: 800px;
}
.main-part h1{
padding: 10px;
}
.main-part p{
padding: 10px;
}
#facebook-div{
background-color: #ffffff;
display: none;
}
//index.php
<?php
?>
<body>
<div class="navigator">
<?php include 'header.php'; ?>
</div>
<div class="body-part" >
<div id="sideBarLeft" class="side-bar" style="float: left;">
<div id="facebook-div" style="float: left;">
<?php include 'leftSideBar.php'; ?>
</div>
</div>
<div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
<div class="main-part">
<?php include 'postSelect.php' ?>
</div>
<?php include 'footer.php';?>
</div>
<div id="sideBarRight" class="side-bar">
<?php include 'sidebar.php';?>
</div>
</div><!--end body-part-->
</body>
A couple things that might help:
Your <head> tag is inside your <body> tag as of right now. Especially when using templates, it's important to check your resulting html code. Take a look at this: http://html5.validator.nu/?doc=http%3A%2F%2Fslavesofdestiny.com%2Fyenisite%2Findex.php
Try position: absolute on your sidebars. If you give their parent a position:relative, you should be able to put them exactly where you want them with the top, left, and right style attributes.
I have read some other answers but have still not been able to get the settings right.
The columsheader does not start scrolling up again.
Here is my php:
<div id="columnsHeader" class="affix" data-offset-top="800" data-offset-bottom="400" data-spy="affix">
Here is my css:
.itemList {
position: relative;
}
.extrafieldscolumnsHeader {
position: absolute;
top: -25px;
width: 818px;
color:white;
min-height: 28px;
padding-top: 5px;
padding-left:8px;
}
#columnsHeader.affix {
border-top: 40px solid #FFFFFF;
position: fixed;
top: 43px;
width: 818px;
}
#columnsHeader.affix-bottom {
position: absolute; /* Start scrolling again. */
top: auto; /* Override the top position above. */
bottom: 55px; /* It should stop near the bottom of its parent. */
}
Here is the temp url:
http://108.163.203.210/~goodwin/xjoomla/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=12&Itemid=143
i think this may works for you and you just need to set margin-bottom of <BODY>respect to your footer...
HTML:
<footer>
<button class="filter">filter ▶</button>
<button class="wgit">wGit ▶</button>
</footer>
CSS:
body > footer {
width: 100%;
position: fixed;
background-color: #ffffff;
bottom: 0px;
right: 0px;
height: 40px;
border-top: 1px solid #000000;
}
body > footer > button{
font-size: 16px;
float: right;
margin:5px 15px 5px 10px;
width: 80px;
padding: 3px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
body > footer > button:hover{
color: #000000;
box-shadow: 0px 0px 10px #c3c3c3 inset;
}
.filter-child {
display: none;
background-color: #ffffff;
position: fixed;
right:15px;
bottom:50px;
padding:5px;
border: 1px dashed #c3c3c3;
border-radius: 10px;
}
.filter-child li{
list-style: none;
padding: 5px;
text-align: center;
background-color: #f3f3f3;
margin: 2px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.filter-child li:hover{
box-shadow: 0px 0px 5px #3a3a3a inset;
}
.filter-child a{
color: #000000;
}
and you can follow this links also...
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.
Here is the html:
<html>
<head>
<title>Test Forum</title>
<link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" />
<h1>Test Forums</h1>
<hr />
<div id="navi"><div id="naviheader">Boards</div>Testing<br />General Discussion<br />Video Games<br />Anime and Manga<br />BlazBlue<br />Shin Megami Tensei<br />Earthbound<br />Phantasy Star<br />Mobile Suit Gundam<br /></div>
<div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [0]
</body>
</html>
Here is the CSS:
#charset "windows-1252";
body{
background-color: #EEFFF8;
color: #000000;
text-align: center;
}
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
.stickypostbox{
text-align: left;
margin: auto;
background-color: #F5FFFA;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
h4{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #9932CC;
}
h1{
color: #551A8B;
}
hr{
color: #82FFCD;
background-color: #82FFCD;
height: 1px;
border: 0px dotted #82FFCD;
}
a{
color: #7F00FF;
text-decoration: none;
}
a:hover{
color: #7F00FF;
text-decoration: underline;
}
form{
margin: 0px auto;
width: 50%;
}
#formdiv {
background-color:#dbfef8;
border:1px solid #82FFCD;
}
.fielddiv1{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 100%;
}
.fieldtext1{
width: 50%;
background-color: #82FFCD;
float: left;
}
.fieldtext2{
width: 100%;
background-color: #82FFCD;
}
#replydiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#admindiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#navi{
width: 200px;
background-color: #dbfef8;
border: 1px solid #82FFCD;
text-align: left;
float: left;
}
#naviheader{
width: 100%;
background-color: #82FFCD;
}
#submitbutton{
border: 1px solid #82FFCD;
background-color: #DBFEF8;
color: #000000;
margin-top: 5px;
width: 100px;
height: 20px;
}
#banner{
border: 1px solid #82FFCD;
}
.postbar{
margin-right: 0px;
margin-top: 0px;
}
.bannedtext{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #FF0000;
}
And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/
The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.
Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png
My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.
Change:
Page: [0]
To (wrap it in a div with pager class):
<div class="pager">Page: [0]</div>
Change this in your CSS:
.postbox, .pager{
text-align: left;
margin: auto;
width: 50%;
margin-top: 10px;
}
.postbox {
background-color: #dbfef8;
border: 1px solid #82FFCD;
}
.pager {
text-align: center;
}
The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.
You may want to revisit the structure of your page. Create a left column and a center column div or something like that.