I have created an identity card using HTML and PHP and I want to print it when a button is clicked. But I am not getting idea about what to do next / next step.
Currently I just have the following code. What should I do next that when the generate_idcard button is clicked it opens the print dialogue box for printing it.
if(isset($_POST['generate_idcard'])){
$idcard = '<div class="idholder">
<div class="photobox"><img src="students/'.$f['st_photo'].'" width="102" height="105"></div>
<div class="idtxt idtxt1">'.$f['st_dob'].'</div>
<div class="idtxt idtxt2">'.$f['st_blood'].'</div>
<div class="idtxt idtxt3">'.$f['st_phone'].'</div>
<div class="idtxt idtxt4">'.$f['st_admtype'].'</div>
<div class="idtxt idtxt5">'.$f['st_name'].'</div>
<img src="images/idcard.png" width="300" height="390">
</div>';
}
Currently, this code when echoed displays the ID card perfectly. I just need to print it now. Please help me on what code to write next to print it.
Do you want as it ?
CSS code for A4 paper size
#media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
}
Php and html code
<?php if(isset($_POST['generate_idcard'])) :?>
<div class="idholder">
<div class="photobox"><img src="students/'<?=$f['st_photo']?>" width="102" height="105"></div>
<div class="idtxt idtxt1"><?=$f['st_dob']?></div>
<div class="idtxt idtxt2"><?=$f['st_blood']?></div>
<div class="idtxt idtxt3"><?=f['st_phone']?></div>
<div class="idtxt idtxt4"><?=$f['st_admtype']?></div>
<div class="idtxt idtxt5"><?=f['st_name']?></div>
<img src="images/idcard.png" width="300" height="390">
</div>
<button onclick="window.print()>print</button>
<?php endif; ?>
Related
I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.
Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button
as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row
I have problem with some angular things. I'm trying to set recursive dive with some info with some hintshow (tooltip).
The problem is all information show fine exclusive the hintshow. Added the screen show + some code. The data saved in {{x.who_liked}} as string, for example
"wyd3x, someoneXD, Shohamiko, guymaster, HUBHVNKL, Rauli, Matk, gal350"
<div ng-repeat="x in names | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="post">
<div class="posterDetails">
{{x.username}}</br>
פירסם ב<?php echo timeAgo("{{x.date}}"); ?>
<div ng-switch on="x.user_id">
<div ng-switch-when="<?=$_SESSION['id']?>">
<?php
echo " <a style='color:red;' href=\"?page=feeds&id={{x.id}}&delete\">(מחק סטטוס)</a>";
?>
</div>
</div>
</div>
<div class="postContent" ng-bind-html="x.msg | unsafe"></div>
<div class="options" style="text-align: right;padding: 5px;">
<div id="like" style="display:inline-block">
<img src="images/{{x.liked}}" post_id={{x.id}} ng-click="like(x)"> {{x.likes}} <div class="liked" onMouseover="showhint('{{x.who_liked}}', this)" style="display:inline-block">אהבו</div>
</div>
<div id="report" ng-click="report(x)" style="cursor: pointer; display:inline-block">
<img src="images/icons/vlag.png"> דווח
</div>
</div>
</div>
current station
tooltip: http://dynamicdrive.com/dynamicindex16/showhint.htm
You shouldn't be using {{}} interpolation inside your onMouseover directive.It should be onMouseover="showhint(x.who_liked, this)"
or
Angular solution
You can fix it like this :
ng-mouseover="showhint(x.who_liked,this)"
Instead of onMouseover , you can use ng-mouseover.
For better understanding , see this fiddle
I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
I'm a complete noob, trying to learn HTML/CSS while struggling to make my website do what I want it to …
Using <?php wp_get_archive('type=alpha') ?>, I'm trying to make the title of each post/row in the archive change to display the date of each post (with permalink to the post), instead of the whole <li> change to just the date of the first post (without permalink) …
What I have right now is this:
HTML
<div class="date">
<div class="date-text"><?php the_date('y.m.d'); ?></div>
<div class="arc"><?php wp_get_archives('type=alpha'); ?></div>
</div>
CSS
.date-text {
display: none;
}
.date:hover .date-text {
display: inline;
}
.date:hover .arc {
display: none;
}
But the <?php wp_get_archive('type=alpha') ?> creates the following HTML output:
<div class="arc">
<li><a href='url_four'>four</a></li>
<li>one</li>
<li>three</li>
<li>two</li>
</div>
I want it to do something along the lines of placing each <li> in its own <div class="arc"> so that each url gets replaced by its respective date, and not all of them end up in the same <div> to be replaced by <div class="date-text">.
Thanks in advance!
Works fine for me. Are you sure your php is geting the right values?
If I got you wrong send a sample what the list should look like as my english ist not the best.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
.date-text {
display: none;
}
.date:hover .date-text {
display: inline;
}
.date:hover .arc {
display: none;
}
</style>
</head>
<body>
<div class="date">
<div class="date-text">date1</div>
<div class="arc">text 1</div>
</div>
<div class="date">
<div class="date-text">date2</div>
<div class="arc">text 2</div>
</div>
<div class="date">
<div class="date-text">date3</div>
<div class="arc">text 3</div>
</div>
</body>
</html>
try something like:
<?php
$alpha = wp_get_archive('type=alpha');
$date = the_date('y.m.d');
echo'<div class="date">';
echo'<div class="date-text">' . $date .'</div>';
echo'<div class="arc">'. $alpha.'</div>';
echo'</div>';
?>
I have the following code that gives me a list of items on the front-end, but I want those links to open in a new pop up window. Is there a way I can do this?
Thank you.
echo '<div class="item_row_header">';
for($i=0;$i<count($this->fields);$i++) {
echo '<div class="item_cell jdheader'.$this->fields[$i]->cssclass.'">';
//to display the header with/without sorting option
if(in_array($this->fields[$i]->type, array(10,11,12,13)))
echo $this->fields[$i]->name;
else
echo JHTML::_('jdgrid.sort', $this->fields[$i]->name, 'field_'.$this->fields[$i]->id, #$this->cparams->filter_order_Dir, #$this->cparams->filter_order );
echo '</div>';
}
echo '<div class="clr"></div></div>';
}
echo '<div class="itemlist itemlist_type'.$this->type->id.'">';
if(count($this->items)) {
//all the item list part display here
for($i=0;$i<count($this->items);$i++) {
$item = $this->items[$i];
require(dirname(__FILE__).DS.'default_item.php');
}
Here is what I get on the front-end with the code above:
<div class="item_row_header">
<div class="item_cell jdheader">Título</div>
<div class="item_cell jdheader">Fotos</div>
<div class="item_cell jdheader">Cidade</div>
<div class="item_cell jdheader">Estado</div>
<div class="item_cell jdheader">Tipo do Imóvel</div>
<div class="item_cell jdheader">Valor R$</div>
<div class="clr"></div>
</div>
<div class="itemlist itemlist_type15">
<div class="item_row_bg featured itemrow_type15">
<div class="item_content">
<div class="item_cell ">Temporada Destaque</div>
<div class="item_cell "><img src="http://mysite.com.br/joomla/images/joomd/thumbs/1350654862temporada-destaque.jpg" alt="Fotos" /></div>
<div class="item_cell ">Exemplo de Cidade</div>
<div class="item_cell ">São Paulo</div>
<div class="item_cell ">Casa</div>
<div class="item_cell ">600</div>
<div class="clr"></div>
</div>
</div>
<div class="item_row itemrow_type15">
<div class="item_content">
<div class="item_cell ">Temporada</div>
<div class="item_cell "><img src="http://mysite.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></div>
<div class="item_cell ">Exemplo de Cidade</div>
<div class="item_cell ">São Paulo</div>
<div class="item_cell ">Casa</div>
<div class="item_cell ">800</div>
<div class="clr"></div>
</div>
</div>
</div>
Here is how I solved it:
I opened the default_item.php and found this:
if($j==0) {
echo '<a href="'.JRoute::_('index.php?option=com_joomd&view=item&layout=detail&typeid='.$item->typeid.'&id='.$item->id).'">';
echo $this->field->displayfieldvalue($item->id, $this->fields[$j]->id, true);
echo '</a>';
}
Then I could call the pop up using jQuery [http://swip.codylindley.com/popupWindowDemo.html][1]
Here is how my working code looks like now:
echo '<a class="propriedade" href="'.JRoute::_('index.php?option=com_joomd&view=item&layout=detail&typeid='.$item->typeid.'&id='.$item->id).'">';
Thank you all so much for the help.
As Alex noted, this isn't possible with just PHP. PHP is a server-side language that happens before the page is loaded. You can achieve this with HTML and JavaScript.
You should look into the JavaScript function open() which allows you to open a new window with an exact width/height and URL specified.
Read more about open() here
EXAMPLE CODE :
myWindow=window.open('http://google.com','','width=200,height=200')
This will open Google in a new window with dimensions of 200x200 pixels
To use this code, you must insert this in either a <script> tag or in an external JavaScript file. I suggest using this as a function like so:
function newWindow(url, width, height)
{
myWindow=window.open(url,'','width=' + width + ',height=' + height);
}
You can then call this with:
newWindow('http://google.com', 200, 200)
you can implement this in your code with the onCLick attribute:
Click Me
Demo of my function with HTML and JavaScript
The reason I suggest this function is that using the target="_blank" attribute on some browsers just opens in a new tab, which you can use, but I assumed you wanted a whole new window
Now that you have added some code to your question, I can see you have a lot of list items, you can simple add an anchor tag to make my function work, example:
<div class="item_cell "><img src="http://alii.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></div>
<div class="item_cell ">Exemplo de Cidade</div>
<div class="item_cell ">São Paulo</div>
<div class="item_cell ">Casa</div>
<div class="item_cell ">800</div>
would become:
<div class="item_cell "><img src="http://alii.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></div>
<div class="item_cell ">Exemplo de Cidade</div>
<div class="item_cell ">São Paulo</div>
<div class="item_cell ">Casa</div>
<div class="item_cell ">800</div>
add target="_blank" in tour tag or use window.open method.
e.g.:
Google
or
<script>window.open('http://google.com','','width=200,height=200'); </script>