Can someone tell me how to stop IE8 printing the value of the href for an A tag next to the text. For example this markup
Some Link
When printed comes out as
Some Link(/site/page.html)
when printed. How can I stop this?
This doesn't happen for me in IE8 and I've never spotted it. I also can't find it in the Internet Options anywhere.
It is possible that you have some software on your computer that does this, for example AVG Anti-Virus adds content to web pages to tell you that it has checked the links being displayed for potentially harmful content - so your system-security software may be expanding all links to show you where they actually point, to prevent phishing attacks.
If you do have some anti-phishing software on your machine, you'll have to find the option within that.
Update - It is almost certainly some clever CSS.
I have created the following test page to demonstrate how you can add the URL to a link using CSS generated content. If this was used within a print stylesheet, this would explain how the URL is getting added to the link when you are printing the page. To stop this, you would have to save a copy of the web page, remove the style rule from the print-only style sheet and then open your copy and print it!
<html>
<head>
<title>Test</title>
<style type="text/css">
a:after {
content: " [" attr(href) "] ";
}
</style>
</head>
<body>
<h1>Test</h1>
<p>This is a test to see if this
Link Shows A URL</p>
</body>
</html>
Related
The html looks like this:
<html>
<head>
<style type="text/css">
h1:before
{
content: '\292d';
}
</style>
</head>
<body>
<h1>Sample Text</h1>
</body>
</html>
So, I've already converted the '⤭' character to ASCII which shows fine in my desktop's browser; however, on iPhone, it's blank!
The problem could be with content: '\292d'; even though they say content is supported with safari 1.0 and up it still does not work properly.
i used it for displaying images and it used to show up in inspect element but not in browser window, the entity '\292d' is infact supported
instead Try putting it directly inside the tag, or use javascipt if you want it to be dynamically inserted
in stackoverflow editor have button call "Code Sample"
which any code write this block in present time show color code
like
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
i know this is java script code because when page load, normal text code changed to color text code
but:
what is name of this tool
how can i add this tool to my blog or website
I have a very simple HTML two page demo that ilustrates a very confusing behavior in jQuery Mobile 1.1.0. (The real app is much more complicated but I've been able to "massively" simplify the problem.)
Page 1 consists of a single href to jump to Page 2. If Page 1 does NOT include jQuery Mobile 1.1.0 we can click on the link and Page 2 is displayed with no errors. However, if Page 1 includes jQuery Mobile 1.1.0, a click on the link in Page 1 results in a Page that is a combination of the HTML in Page 1 and Page 2! That is, Page 1 is retained and Page 2 is "merged" into it. I have tried this with both the regular and the minified versions with the same result. The two pages are as simple as an HTML page can get so it should be very easy to reproduce this with the samples below. This is running with Tomcat 5.5 (and if it matters, being managed and laumched out of Eclipse). The two HTML files and the two jQuery Mobile files are all placed in a folder at the server's document root. (The browser output below is from running through Tomcat, but I just tried this by launching the browser directly off of the Page1.html file - no server involved at all - and the problem persists, so this can be reproduced without a server being involved.)
The following shows the file contents for Page1 and Page 2, along with the HTML that is seen in the desktop Firefox browser (in Firebug).
* PAGE 1 SOURCE HTML:
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
Click for Page 2
</body>
</html>
RESULTING PAGE 1 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
PAGE 2 SOURCE HTML:
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
RESULTING PAGE 2 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
Note that, with jQuery Mobile included in Page 1:
"Page 2", which had no content, contains the content of Page 1.
"Page 2" contains the href and the "loading" elements from Page 1.
"Page 2" finally includes the simple text from the in the Page 2 HTML file.
The page that results from clicking the link in Page 1 appears to be Page 1 with Page 2's appended. Drop jQuery Mobile from Page 1 and the problem is gone. It is purely a guess, but jQuery Mobile displays a "loading" message while the next page is being fetched and it appears that the act of doing this somehow prevents the browser from "disposing" of Page 1 and it instead merges the incoming Page 2 with the prior Page 1.
Can anyone explain what is happening here?
Thanks.
Using rel="external" along with the href in Page 1 fixes this problem.
This may be out dated but I just ran in to something similar. It looks like the reason is because jQuery Mobile will fetch the page, load it into the DOM, then transition between the pages like a slide. I'm assuming your viewable area was enough to hold the pages in such a way that it didn't even try to slide between the pages.
Our situation was that we had some pages with jQuery Mobile explicitly loaded and some without, and the ones with out were somehow getting the Mobile library's functions.
jQM loads itself and other pages into memory so that it can reduce the number of network requests and also to be able to transition nicely between pages. You can also tell it to preload images and pages in the background after you load your first page.
It's a slightly different beast than just regular html pages. Just try and think about optimizing the site for as few network requests as possible.
http://jquerymobile.com/demos/1.0b2/docs/pages/page-cache.html#/demos/1.0b2/docs/pages/page-anatomy.html
I decided to use jQuery UI for my autocomplete opposed to a plugin because I read that the plugins are deprecated. My overall goal is to have an autocomplete search bar that hits my database and returns users suggestions of city/state or zipcodes in a fashion similar to google. As of now I am not even sure that the .autocomplete function is being called. I scratched everything I had and decided to start with the basics. I downloaded the most recent version of jQuery UI from http://jqueryui.com/download and am trying to get the example that they use here http://jqueryui.com/demos/autocomplete/ to work. All the scripts that I have included seem to be connected at least linked through Dreamworks so I am fairly certain that the paths I have included are correct. The CSS and Javascripts that I have included are unaltered straight from the download. Below is my HTML code and my backend PHP code that is returning JSon formated data. Please help me. Maybe I need to include a function that deals with the JSon returned data but I am trying to follow the example although I see that they used a local array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryUI Demo</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" />
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#tags").autocomplete({
source: "search_me.php"
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
</html>
Below the PHP part.
<?php
include 'fh.inc.db.php';
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or
die ('Unable to connect. Check your connection parameters.');
mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db));
$location = htmlspecialchars(trim($_GET['term'])); //gets the location of the search
$return_arr = array();
if(is_numeric($location)) {
$query = "SELECT
zipcode_id
FROM
user_zipcode
WHERE
zipcode_id REGEXP '^$location'
ORDER BY zipcode_id DESC LIMIT 10";
$result = mysql_query($query, $db) or die(mysql_error($db));
while($row = mysql_fetch_assoc($result)) {
extract($row);
$row_array['zipcode_id'] = $zipcode_id;
array_push($return_arr, $row_array);
}
}
mysql_close($db);
echo json_encode($return_arr);
?>
Thanks for the ideas. Here is an update.
I checked the xhr using firebug and made sure that it is responding thanks for that tip. also the above php code I hadn't initialized $return_arr so i took care of that. Also thanks for the clarification of the js required or rather not required. Now when I type in a zipcode a little box about a centimeter shows up underneath it but I can't see if anything is in there, I would guess not. I went to my php page and set it up to manually set the variable to "9408" and loaded the php page directly through my browser to see what it returned. This is what it returned.
[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]
I then went to a JSON code validator at this url http://jsonformatter.curiousconcept.com/ at it informed me that my code is in fact returning JSON formatted data. Anymore suggestions to help me troubleshoot the problem would be terrific.
Wow after more research I stumbled across the answer on someone another post.
jquery autocomplete not working with JSON data
Pretty much the JSON returned data must contain Label or Value or both. Switched the zipcode_id to value in my $row_array and... boom goes the dynamite!
Your scripts (js files) references are not correct, should only be:
<!-- the jquery library -->
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<!-- the full compressed and minified jquery UI library -->
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
The files "jquery.ui.core.js", "jquery.ui.widget.js" and "jquery.ui.position.js" are the separated development files, the jquery ui library is splitted into modules.
The file "jquery-ui-1.8.17.custom.min.js" contains them all, compressed and minified !
Concerning the data source, as stated in the "Overview" section of the Autocomplete documentation: when using a an URL, it must return json data, either of the form of:
an simple array of strings: ['string1', 'string2', ...]
or an array of objects with label (and a value - optionnal) property [{ label: "My Value 1", Value: "AA" }, ...]
I'm really not familiar with PHP so just make sure your php script returns one of those :-)
I have a web application that produce its reports in HTML format. Sometimes these reports become very much and the window shows scrollbars.
The problem I have is that I can just print what I see in the web page, and whenever I want to print them, I have not more than 1 page to print. So I lose other repots that I expect to be in other papers.
What do I have to do ?
The nature of the problem
Your problem is associated with styling.
It is hard to tell what exactly your problem is - we did not have a chance to see your stylesheets. For sure you should rewrite them to not crop the pages.
Apply different stylesheets to screen and print
One idea is to change current stylesheet to be applied only to screen media and apply different one specifically to printed media.
You can do it like that in HTML:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
or like that in CSS (example from W3C):
#import url("fancyfonts.css") screen;
#media print {
/* style sheet for print goes here */
}
Print-specific styling
For details on print-specific styles see the following page: http://www.w3.org/TR/CSS2/page.html
In your case the following styling may become useful:
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
It will allow for page breaks inside the table, will try to avoid page breaks inside rows, and will repeat both headers and footers of the table on each page. However, check whether it works in your target browsers, to be sure.
If you are using ASP.NET, use Crystal Reports.
If you are using Java EE, use JasperReports.
If you are using PHP, use FPDF (there may be something else too).
These tools are better for bulding reports rather than pure HTML.