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.
Related
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.
To show responsive image based on size when same HTML get repeated on HTML.
I am rendering below HTML which is working fine in (Chrome/Firefox/IE). I am rendering the div with css and changing a background-image using media query.
But a problem with this approach if the same template is used again on page with different images then on both place same css "market-promo-item__image" will get applying and display only one image.
However it's working fine in Chrome, Firefox on all dimensions.
<div class="market-product-item__image-wrapper">
<div class="market-product-item__image"><!----></div>
<style>
#media only screen and (min-width: 1024px) {
.market-promo-item__image {
background-image: url('//images.cloudfront.net/media/hero6-1_1920x520.jpg');
}
}
</style>
<div class="market-promo-item__image"><!----></div>
<style>
#media only screen and (min-width: 769px) and (max-width: 1023px) {
.market-promo-item__image {
background-image: url('//images.cloudfront.net/media/hero6-1_800x456.jpg');
}
}
</style>
<div class="market-promo-item__image"><!----></div>
<style>
#media only screen and (max-width: 768px) {
.market-promo-item__image {
background-image: url('//images.cloudfront.net/media/hero6-4_400x520.jpg');
}
}
</style>
</div>
I tried to use the "picture" element approach, but it's not working in IE11.
In IE 11 it's loading the image set in "src" attribute in <img> tag but when on changing (dimensions) size in IE11 it's not picking the correct image from srcset tags as per the screen size.
<picture>
<source media="(max-width: 767px)" srcset="https://image.cloudfront.net/media/promo_big_550x470.jpg?h=j14yy1b">
<source media="(max-width: 1023px)" srcset="https://image.cloudfront.net/media/promo_big1200x470.jpg?h=fgfqhin">
<img class="market-promo-item__image lazy loaded" src="https://image.cloudfront.net/media/promo_big_1920x470.jpg?h=jcp5yqn " data-was-processed="true">
</picture>
I would recommend to try to avoid inline CSS as much as possible. If I understood your question correctly, the reason why Images get overwritten when you use the same template multiple times on the same page, is caused by the way Browser parses document for HTML and CSS: style that is applied last, is the one which sticks(considering they all have the same specificity, which, judging by your code, they do).
To solve your problem, I would recommend to use 3 img tags — one img for one resolution. And add classes for 3 types of img, in order to show/hide them, based on resolution. Example:
<div class="market-product-item__image-wrapper">
<div class="market-product-item__image">
<img class="big-screen-img" href="//images.cloudfront.net/media/hero6-1_1920x520.jpg" alt="">
<img class="medium-screen-img" href="//images.cloudfront.net/media/hero6-1_800x456.jpg" alt="">
<img class="small-screen-img" href="//images.cloudfront.net/media/hero6-4_400x520.jpg" alt="">
</div>
</div>
Now you can add this CSS, in order to show/hide images for different screen resolutions:
.big-screen-img, .medium-screen-img, .small-screen-img {
display: none;
}
#media only screen and (min-width: 1024px) {
.big-screen-img {
display: block;
}
}
#media only screen and (min-width: 769px) and (max-width: 1023px) {
.medium-screen-img {
display: block;
}
}
#media only screen and (max-width: 768px) {
.small-screen-img {
display: block;
}
}
This way, you can use the same structure through your whole page(repeating it wherever you need) And display only needed images based on resolution. If you will want to add another Image in other part of the Document, you only have to change src to new Images.
Hope that helps.
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>
I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.
I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.
Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.
So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.
I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.
This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>
You can set this all by CSS but you can go with JavaScript also.
What you need is to set properties in Percentage(%); Such as:
width: 90% (You can replace value as you need to show on screen)
For preventing to not go more than specified width then you can set max-width(Again in percentage)
You can set height as auto.
$(document).resize(function(){
if(document.innerHeight > 350) {
do something
}
});
I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement.
(I couldn't post it as comment as i have less reputation :))
You can accomplish your goal two ways:
CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the #media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.
/* If the browser width is anything less than 100px, */
#media (max-width: 100px){
/* Set the height of an element */
#my_element{
height: 200px;
}
}
/* If the browser width is 1000px or more, */
#media (min-width: 1000px){
/* Set the height of an element */
#my_element{
height: 2000px;
}
}
/*
You can also do widths in ranges.
If the width is between 600px and 800px,
*/
#media (min-width: 600px) and (max-width: 800px){
/* Styles here */
}
/* This applies to height as well */
#media (max-height: 500px){
/* Styles here */
}
Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!