While building a jQuery plugin I did not want the users to load images that would cause an issue with a modal window.
There are two CSS classes below one for a DIV container, then any image in that DIV should have a max-width of no more than 98%.
.rs-modal-window {
background-color:#000000;
border:2px solid #6A96B9;
border-radius:10px;
color:#D6D6D6;
display:none;
padding:5px;
margin-left:5px;
margin-right:10px;
min-width:210px;
max-width:500px;
min-height: 180px;
}
.rs-modal-window img {
max-width:98%;
}
I recently had a need to re-size the content of iFrames for a site that uses iFrame for various reasons.
This is not an original work but a collection of demos and sample code.
1. jQuery Sample: Jscheuer1 at Dynamic Drive has the most usable example (IMO). Use the links below for the online demo and to download the code.
2. iFrame content on other domains: In order to re-size iFrames the iFrame content page you are rending needs to be on the same domain, or you have to have some control over the page that contains the iFrame content. In the case where the page is not on the same domain, but you own the code
this link at CSS-TRICKS goes into how to set this up.
(If you use Bootstrap...nothing to see here)With more and monitor sizes to deal with there are times when a website will need to load different cascading style sheets. If you have a site that has a fixed grid, for example, and you do not want it to wrap or allow the user to alter the look, you may need to load multiple style sheets.
Here is one method. In the header section of your Master Page load a different style sheet based on monitor resolution.
<script type="text/javascript">
var screenWidth = screen.availWidth;
/*alert(screen.availWidth);*/
if (screenWidth > 1024) {
document.write('<link rel="stylesheet" type="text/css" href="main_highres.css"/>');
}
if (screenWidth <= 1024) {
document.write('<link rel="stylesheet" type="text/css" href="main.css"/>');
}
</script>