include php file only at certain screen resolutions - php

I'm having issues with adsense on responsive design. One solution I found is to not load them at all if window size is not big enough. So I thought I would create a separate php file with advertisement code, container etc... and than include it on a page. However, I can't figure out how to only include this file if, lets say, window width is 720px or above, else don't include this file.
Perhaps, javascript can be used some way, not sure how it will work with all the dom and php includes though.

You can try something like:
<script language=javascript>
if (screen.width >= 720 )
$('#place_holder_div').load('file_from_server.php');
</script>
Here #place_holder_div is a div in your html file. The syntax is Jquery but of course you can use plain javascript if you wish. The code looks at the screen width and if greater than 720 pixels, loads the php file file_from_server.php (which will contain your ad) into the placeholder div.

The only way to know what the window or screen size of a client is, is by using JavaScript.
window.innerHeight; // Available height of the browser for the document
window.innerWidth; // Available width of the browser for the document
window.outerHeight; // Browser height
window.outerWidth; // Browser width
window.screen.height; // Screen height
window.screen.width; // Screen width
After inspecting these, you could do a HTTP request for the relevant file. It is, however, probably not the best solution since the user can actually change any size mentioned above at any given time.

Related

How to embed pdf within an iframe with height exactly one page?

I am trying to embed a pdf within an iframe but when I set height to 100% it is really small.
Is there a way to make the height exactly one page?
my code
<iframe src="/wp-content/uploads/test.pdf#view=FitH" width="100%" height="100%"></iframe>
Try to add some CSS into your code as below:
<iframe src="/wp-content/uploads/test.pdf#view=FitH" style="width: 100%; height: 100vh"></iframe>
There are two parts to the question
Part 1
"when I set height="100%" the frame is too small
it will be 150px on whatever device since you cannot use % for frame height. The correct way is to set a frame to 100vh (viewport height as suggested by Baris Taskiran in their answer) but there are frame imbedding values that suggest say style as width: calc(100vw - 18px)!important; min-height: calc(100vh - 18px)!important ; can be preferable to avoid drag resizing issues.
see https://stackoverflow.com/a/74354395/10802527
Part 2
You cannot force a browser internal PDF view (it is after PDF download, or not, or download and view. Embed, iFrame or Object it makes no difference the PDF is out of your control and in the application/PDF) but you may suggest it attempt to FitV (fit the vertical) in the viewers downloaded frame.
However that can be meaningless for some PDF viewing plugins, if they are not Acrobat since those are Adobe Acrobat "fragments" and do not need to be supported by plugin extensions such as Chromes Foxit/Skia or Firefoxs PDF.js etc.
For more on the topic see https://stackoverflow.com/a/72265519/10802527 and https://stackoverflow.com/a/72106063/10802527
The question asked is why the middle FitV appears not to be working and since both the HTML and the PDF now belong to the user, they may edit or control view as they wish. This allows users to change font if they wish to inverted W&B Comic Sans or allow for different screen sizes/dpi etc. Both the files are 100% theirs.
The following answer does NOT work:
=====
This may not be practical for you, but this is how I guarantee that only one page of a pdf is displayed in an .
Give your a class--I use "x85x110" for 8.5" x 11" paper and use the following CSS:
iframe.x85x110 { height:calc(103% * (8.5 / 11)); }
The "103%" is a fudge factor that you can change to get exactly the height you want, i.e., to get just a hair of the blank space between one page and the next. The white-space on either side of the "*" and "/" is critical--calc won't work without it.
=====
This answer, however, DOES work:
=====
First the CSS:
iframe.x85x110 { width:80%; }
Second, the HTML:
<iframe class="x85x110" src="A Boy And His Dog/docs/Downunder Expansion - 8.5 x 11 - 10pt.pdf"></iframe>
Third, the javascript:
<script type="text/javascript" >
x85x110();
window.addEventListener('resize', x85x110);
function x85x110()
{
array_x85x110 = document.getElementsByClassName("x85x110");
for (count=0; count<array_x85x110.length; count++)
{
array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";
} // for (count=0; count<array_x85x110.length; count++)
} // function x85x110()
Fourth, the explanation:
Give your <iframe> a class name, I used x85x110 because my documents are 8.5" x 11".
I use width:80% because I want the frame to be 80% of the width of the column width in which the .pdf and its containing <iframe> lives--this is NOT necessary.
The x85x110(); calls the function x85x110() when the page loads.
The window.addEventListener('resize', x85x110); calls the x85x110() function whenever the page is resized.
The array_x85x110 = document.getElementsByClassName("x85x110"); collects all of the <iframe> elements of the class x85x110 in an array named array_x85x110.
Then, for each element of array_x85x110, i.e., for each <iframe> of the class x85x110, we loop using the for (count=0; count<array_x85x110.length; count++) {} and set the height of the <iframe> to (11.0 /8.5) times the offsetWidth of the <iframe> with the the:
array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";
Math.round() rounds the resizing of the <iframe>'s height to the nearest pixel.
The (11.0 / 8.5) divides the <iframe>'s .offsetWidth by 8.5 (the width of my pdf page in inches), which changes as the browser window is resized, and multiplies by 11 (the height of my pdf page in inches), to maintain the pdf's natural aspect ratio.
If for some bizarre reason you're using A4 paper, you European wierdo :-), the (11.0 / 8.5) would be (11.69 / 8.27), i.e., the height of a piece of A4 paper divided by its width.)
=====
You can see this CSS at work, for real now at my board game design page.
Sorry for the confusion.
You need to set the following settings in CSS (suitable for PDF page size):
width="594px"
height="580px"

