I am using this code:
<?php
header("Content-type:image/gif");
And some PHP gd code below to generate the image
?>
The problem is that the page title is set to an image of width x height. Is there a way to change the page title, without using the following?
<img src='link'/>
NOTICE: I don't need to use any JavaScript code or external file.
Wrap the image's new window in html. I'm assuming from the question's poor wording that you are opening a new window with "just the image" as its content?
If so, just wrap it via HTML. Unless a browser is not consuming the result, in which case you need to be more specific to the process / purpose.
The text you see in the title of a page like this is determined by the browser. You can't change it via PHP. When rendering an HTML page, the browser looks for the title element, however, in everything else, it chooses the title based on attributes of the page you're viewing. As you guessed it, the only alternative is to create an HTML page and reference the image through an img tag and changing the title through the title tag.
You can create an html page, with an iframe (size = 100%), that embeds the image. Then you can then set the title in the HTML page.
Example:
<html>
<head>
<title>YOUR TITLE</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<iframe src="http://www.nbc.com/"></iframe>
<body>
</html>
Related
I am trying to place a calendar on the top right corner of my page:
<?php
echo 'other html 1';
echo 'other html 2';
....
// Calendar
echo '<iframe
src="https://calendar_link"
style = "border: 0;
position: absolute;
width: 500; // This does not have any effect, why?
height: 500; // This does not have any effect, why?
top: 160px; // This does not have any effect, why?
frameborder: 0;
scrolling: no;">
</iframe>';
?>
The calendar is displayed and I can alternate its size, but I can't figure out how to move it to an arbitrary position. It always appears below other html code regardless of what I'm doing.
Note that:
I can't change php to html file, as this page is part of a larger system
I don't want to rely on other echo statements. It would be nice to fix this without the need of figuring out what's happening in rest of that file.
I would be happy to move style things specific to iframe out to a separate css file.
How to place iframe wherever I want?
Since you are positioning your iframe, you should use position property and as you want your iframe appearing top right corner of the page then you should also use top and right properties to achieve this result
<?php
echo '<iframe
src="http://cuassistant.tk/"
style = "
border: 0;
position: absolute;
display: block;
width: 500px;
height: 500px;
top: 0px;
right: 0px;
frameborder: 0;
scrolling: no;">
</iframe>';
Checkout the following link CSS position property
Note : since iframe is an old thing in html, there are so many attributes are deprecated. You should better take a look at those at the following page Iframe Tag
I can't find anything that works for me, and since I'm a cut and paste html editor (I know only the main basic stuff), I don't understand most of the other posts. This is the webpage I'm working with: http://goo.gl/MgsoX4 (I'm hosting it on dropbox because I haven't finished it yet). I had the idea of having a background change every time some refreshed/reloaded the page. I can't seem to find anything that works for me. The CSS for the background is the following:
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("images/overlay.png"), url("../images/1.jpg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
Whenever I change "../images/1.jpg" to "../images/2.jpg", the background will change to the second jpg, but I've tried a php image rotator and it won't work!
The issue you're having is that you're trying to define the image inside of the stylesheet. In order to create a random background image, it will have to be attached as an inline style.
Keep the css how you currently have it for a fallback. You would then have the div look something like this:
<div id="banner" style="background-image:url("images/newImage.jpg");"></div>
#Steve-Sanders comment is also correct in that you will need an actual server to run PHP.
Inside of your PHP page, inside of the head tag, you could alter the #banner style. Because CSS is cascading, doing this will override anything inside of your external style sheet
my_style_sheet.css
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
my_page.php
<head>
<link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
<style type="text/css">
#banner {
background-image: url('images/<?php echo rand(0, 5); ?>.jpg');
}
</style>
Javascript example
...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>
If you want to use JQuery you can paste this code in the head section of your html page or just before the closing tag of your page.
I dowloaded your files and changed the file path for the img and it worked fine for me. everytime I hit f5 you will get a new background image
<!-- place in head element or before closing--> <!-- </body> tag of html page -->
<!--load JQuery first-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//the highest number of the image you want to load
var upperLimit = 10;
//get random number between 1 and 10
//change upperlimit above to increase or
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);
//change the background image to a random jpg
//edit add closing ) to prevent syntax error
$("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path
});
</script>
It won't work, unless your page is in PHP. You need to use javascript/ajax instead to rotate the images.
PHP requires a server that can execute the code. Dropbox doesn't execute the code because it isn't supposed to. Instead it just serves the html the way it was uploaded, if you check the DOM you will see the php tags. When served by a proper server that executes php the tags are removed.
Edit: change the html file's extension to "php" so that it looks like "index.php"
A simple solution to this could be,
before doctype
<?php
$bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png');
$i = rand(0, count($bgimage)-1);
$mybgimage = "$bgimage[$i]";
?>
and inside style call
background: url(images/<?php echo $mybgimage; ?>) no-repeat;
I have a PHP script that pulls an RSS feed. The script pulls the article and sets it as a variable:
$page .= "<br><span class='rssdesc'>$description</span>";
I can change the size of images in an article with the following CSS:
.rssdesc img {
width: 50px;
height: 50px;
}
This works fine. However I cannot seem to style the text of the article. I assumed this would be accomplished like this:
.rssdesc {
font-size:9px;
color: #0094DE;
}
But for some reason it doesn’t work. I have tried using !important and .rssdesc font
but still nothing. Any ideas would be greatly appreciated.
Update I can also style links in an article using the following:
.rssdesc a:link {
color: #0094DE;
font-size:9px;
text-decoration: none;
It turns out that the tables in the RSS feed was responsible setting the font properties. I was able to override this in the CSS using the following:
.rssdesc table td {
color: #c02537;
font-size:9px;
}
I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
I have two divs, one on the left, and one on the right side of my page.
I have an iframe in the middle of my site, which content is loaded from a php file with mysql results in it.
I want the two divs on my page to get the TOTAL height of my page and set it as its own height so the borders continue all the way down. I also would like the iframe to adjust its height depending on the "results_table" which "myPhpFile" echoes out.
Here is my two divs code:
<div class="bgr_left">
<div class="bgr_right">
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
AND
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background-color: #E7F5F0;
}
And here is the iframe inside a table:
<table width="850px" height="1000px" border="0" align="center">
<tr>
<td width="845px" height="998px">
<iframe style="border:none; width:100%; height:100%;" name="iframe001" src="frame.html" id="iframe001"></iframe>
</td>
</tr>
</table>
And here is the form:
<form id="nav_form_main" name="nav_form_main" action="bincgi/myPhp.php" target="iframe001" method="get">
And here is the part in the php file which creates a table from the mysql query:
while($row = mysql_fetch_array($qry_result)){
My question: Is this way the best way to get two side borders on my page? AND, is there a way to set the iframe height to the content which is about to be loaded inside it from my "FORM"...
BACKGROUND HISTORY:
I have a form on my site, which targets the iframe, and the action on the form is a php file which returns a mysql query result inside a table. So this table is what ends up inside the iframe!
Trying to resize an IFrame onload using Javascript can be done but is very cumbersome in my experience. Using Ajax to dynamically load the PHP results into your HTML structure would be easier and more reliable. If you load the PHP output into a DIV, that DIV's height can increase the page's height, thus increasing the other DIVs' height.
You can access an iframe content height with JavaScript only if both the iframe and the JavaScript are on the same domain.
You can try inserting content with PHP like:
$content = file_get_contents('http://domain.net/iframe.php');
//
//Do something with the content here
//
echo($content);
But it's not clear solution if you can't modify the iframe.php to get only content you need. I think you'll end up with static iframe height.