I'm using Laravel PHP to retrieve images from a database and display them in a blog application that I am creating. I decided to use an 'iframe' tag so that I can retrieve and display both images and videos in the blog. The problem I'm having however is CSS related where I'm trying to style the 'iframe' so that it will adjust its size to different size images and videos and retain their aspect ratio at the same time.
Right now small images are displayed fine but if I use a large sized image, anything with a width greater than 800px, the image will not keep its aspect ratio and/or be clipped.
View (Laravel PHP Blade File):
<div class="blog_img_container">
<iframe class="blog_img_container_image" scrolling="no"
src='{{asset("uploads/photos/" . $funnyblocks_blog->blog_photo_path ) }}'
onload='javascript:resizeIframeHeight(this);
javascript:resizeIframeWidth(this);' ></iframe><br>
<p> {{ $funnyblocks_blog->blog_content}} </p>
</div>
CSS:
.blog_img_container {
float:left;
position:relative;
width:60%;
}
.blog_img_container_image {
display:block;
max-width:100%;
max-height:400px;
margin-top:20px;
overflow:auto;
}
.blog_img_container iframe {
border:none;
}
I also tried using some Javascript that I called in the 'onload' within the 'iframe' element but its still not producing the desired result.
Javascript:
function resizeIframeHeight(obj) {
obj.style.height= obj.contentWindow.document.body.scrollHeight + 'px';
}
function resizeIframeWidth(obj) {
obj.style.width= obj.contentWindow.document.body.scrollWidth + 'px';
}
I don't really know if this is the correct approach I should use for dynamically retrieving and displaying both images and videos within a single element (In this case the 'iframe' tag). Any help is greatly appreciated!
I'd recommend using a combination of CSS3 object-fit and a JS object-fit polyfill like this and a JS iFrame resizing utility like this.
The object-fit property will resize your image to fit/cover the bounds of your iframe (without changing the aspect ratio) when the iframe is constrained by its container and the iframe resize will resize the iframe to be the size of the image when the image is smaller than the bounds of the iframe container.
Integrating these two utilities won't be trivial since they both alter the markup of the page in ways that could influence the outcome of the other plugin. I have done very similar integrations before however and been successful.
Related
I am trying to make a p always have the same width and height as an image that is placed next to it.
I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..
I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>
Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.
I have a page in which navbar(header) is constant while the scroll bar moves and the background moves along with the scroll bar. At the same time text inside body is hidden below the navbar. Background is common for both navbar and text. What i want to do is, i want to shift the text inside "static-container" to an iframe. Is it possible to work with the scroll bar of iframe and main page simultaneously? In the fiddle i posted there is vertical scrollbar only for text applied. Can i get it for whole page(single scroll bar)?
JSFIDDLE
//code $(document).ready(function() {
$(".content").scroll(function() {
$("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
}); });
I do not know exactly what you need, but I have a clue. If I'm correct you want to change the div static-container into an iframe. Some much for the simple part. If I'm still correct, If the content of the iframe scrolls, it should actually scroll the main page?
There a one or two ways to do this:
You need to know the content height of the page that was loaded into the iframe and adjust the iframe correspondently.
Fill up the iframe inside the content div.
Hide the scroll bar in the iframe, but detect scroll somehow. However this will be a daunting task and the road to this will be full of potholes.
I'm going to provide a solution for option 1 and 2.
first restyle your div to iframe.
//HTML
<iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">
seamless allows the iFrame to have a transparent background, flows with the document.
sandbox so you can use pages from the same trusted source. Remember you can't do cross-domain calls. It will result in an access denied.
FOR OPTION 1
Second you need coding to detect when the page has completed loading.
function detectIframeCompletion()
{
var elementIframe = document.getElementById("static_container");
//Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";
}
Furthermore I really need to stress out that this solution only works with static content. When the content of the iframe's page is changed, the height of the iframe needs to be adjusted equally.
FOR OPTION 2
Please ignore all JavaScript from option 1. Just add this CSS to your CSS.
.content {
top:65px;
overflow: hidden;
bottom: 0px;
width: 100%;
position: fixed;
}
.content > iframe {
height: 100%;
width : 100%;
}
This will add only a scroll bar to the iframe, when the content of the iframe overflows.
Conclusion
Use option 1 when you need to add content below the iframe and you want just one scrollbar. Use option 2 when all the content is loaded into the iframe.
Most important lessons from this answer:
Seamless (or legacy allowtransparency) to make the iframe flow with the document
Use sandbox to enable content (from same source) to be accessed.
When defining CSS variables in HTML5 (CSS or via JavaScript) always add the unit. I.e. px.
SIDE NOTE: only HTML5 enabled browsers will be able to do this correctly. For the majors: IE9+, Firefox and Chrome.
You just need to make your iFrame Auto Resizing .
for that you can use this JQuery plugin to get dynamically resize iframes based on content height.
1. download it from here
2. Include jQuery library and jQuery iframe Auto Height on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>
3. Create a iFrame, and make scrolling=no
<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>
4. Call the plugin and then done
<script>
$('iframe.photo').iframeAutoHeight({
minHeight: 240, // Sets the iframe height to this value if the calculated value is less
heightOffset: 50 // Optionally add some buffer to the bottom
});
</script>
As found on
https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html
i am trying to do it simple and will be happy to see / hear, examples / ideas
for the right approach :
suppose i have an jpg image: width of 780px and height of 2546px
that contains coupons.
my goal is to click on a coupon and print it...
my question is what is the best way to implement it
i thought about image map the will trigger a java script call when ever specific "coupon" is clicked and through the image map specification it would load an image(of the specific) coupon for printing.
i think that maybe there is a better solution..
keep in mind that my only option is one large image that contains coupons for printing.
Wrap your coupon image in a div
<div id="coupon_viewer" onClick="this.style.display='none'">
<img src="coupon.jpg">
</div>
With this CSS
div#coupon_viewer { z-index:100; width:200px; height:300px; overflow:hidden; }
div#coupon_viewer>img { position:relative; left:0px; top:0px; }
When you click on the main coupon, simply display the viewer div and set the left and top properties to the appropriate coordinates for that coupon. You can also set the div width and height as needed. Then window.print().
If your window is initiating the print dialog before rendering the coupon_viewer layer here's how you can delay the print command, long enough for any slow browser to render the coupon layer.
setTimeout(function () { window.print(); }, 800);
After a quick search, here is a thread I found about how you can pull the coordinates when you click on the coupon. You can then multiply the coordinates by whatever factor you reduced the first image size.
jQuery get mouse position within an element
Here is a link to the overflow property spec hidden just means your div will act as a view-port while you move your image around inside it using the left and top properties:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Good luck
i did it eventually with the use of image maps:
coordinated the 'send to print button' and send to javascript 'print()' method that accept parameter
the parameter is a number of a picture(coupon)
i have a folder that contains all the coupons images:
1.jpg, 2.jpg ..... etc'
the print method retrieve the string (1.jpg)
and then print it.
I am loading in some html using YUI3, that looks like this:
<div id="content">
<p>This is all of my content, neat neat neat!!!!</p>
<img src="ps_logo.png" alt="Google" />
</div>
I've tried using .get('offsetHeight') and .getComputedStyle('height'), but both only return the height of the div and paragraph tag and don't take into account the height of the image. So, even though the image is 150px tall, I am getting 73px returned.
Whats the best way to get the width and height of a nodeList when the elements haven't had it set via CSS?
Thanks for the help.
Either set the img height in the img tag - account for it, or ensure that the height query is called after the image has loaded, not just after the image tag has been put in the page.
My blog posts live in a container that's 600px wide. When I have an image that's wider than 600px, I resize it via CSS (.post img {max-width: 600px})
I'd like users to be able to click on these resized images and see the full size version in a lightbox, but to do this I need to detect in Javascript which images have been thus resized (since I don't want to lightbox images that appear full size inline in the post)
You can check the image element's width property to get the rendered width of the image. If it's 600, the image is most likely to be shrinked. However, the image might originally as well be exactly 600 pixels wide.
If a browser supports the new HTML 5 naturalWidth property, you can get the original image width (in pixels) and compare that with the value of clientWidth.
I don't believe you can in the sense you are speaking as JS is going to read the image it is in the DOM. However what if you set the max-width in the JS:
Just Psuedocode
onload
{
if (img.width > 600px)
{
img.style = max-width: 600px;
img.lightbox();
}
}