How can I set my Iframe height to be dynamic to its content.
The content is only PHP code, nothing else.
I use the php to query database, and then show some ads. The more ads, the higher the iframe should be.
I thought height='100%' should do it, but no...
I have read other Q but their solutions doesn't work for me.
Suggestions ?
Thanks
You have to set height of iframe in javascript. JavaScript should be in page inside the iframe (must be if page with iframe and page in iframe are from different domains).
a.html:
<iframe src="b.html" id="myiframe"></iframe>
b.html:
<div style="height: 500px; background:magenta;"></div>
<script>
parent.document.getElementById('myiframe').style.height = document.body.offsetHeight+'px';
</script>
If the ads are just text, you can use line height * number of lines as the height. I assume you know the font size, and number of lines can be found by counting <br />'s:
<?php
// $content is your ads
// assuming ads.php returns an ad with an id, this example uses ad #10
// We are reading it with a full url because we don't want to read it as just
// a text file (we want it to be interpreted by php before we load it)
$content = file_get_contents('http://www.example.com/ads.php?id=10');
$line_height = 12; // line-height: 12px; is set in CSS
$number_of_lines = substr_count($content,'<br />'); // you can search for <br>
// and <br/> as well if you
// need to
$height = $line_height * $number_of_lines; // You may also want to have padding
?>
<iframe src="ads.php?id=10" height="<?php echo $height; ?>" />
EDIT: changed $font_size to $line_height
Related
Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/
This is the code that I am using
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
echo '</div>';
}
}
} else {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
echo '</div>';
}
}
}
Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date).
With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class.
I also notice an inconsistency here:
if ( !$detect->isMobile() ) {
...
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}
It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.
I think you've choosen a bad way to solve this problem.the best way is using css (media query).
you can't use "%" in html tag width.
width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.
If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:
<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration
I'm generating an invoice PDF using laravel snappy wkhtmltopdf
and I'm tring to add some text in the bottom of the last page,
now i already have a footer-html with the number of the page.
I tried to show the content only in the last page with this way:
<!DOCTYPE html>
<div id="footer_text">
{!! nl2br($footer_text) !!}
</div>
<div class="pagination"><span id='page'></span> of <span id='topage'></span></div>
<script>
function remove(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
if( vars.page != vars.topage && vars.topage > 1){
document.getElementById('footer_text').innerHTML = '';
remove('footer_text');
}
if(vars.topage == 1){
document.getElementById('pages').innerHTML = '';
}
</script>
and it does show me the text only in the last page BUT in the previous pages I have a big white space, here is a screenshot:
page number 1:
page number 2:
I feel like i tried everything, please help me
There is no issue with your script it might be some style issue. As you are removing footer_text in all previous pages and showing only on last page and this is somehow creating too much space. Check your CSS there must be margin-bottom or padding-bottom which is creating too much space. Enjoy!
Late to the party but looks like the ID footer_text will be set multiple times and ID's should be unique so I guess it would have worked if you used a class instead and getElementsByClassName
The footer height can't be dynamic on a different page when using Wkhtmltopdf. It's always with a static height. If this is your footer.html you have to add to your style:
body {height: 70px /for example/; position: relative;}
so you can align bottom (with position:absolute; bottom:0;) you #footer_text and content. But still, have some white space on all prev pages.
In the PDF generators, the footer content area is independent of the body content.
I am making a website that has two background images, one of them is always the same i.e.:
background-image: url("../images/centre-image.jpg");
and the other is generated via php to show a background image at random:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.jpg', ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<img src="images/background-images/<?php echo $selectedBg; ?>" class="bg">
Making the first background the full size of the DIV no matter what size of the screen was easy enough:
div.centre-options {
background-size: 100% auto;
}
however if I try to add similar CSS to the random generated image it doesn't work (just shows it at its full jpg size and then repeats) and not sure show to solve the problem.
As far as i can tell the image generated isn't set as a background but as a image to display, therefore you can't apply background styling to it.
There is 2 things you can do either apply styling directly to the image tag i.e.
img.bg{
width:100%;
height:100%;
}
or alternatively create an element and add the generated image to it's styling
would look somthing like this:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.jpg', ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<style>
div.bg{
background-image: url("images/background-images/<?php echo $selectedBg; ?>");
background-size: 100% auto;
}
</style>
<div class="bg"></div>
Preferable put the styling between the head tags
I have a string from a customers signature in the variable $signature .
The string is html and will probably contain tags.
How can i resize all the images within that string to a maxmimum set size to stop people including massive pictures but still have all the html with resized tags in the variable $signature.
I would need to set either a maximum size or some sort of ratio to reduce the image displayed.
example string :
$signature = '<b>test text</b><img src="http://kushsrivastava.files.wordpress.com/2012/11/test.gif">'
Any help would be brilliant thanx..
Perhaps you could wrap it all in a style and add a fix to the stylesheet.
so when you output the sig on the page, you wrap it...
<div class="sigstyle">
<?php echo $signature; ?>
</div>
Then, in your stylesheet, add a class...
.sigstyle img {
max-width: 300px;
max-height: 300px;
}
Just use the CSS property to re-size your image
$signature = '<b>test text</b><img src="http://kushsrivastava.files.wordpress.com/2012/11/test.gif" width="100px" height="100px">';
I have a form for user input in which users can add images hosted elsewhere using a form. The images are displayed as a small icon which is both a link and which will load an image into a div with stacking order +1 on hover. The image source address is stored in the link tag only.
I am using a <div /> with contenteditable=true for the user input. The icon is appended when the form is used. The code for this part works fine. What I would like to do is check the source of all image tags to make sure that users are not adding their own html to display full size images in their post.
I am using php on the backend to remove all tags except links and images, but would like to use jQuery to check the src of the image tags before posting.
<img src="my_icon" /> //this is what my form will input
<img src="anything_else"> //this is what I want to prevent
Update: I apologize if this is not clear. Essentially, I don't want the user to be able to input any html of their own. If they want to add an image, they have to use my built in form which inserts something like above.
You could loop over the images and then check the src attribute.
$("img").each(function(index) {
if ($(this).attr("src") == ...) {
// do something
}
}
See http://api.jquery.com/each/ and http://api.jquery.com/attr/ for more information.
Say we have the <div id="editor" /> the jQuery script would look something like this:
var srcs = [];
jQuery ('div#editor img').each (function () {
srcs.push (jQuery (this).attr ('src'));
});
srcs will now hold all the src-attributes from the <img />-tags provided in the <div id="editor" /> tag.
Especially for your site following code alerts the links for all images:
$('.postimage').each(function(){
alert($(this).attr('href'));
});
I have an answer. When users input a < or > in a contenteditable="true" div, the browser replaces them with the html notation < and >. The good news is the images would have never displayed when outputting the user comment. The bad news is that the jQuery based solutions given above will not work to remove the ugly coding. I ended up using php to do it with
$post = $_POST['comment'];
$imgcheck = true;
$stringstart = 0;
while($imgcheck == 'true'){
if($stringstart = strpos($post,'<img',$stringstart)){
if ($stringend = strpos($post,'>',$stringstart)){
$strlength = $stringend - $stringstart +4;
$substring = substr($post,$stringstart,$strlength);
if (!preg_match('~src="\/images\/ImageLink.jpg"~',$substring)){
$post = str_replace($substring, "", $post);
}
else{
$stringstart = $stringend;
}
}
else{
$imgcheck = 'false';
}
}
else{
$imgcheck = 'false';
}
}