I have to change font in the new window of window.open() because I want to print in receipt printer. I already change the True Type Font Subtitution but it doesn't work . So how can I add css for the new open window ??
here's my code :
<img src="barcode.png" id="barcode">
<script type="text/javascript">
function printImg() {
ImageLink=document.getElementById("barcode").src;
pwin=window.open('','','width=0,height=0');
pwin.document.write("<center><h>My Store<h><br>Ekiosk</center><br>Date : <?php echo date('Y/m/d'); ?><br>Time : <?php echo date('H:i:s'); ?><br>Customer Name: <?php echo $cust['firstname']; ?> <?php echo $cust['lastname']; ?> <br>Total : <?php echo $cust['total']; ?><br><center><img src='" + ImageLink + "'/><br>Thanks For Shopping !</center>");
pwin.print();
pwin.close();
}
</script>
Can anyone help me to change font into font receipt ?
Add a CSS file
<link href="your.css" ... />
Just like you're doing with your pwin.document.write sentence
You should also write a full valid html code in the document.write, including html, title, head and body tags, and put the link inside the head tag, like you use to do in any other page.
Related
I have this code to upload an image from Edit Profile page and display it on Profil page:
Code on Edit Profile Page to upload image:
echo '<input type="file" name="my_file_upload" id="my_file_upload_id" class="bg_checkbox"/>';
function register_team_show_case_setting() {
//register our settings
register_setting('my_team_show_case_setting', 'my_file_upload');
}
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
$attach_id = media_handle_upload('my_file_upload', $post_id);
if (is_numeric($attach_id)) {
update_option('option_image', $attach_id);
update_post_meta($post_id, '_my_file_upload', $attach_id);
}
Code to display image on Profile Page to display uploaded image:
echo wp_get_attachment_url(get_option('option_image'));
The upload part works, but when I go to the Profile Page to view the uploaded photo, it shows a URL instead of the image itself, like this: https://i.imgur.com/CSFFK1g.png
Should I make something like this to display correctly?
<img href="wp_get_attachment_url(get_option('option_image'));"/>
<img src="<?php echo wp_get_attachment_url(get_option('option_image')); ?>" />
You need to pass he image source to the src attribute not the href attribute, which is meant to send users to a different web page not render images.
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I'm creating an HTML5 template in Joomla 2.5 and I wanted to know what are my options for the style attribute in the code below?
<jdoc:include type="modules" name="top" style="???" />
Open templates\system\html\modules.php. There are defined system styles, like xhtml, rounded etc. You can also see the code how each style will be rendered.
If you want to add your own style, you need to create a new module chrome. In your template html folder (not system, don't edit above file), create file called modules.php.
Inside, make a function like this
defined('_JEXEC') or die;
function modChrome_mystyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="moduletable">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}
This way you can create custom module outputs, just edit the code the way you want.
Then, in your template file, include the module with
<jdoc:include type="modules" name="top" style="mystyle" />
I need to add a spantag to an h1 heading in wordpress. I tried writing in through the CMS but it renders the spantag as text.
The site's title is a name and I want to give different styles to the words.
Suggestions?
Following David Thomas's advice I've written this: but it appends the span last and empty.
<h1>
<a href="<?php bloginfo('url'); ?>/">
<?php
$completeName = bloginfo('name');
$split = explode(" ",$completeName);
echo $split[0]."<span>".$split[1]."</span>"
?>
</a>
</h1>
You should be using get_bloginfo as Felipe suggested, but still pass in the 'name' parameter.
I was just working on the same code for the same reason and thought I should post for future visitors:
<?php
$completeName = get_bloginfo('name');
$nameParts = explode(" ", $completeName);
echo '<span>'.$nameParts[0].'</span> '.$nameParts[1];
?>
Apply the style to the h1 instead.
By the way, you probably want to edit the theme.
What about:
<? echo get_bloginfo('name', 'raw'); ?>
Can't test it for now, but here's the documentation about it:
bloginfo()
==> it just echoes the result of get_bloginfo() and there's a second parameter to this function
==> wptexturize(), a function that WON'T be called so beware!
Nope. Ignore this. The space is put there by browser.
This is a HTML snippet from my application:
Correct answers:
0 / 6<br /><br />
You have failed to pass the final test.
<a href="/module/controller/course/id/5" class="accessible-link">
Click here
</a>
to return to the training.
As you can see, there is a single space after the </a> closing tag. Yet in the browser the space is added inside the anchor. So it looks like this:
This is the PHP code which produces the HTML:
<?php if (isset($this->correctAnswersCount) && isset($this->answersCount)): ?>
<?php echo Zend_Registry::get('translate')->_('Počet správnych odpovedí'); ?>:
<?php echo ToHtml($this->correctAnswersCount); ?> / <?php echo ToHtml($this->answersCount); ?><br /><br />
<?php endif; ?>
<?php echo Zend_Registry::get('translate')->_('Záverečný test sa vám nepodarilo úspešne absolvovať.'), "\n"; ?>
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
<?php echo Zend_Registry::get('translate')->_('pre návrat do kurzu.'), "\n"; ?>
I am completely baffled by this and cannot figure out what's causing this even though I've been staring into the code for 30 minutes now.
This is a relevant part from the translation file:
'Kliknite' => 'Click here',
As you can see, there should be no space added by Zend_Translate.
Change this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
Into this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?></a>
The </a> should be in the same line after the <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?> aka Click Here
EDIT:
The new line and the spaces after it renders like 1 space that is still inside de <a></a> tags, that is where the blank space is coming from.
EDIT2:
For the record I also don't like the closing tag to be next to the content instead of a being in a new line but that's how it has to be done in order to work correctly.
I like good formatted code and I always look for a autoformat command in my IDE.
But at least for example in Visual Studio when you hit Ctrl + K, Ctrl + D (the Format Document shorcut) the closing tags like the </a> are not automatically moved to a new line for this exact reason: that it should not break the way it looks before the auto format.
Close the 'a' tag directly after the next, without a newline, like this:
Click here
Try it like this:
Click here
I am not sure if this will work, but it is worth trying.
Put immediately after the </a> tag.