After page has already loaded, load another image and use it to replace the page's current BackGround image

The front page of my site has quite a big image as a background, of course I've made it as small as possible but it's still going to take a moment to load on slow connections.
So if the user stays on my site for a while I want to change that background image to another one. I've seen some of the plugins which are available to have something similar but they all seem to load the images all first. Which would be slow for my purposes
So I would like to just load the page as normal. Then after a little delay behind the scenes load another image and once it's loaded, replace the original image. Is this possible?
Sure set an image tag in the body like this: <img id="bgqueue" />
Your CSS would hide that:
#bgqueue {
display : none;
}
And your jQuery would look something like this:
setTimeout(function() {
$('#bgqueue').attr('src', 'http://someOtherjpg').on('load', function() {
$('body').css({background: 'url(' + $(this).attr('src') + ')'});
});
}, 30000);
So the image is loaded into that image tag behind the scenes after 30 seconds in that example, and once it's loaded, the callback fires and sets the body background image to the cache file.
Demo: http://jsfiddle.net/seancannon/TpPkk/

DomPDF - Changing the point/pixel ratio

I'm trying to use DomPDF to generate a PDF out of some HTML. I need the page to be 20mm x 20mm, so I use the following:
CPDF_Adapter::$PAPER_SIZES['my_square_page'] = array(0, 0, 566.929134, 566.929134);
$dompdf->set_paper('my_square_page','portrait');
It works properly, if I check the PDF properties the size is ok. The HTML that will appear in the PDF has a container div of 490x490px. This size cannot be changed, as the elements inside that div are absolutely positioned.
The problem, then, is that in the generated PDF the div does not cover the entire page. I've tried setting the DPI, using different values in
def("DOMPDF_DPI", 150);
But it does not seem to make any difference at all. The output I get is this (gray borders are from the PDF reader):
I've tried setting the width and height of body and html in the CSS of the content, but it does not work.
You can check the source code of my sample case here.
Ok, I figured it out. Looks like the line
def("DOMPDF_DPI", 150);
does not actually do anything. I did change the dompdf_config.custom.inc file and then it worked. Added this:
define("DOMPDF_DPI", 62.230);
But now the images look too big :S

random images with background: linking to a random image php script - simpler and better way

I know there has to be a better way to do this.
Currently I have a php script which will generate a random image from a certain directory when called.
I have div's calling the background.php file in the stylesheet under the div's background setting
background:url(randomimagescript.php);
There are a lot of little div's on this page right now, all calling separate random image php scripts... is there a way I could use a variable when calling the file, so I can just use one script? I still need to have good styling control over the image, so i'm not sure if there is a better option than calling the script as a background image for a div.
If anyone has any ideas, let me know!
try this (it might not be optimal):
background:url("randomimagescript.php?folder=myfolder");
and in randomimagescript.php:
<?php
$folder = #_$REQUEST['folder'];
$url = "galleries/$folder/thumbs/image.jpg"; // ie, compose image
http_redirect($url); // go and find the image.
?>
It sounds a little crazy, but you could actually make your stylesheet be generated by PHP, and just fill in the blank, so to speak.
background:url(<? echo pickRandomImage(); ?>)
set the background for all divs once on the page using jquery
var image = <?echo randomimagescript.php?>
$("div").css('background', 'url('+ image+ ')');

How do i get jquery variables in agiletoolkit (aka ATK4)?

I need to get the window height and width of the browser using ATK4, the lightweight php framework with jquery
The javascript to get this would be
$(window).height();
$(window).width();
As agiletoolkit integrates with jquery, i think it should be possible to get it with something like
$height=$p->js()->univ()->_selectorWindow()->height();
but this doesnt work, instead when i pass the $height variable to be used, in the HTML source i get the following .
'height':$(window).univ().height(),'width':$(window).univ().width()
and it doesnt display the element at all
I want to be able to call jqplot to set the width of a graph to the full width of the users browser on a particular page. To do this, i need to pass a parameter which is width:NNN where NNN is the number of pixels wide. As far as i know, jqplot doesnt support a parameter as a percentage so i cant say width:100%. Also, if i set a div on the page and add the graph, it also ignores the size of the div and creates a small graph 400 x 300 pixels only.
I created a plugin to use jqplot from atk4 but this is one of the issues I still need to resolve. I can pass a height and width as parameters without issue but i want it to default to the full screen size if no parameters are specified.
Can anyone suggest the right syntax for getting these values ? TIA.
what you should understand is that "$p->js()->_selectorWindow()->height();" will actually be translated to "$(window).height();" -- but you can get width of window ONLY at client side.
so, if you want to get height of the window in your code, you can do that only by using ajax request, where actual heigh is sent back from the frontend.
please, rephrase your question so that it's clear what you need height for so I can suggest best way of doing that.
example of how to get backend and frontend interlinked:
paste this in page/test.php and open up http://example/test to see in action
class page_test extends Page {
function init(){
parent::init();
$b=$this->add("Button");
$b->set("Get Width");
$b->js("click")->univ()->ajaxec($this->api->getDestinationURL(), array("width" => $this->js(true)->_selectorWindow()->width()));
$v=$this->add("View_HtmlElement")->setElement("div")->set("Click button to get width of the window");
if ($w = $_POST["width"]){
$v->js(null, $v->js()->html("Width: " . $w))->univ()->alert("Width: " . $w)->execute();
}
}
}

Categories