I'm doing a project in codeginiter these days, i want to print just the text area when the print button is clicked? can you guys help me to achieve this?
regards.
Rangana
codeigniter is an excellent framework, but unfortunately doesn't quite apply in this case because php is a server side scripting language and printing is done clientside. For printing a given area you'll want to use some javascript, specifying the div you want to print out. I would recommend the jQuery library as it has a print plugin I've used in a few of my projects. So you would use php to define code like this
<div id="content"> ... </div>
<div id="print_button">Print</div>
<script type="text/javascript">
// javascript goes here, if you were using jQuery
// with the PrintArea pluginyou might do...
$("div#print_button").click(function(){
$("div#content").printArea([options]);
});
</script>
Which would then execute client side when the print button is pressed.
Check out jquery here http://jquery.com/
There's also the vanilla window.print() function with setting up a print stylesheet if you don't want to use jQuery.
If you want to define certain elements to be printed only you need to create a separate css stylesheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Every element which should not be printed can be hidden using display: none;. See this page for more infomation.
Related
I have a very simple javascript animation that looks like this
$(function() {
$('#slider1').cycle();
$('#slider2').cycle();
});
Im then calling in this script like this into my head:
<script type="text/javascript" src="js/slider.js"></script>
Then the divs that have the id "slider1" and "slider2" are contained in php include files being called into the page like this:
<?php include('assets/col1.php'); ?>
The code in the include file looks like this:
<div id="slider1">
<img src="images/image1.png" />
<img src="images/imgae2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>
Which works fine except when you get to IE8 or IE9. The javascript will work about 75% of the time which is why this has me baffled. When you load the page or come back to the page, every once in awhile it just doesn't activate the javascript and all the images render in one long column (essentially what it looks like with no js function)
I suspect its something in the order in which IE9 is loading the PHP and the javascript but I am only a novice in both js and php so some very clear help on how to fix this would be really great. Thanks in advance.
Soooo long story long...
PHP will return interpreted HTML. Every time you include a file, PHP will flush the buffers, which means, certain content is returned to the browser prior to others. While this happens, the page is still in a loading state.
For this reason, you need to make sure you call $(document).ready(function(e){ ... });. This will give you code a chance to finish flushing the buffers and load into the browser, before the javascript is executed..
I had encountered a similar issue while using Dojo, which I solved as follows:
Set the main or the parent div display style as none:
<div id="g_body" style="display:none">
Now once Dojo finishes loading, I change the display style to block using the dojo.ready function:
require(["dojo/ready", "dojo/parser", "dijit/registry"], function(ready, parser, registry){
ready(function(){
if(document.getElementById("g_body")!= null){
document.getElementById("g_body").setAttribute("style","display:block");
}
});
});
The pages then only shows when Dojo elements are completely loaded.
I believe there is something similar in jQuery, but I am not sure. Probably:
$(document).ready(function() {});
Hope this helps.
So since joining I've learned a lot - compared to where I was - but I still don't know the terminology and functions well enough I suppose... so here's my problem:
I'm making several js-based galleries. The idea being that there will be 3-4 pages containing some thumbnails that will populate a specific div with the corresponding art and copy (a div I'm calling using innerHTML) and so far that works. Here is the script:
function changeDiv(target,id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
This works great... when I have the 'target' and all 'id's in the same page. I even went as far as using a php include on the page (I added it to the footer) and nested it inside an inline div that I set to visibility:hidden. A shot in the dark but this worked too. EXCEPT that my footer was now about another 100px taller with nothing but blank space. Apparently it HID the content, but made plenty of room for it.
But what I really want to do is include the source of the divs I'm calling (we'll call them artwork.php) into the gallery page ( ...and gallery1.php) the same way a css or js is linked in the header or the same way it is included with a php tag but without messing up any of my objects.
I hope that made sense, but in brief: How can I call an external php document that won't display but can be called upon by the js?
Any thoughts?
1) visibility:hidden; keeps the place on the page. Use display:none instead.
2) Jo have two possibilities.
a) Use Ajax (google it!) if your artwork.php will change dynamically.
b) Use artwork.php as JS file, ie like this:
<?php
/* artwork.php */
header('Content-type: application/javascript');
echo "var myImages = [{'name':'First image','src':'image1.jpg'},{'name':'Next image','src':'image2.png'}];\n";
?>
//... any other JS functions here ...
And gallery1.php:
<html>
<head>
<script type="text/javascript" src="artwork.php"> </script>
</head>
<body>
...
</body>
hmm i am not actually getting what u are trying to say but i think this might help
save your php page lets say "artwork.php"
then use the jquery Load to call the page and hide the div where you have loaded the page.
$("#any_div_u_want").load('artwork.php',function(){
$(this).hide();
});
now u can show the div which contains your php script wheneveer u ant with just
$("#any_div_u_want").show();
Hope this helps
I'm looking to make a webpage that will show a random web site (within the current web page) and only show it for 15 seconds then show another page, etc. I would like the web page to get the list of web sites to show from a MySQL database.
I'm not sure if this is possible to do in PHP because I know you can use iframes in Javascript, but if it's possible I'd like to do it in PHP. If anyone could point me in the right direction or write a little bit of code it would be greatly appreciated.
Add this to your HTML head:
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
Then, you can serve that page with a different iframe every time.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Random website</title>
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
</head>
<body>
<iframe src="<?php echo $website_pulled_from_database; ?>"></iframe>
</body>
</html>
You can use the sleep function in PHP instead of using jS if u are so adament on using pure PHP. But I see no point in doing that.
http://php.net/manual/en/function.sleep.php
You should also look into ajax in PHP.
You can use header() in PHP
header('refresh:15;url=http://www.google.com/');
The code above will redirect the user to Google after 15 seconds
Well, I dont think u need to do this in pure PHP. You can retrieve the contents from the DB and display them at whatever time you want using javascript. You can use the setInterval function for javascript(jQuery).
for. eg:
<script type="text/javascript">
$(function(){
var i=0;
$('li').not(':first').hide();//Hide everything other than the first li item
setInterval(function(){
$('li').eq(i).hide();//Hide the current li item
i++;
if($('li').eq(i).text().length==0) //check if it is the last li item
{
i=0;
}
$('li').eq(i).fadeIn(1000); //FadeIn the next li item
},3000);
});
</script>
Hope this was of some help for you.
I have a small problem, I would like a div to be displayed when someone hovers over an image, the problem is that this image is inside php, and there for document.getElementById doesn't work. Is there a way to get round this?
<?php echo "<img onmouseover='xxxxxx' src='img/img.png'>" ?>
what goes in x?
You need to create a javascript function on the webpage where this particular line of code is echoed to the client that will handle the onmouseover event, like this:
<html>
<head>
<script language="javascript" type="text/javascript">
function imageSwap() {
var img = document.getElementById("img1");
//swap out the image...
}
</script>
</head>
<body>
<?php echo "<img id='img1' onmouseover='imageSwap()' src='img/img.png'>" ?>
</body>
</html>
I have a small problem, I would like a div to be displayed when someone hovers over an image
Make sure the information is accessible to people who don't use a pointing device too
the problem is that this image is inside php, and there for document.getElementById doesn't work.
You have misdiagnosed the problem. PHP runs on the server and its output is sent to the client. It cannot prevent something from working (although it can be written badly so it outputs something you don't expect).
If you think PHP is the cause of your problem then you need to stop asking "Why does the JS embedded in this PHP not work?" and start asking "Why is the JS that is outputted from PHP different from the JS I'm trying to write?"
what goes in x?
It is hard to say without seeing the rest of the code.
It depends on why you can't see the div in the first place. Is it invisible? Is it not displayed? Is it not part of the document? Is it covered up by something else? etc. etc.
As a rule of thumb though, you should avoid intrinsic event attributes in favour of assigning event handlers via JavaScript stored in external files. This is part of unobtrusive JavaScript.
You could change the code of Brian Driscoll to make it dynamic like so:
<html>
<head>
<script language="javascript" type="text/javascript">
function imageSwap(el) {
var img = el.id;
//swap out the image...
}
</script>
</head>
<body>
<?php echo "<img id='img1' onmouseover='imageSwap(this)' src='img/img.png'>" ?>
</body>
</html>
This way you will always have the correct id from the image your are hovering on. No matter the amount of images
I'm building a small site, that needs to support 2 languages for the same page.
Each language has different buttons on the page, the buttons are basically some images with text inside.
The positioning of the buttons is done using a CSS file, one for every language.
Question is how do I implement the changing of button for every image. I could put a php if statement, and use some other src if lang == English or something else if lang == Russian, Or could implement this with the css file (I could do this with a div and set it's background in the CSS)? What would you recommend?
Cheers.
You could create three CSS files:
One for english buttons
One for russian buttons
One for the rest
This would basically work this way: You create your buttons with a fallback name, for example
<button id="button_ok">OK</button>
and define different background images in your english/russian CSS files:
(english.css)
#button_ok {
background-image: url(images/buttons/eng/ok.gif);
}
and (russian.css)
#button_ok {
background-image: url(images/buttons/rus/ok.gif);
}
All other elements that do not change when the language is chosen come in the third file:
p {
font-size: 1em; /* whatever*/
}
The last step is to choose at the top of every page which file you want to load:
if ($_GET['lang'] == 'eng')
$cssFile = 'english.css';
elseif ($_GET['lang'] == 'rus')
$cssFile = 'russian.css';
and include the special and the general css file in your head:
<link rel="stylesheet" type="text/css" href="general.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $cssFile; ?>" />
I would recommend using CSS by setting the background and size of the button.
use < button> tag, its better because you can use css like "button{}" without having to put a class on it. Just a remind that < button> has a type like the input and it is "submit" as default if I remember correctly.
Btw, always try to depend on CSS instead of PHP, because on a next manutenance you will be glad that you did it.
or, if you going to use PHP, try using a function instead of hardcoding, even if it is just for one button, we never know if we will use it later.
hope it helped,
Joe