How to remove URL displayed while printing a web page in PHP? - php

I want to remove URL from page at printing time with PHP is there any way to do this? Actually I don't want to push my clients to change their browser's settings at printing time.
Any help really appreciated!

That is a browser setting, unfortunately you can't change it and it sucks.
Only workaround that I can think of is that you serve PDF file which could be displayed inline if user has PDF plugins installed. In that case you have full control of content and user can print it.

No. As per my knowledge.
The web-page url that gets displayed while printing a web page is a feature added by a broswers, and hence it can't be done through php as it is completely server-side scripting.
Also, I guess this can't be done using javascript, as said before "This is a feature of browsers" and javascript can be used to manilulate the dom of the page only.

I guess you cant do such thing.
You cant change in browser defaults like printer settings, margins, or any other browser setting, temporarily or permanently, from CSS or JavaScript.
There is a #page directive in css that enables some formatting that applies only to paged media (like paper). Refer link. But problem is this does not work in Firefox, Google Chrome, but it works in IE 8 and Opera 10.

Programmatically, you can't control this and it does suck. There are options that control this are part of the specific browser. Therefore, each user would have to change their browser settings to remove the URL from printing. Unfortunate, I know, but the browsers don't let you have that much control over them. One way to get around this is to generate a PDF document for printing. Any document that is downloaded and printed from the client machine rather than from within the browser will not have this problem.
Also, you may have a look at Prevent Firefox or Internet Explorer from Printing the URL on Every Page

Change Firefox setting
Go to file->page setup -> Margins Header & Footer and set --blank-- what you need.
See more here

Maybe you can try to use CSS properties like "#page", "#top-left", ...
For example:
#page {
#top-left {
content: "";
}
}
I found this example on W3C website : http://www.w3.org/TR/css3-page/

Related

Elements unintentionally resize on side refresh

I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps

Using PHP or JavaScript (client side) - How to inject a web element into a live webpage (for a demo..)?

Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.

Making screenshot of the website with changes made by user

Is it possible to take a screenshot of the visible part of the website directly as it is seen by user (rendered by by the browser), including any changes made by user (e.g. moved divs, text typed in forms etc.)?
So you open a website, where you can make changes to its content. And there's a button (on the website of course), when you click it, the actual visible part of the website with all the changes you made is saved as an image and for example there goes a popup window where you can type in an email to send this image to, or something like that. Javascript, php, html5 or anything else? Old browsers and ie doesn't matter.
I've searched a lot for the answer, read lots of related articles, but I couldn't find the solution, cause what I need is not the script that would re-render the page like html2canvas, but capture the actual content displayed on the screen.
Any ideas and comments are much appreciated!
This is something that can be extremely tricky.
Essentially your only option of doing this in browser with no extensions or such is to try rendering HTML into the <canvas> tag.
There are several projects which do that, most reliable choices are noted in this SO question's answers: Render HTML in Canvas/WebGL
Note that none of the projects are 100% accurate, but a canvas can be rendered into an image and thus could be saved or emailed by the user like you asked.

how to change url in browser url box?

I really wonder why facebook and google can change the url without reloading the page? they just change the block or content in their site.
I notice that when I am using facebook, when click on the "new feed" the url is "http://www.facebook.com/" and the page didn't reload, then i click on "messages" the url changed to "http://www.facebook.com/messages/" and the page still not reload just change the "content" block of the site.
So how do I change url without reloading the page?
edit: i got the answer.
there are 2 cases here:
browser support html5 (Firefox 3.6 + etc.): using html5 history. (example: www.facebook.com => www.facebook.com/messages )
browser dosn't support html5 (IE6, IE7, IE8 etc.): using hash tag (#) (example: www.facebook.com => www.facebook.com/#!/messages )
hope this help to who have doubt like me.
Have you looked into the history API for Javascript?
http://diveintohtml5.ep.io/history.html
EDIT: You could also use mod_rewrite with apache and then, but that would cause a refresh.
Or there is this JQuery Plugin
http://www.asual.com/jquery/address/
The URL usually changes to http://facebook/#!messages, so the change of the "fragment" URL part doesn't make the browser reload the page. Instead, there is some JavaScript library that watches fragment changes and make appropriate requests in order to reload the page content.
The usage of #! is almost becoming a "standard" for doing these things, I've seen this used elsewhere (eg. on Twitter). I don't remember if they all use the same library or just the naming convention, but you should be able to dig about it on the fb/twitter developers pages.
You could look into the Content-Location HTTP header for this purpose. See here for more info.
I code on JSBin.com, mainly use CSS and HTML (Abandoned Javascript loooong time ago) and have a question. For example a page's URL is http://www.codingrules.com/
Well, using HTML, How can I change that URL to for example
http://www.ilovecoding.com

My site doesn't show up on google chrome

I have my site and it looks great on FF, SF, IE8 but on google chrome it shows a blank page, but if you click on view source, it is there !!
on js console I got "Failed to load resource".
Also I have the same site on my localhost and it works great on chrome !!
My site: http://grupooak.com
take a look on chrome and if you know how to fix it , or a tool to debug it and find the issue lmk :)
Thanks !!
btw the site was developed on php (akelos framework)
Sometimes, if you try several times you can get the page, but it gets stock if you click on any link
You need to make sure the DOM is valid, as your html seems messy I would advise you to fix the following errors:
http://validator.w3.org/check?uri=http://grupooak.com/app/%3Fak%3D/account/sign_in/&charset=(detect+automatically)&doctype=Inline&group=0
Just a thought but try loading the page without any javascript files, and if the page loads, add one back in a t a time testing if it still loads, when you add the javascript back in and the page fails to load, let us know what that file is.
Its could be one of the following:
Your server is failing to respond to the call, unlikely
there is a memory leak in the javascript files, causing the brows to focus on the file which does not continue to load the file.
Reasons for this is if you go to the url: view-source:http://grupooak.com/app/?ak=/account/sign_in/ in Google Chrome, you will see the whole response, meaning that it is something that is loaded into the browser that's the issue.
If you inspect the element of the page you will see that it stops loading loading the page after the first javascript include, try UPDATING Your Libraries versions.
Have you tried disabling caching and/or output encoding?
Something similar happened to me before, and it was related to the Mime type.
If that's the case, take a look at this article: http://www.dyeager.org/post/2009/01/php-xhtml-mime-type-caching
maybe fix this tag.
<img style="width: 95px; height: 113px;" src="/app/images/homepage10.jpg"
also look at the developer tools in chrome they will point you to this error
/app/?ak=/account/sign_in/ Failed to load resource
info about developer tools
http://code.google.com/chrome/devtools/docs/overview.html
First of all you should have a look at the W3C's HTML validator output, correct all of the errors, and try again. I guess that it will solve your issues with Chrome.
When I inspect the computed styles in chrome, the html element's height is 0. This might explain why the page is blank.
It's your rotator script. The first argument must be a beforeLoad event object.

Categories