i need to display:none to my print button after clicking it. But that printing page open with window.open command. so i tried to inline css to not displaying it for printing but it not working.
this is where i put inline css
<input type="button" style=" #media print{ display: none; }" id="printPageButton"
onclick=" window.print(); " class="printPageButton noprint" value="Print" >
Media query doesn't exists in Inline CSS. You can use CSS #media queries in external CSS file. For instance:
#media print {
#printPageButton {
display: none;
}
}
<h1>Content to print</h1>
<button id="printPageButton" onClick="window.print();">Print</button>
The styles defined within the #media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a page with "Content to print" text.
Related
I currently have a print option on my website, I'm using #media hidden to hide specific elements, how would i go about changing an image size in the #media when my javascript print function is called?
I can easily change a normal div element, but I call an image from php like this:
<tr>
<td id="tdimg" width='200px' align='center'>
<?
if ($obituary['photo']!="")
if (file_exists("../photos/".$obituary['photo']))
echo"<img src='../photos/".$obituary['photo']."?".strtotime($obituary['addedon'])."' style='height:auto;width:180px;' border='0'>";
I can't figure out how to edit the image size here when window.print is called.
Im using this as the print code:
<a style="text-decoration:none" href="javascript:;" onclick="printFunction()">
<img src="../images/print.png" alt="Print" />
</a>
This is my #media
#media print {
#share-buttons {
visibility: hidden;
}
#flowersButton {
visibility: hidden;
}
td img{
width:600px;
}
}
Any helps greatly appreciated, thank you.
CSS always uses the closest style, meaning inline styles (such as style="...") override page styles ( such as .myclass { ... }).
In this case the inline width that you have on the image style='height:auto; width:180px;' overrides the media query td img{width:600px;}.
What you can do is:
1. Remove the inline styling and then
2. Above the media query add td img{height:auto; width:180px;}
Read more about specificity in css.
I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot
Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.
I have content in an iframe on my website that doesn't look good on small screens*. It overlaps the edge of the page. I don't want users to use the iframe content, and I want it to be changed to an image based error message (see below). I know about media queries, and I think they might have something to do with the solution. Maybe display: none? Or maybe JavaScript/jQuery show/hide functions? Here is my code so far...
<iframe id="content" width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
I would like the error message to be...
<img id="error" src="error.png" width="100%" alt="Error text goes here" title="Error Message">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
By the way, I know that iframes are depreciated in HTML5, but they are the only way to display the content I need on my website.
*I define a 'small screen' as a browser size less than 725px in width.
Using media Queries:
.hide-small {
display: block
}
.show-small {
display: none
}
#media screen and (max-width: 725px) {
.hide-small {
display: none!important;
}
.show-small {
display: block!important
}
}
Using jquery
in html body
$(window).ready(function(){
if ($( window ).width() > 750) {
$('.hide-small').show();
$('.show-small').hide();
} else{
$('.hide-small').hide();
$('.show-small').show();
}
and the html:
<div class="hide-small"><iframe></div>
<div class="show-small">Text for small screen</div>
Personally media query looks better to me, but question has Javascript and jquery tags and its possible to do it with javascript.
EDIT: adjusted width restriction
Add this into header: <meta name="viewport" content="width=device-width">
Then this is the code:
#moblie {display: none;}
#media screen and (max-width : 725px ){
#moblie {display: inline-block;}
#iframe {display: none;}
}
<div id="iframe">
<iframe width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
</div>
<div id="moblie">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
</div>
My Question is How would I change the text of a HTML <p> tag when I am on a mobile device like android or iphone?
Here is my current code p tag:
<p>You are on a desktop good</p>
This is the <p> tag I want to appear on Desktop, Tablet and Laptop.
How can I make it so that it says the following on mobile device like android or iphone in Straight Up Javascript no bootstrap just JavaScript?
<p>Please Use a Desktop to view</p>
Please Help
Thank You For All answers
gives a id or specific class to your <p> tag and include the JS after the dom loaded
<p id="changeMe">Services</p>
<script>
if (navigator.userAgent.match(/Mobile/)) {
document.getElementById('changeMe').innerHTML = 'Services Are everywhere';
}
</script>
Or use css Media Queries to show and hide Paragraphs
<p class="desktop"> Services</p>
<p class="mobile"> Services Are everywhere </p>
CSS:
p.mobile { display: none }
#media (max-width: 640px) {
p.mobile { display: block }
p.desktop { display: none }
}
You can use CSS media queries, and use elements to show or hide the element based on the screen width.
For example:
p.mobile {
display: none;
}
p.desktop {
display: auto;
}
#media screen and (max-width: 480px) {
p.mobile {
display: auto;
}
p.desktop {
display: none;
}
}
Using a desktop and mobile class on everything that should be on desktop or mobile (exclusive) is important, so that this style will work on all of those elements that you want to change.
Hi I have a situation where I want to show a button to user to Suppose like:
"Print" on click this button I want to show print preview to user that is a html table which I want to print. But I do not want header and footer that is using my application to all pages to show in this print preview to user.
So how can I make this possible to printout a html page without header and footer only content part.
Please help me I have tried many solutions for this but did not get worked anymore. I am using php scripting language(Symfony2 framework)
Thanks in advance
<style>
#media print
{
#header{
display:none;
}
#footer{
display:none;
}
</style>
This will make your header and footer invisible at print preview or printing time.
In you css, add the classes and specify this class for the container element of the header and footer which has to be hide while printing.
#media print
{
.print
{
display: none !important;
}
}
Hide header and footer when you are printing.
<html>
<script>
function print1(){
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("print").style.display="none";
window.print();
}
</script>
<div id="header">Header</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<input type="button" onclick="print1()" id="print" value="print">
</html>