I have the following html source loaded in a UIWebView
I want to extract
text1
text2 text2
text3 text3 text3
<!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>
<title>1322170516271</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=1, minimum-scale=1.0, maximum-scale=4.0">
<style type="text/css">
body
{
padding: 5px;
margin: 0px;
font-family: Helvetica, Arial;
font-size: 12pt;
background-color: #efefef;
background-image: url(ArticleBackground.jpg);
background-position: cover;
color: #000000;
}
h1
{
text-align: center;
border-bottom: 1px dotted #805050;
font-size: 28px;
line-height: 38px;
margin-bottom: 30px;
text-shadow: 0 2px 1px white;
color: #803030;
}
</style>
</head>
<body>
<script type="text/javascript">
function printMe()
{
print();
}
</script>
<div style='align:center; padding: 20px;'>
<div>
<b>text1</b><br><br>
<h2>
text2 text2
</h2>
<br>
text3 text3 text3
</div>
</div>
</body>
</html>
but here is what I get when I use
[webView stringByEvaluatingJavaScriptFromString:#"document.documentElement.textContent"]
I don't need the body and h1. I only want the actual text that is user facing.
234534546
body
{
padding: 5px;
margin: 0px;
font-family: Helvetica, Arial;
font-size: 12pt;
background-color: #efefef;
background-image: url(ArticleBackground.jpg);
background-position: cover;
color: #000000;
}
h1
{
text-align: center;
border-bottom: 1px dotted #805050;
font-size: 28px;
line-height: 38px;
margin-bottom: 30px;
text-shadow: 0 2px 1px white;
color: #803030;
}
function printMe()
{
print();
}
text1
text2 text2
text3 text3 text3
Thanks for any insight.
UPDATE
[webView stringByEvaluatingJavaScriptFromString:#"document.body.innerHTML"] won't work either for my goal
<script type="text/javascript">
function printMe()
{
print();
}
</script>
<div style="align:center; padding: 20px;">
<div>
<b>text1</b><br><br>
<h2>
text2 text2
</h2>
<br>
text3 text3 text3
</div>
</div>
update: this is needed for an existing project. If I had the chance to redesign it, a solution would be easy to find. But given this HTML source as it is, it might make it a bit difficult.
Try using :
document.body.innerHTML
Or take a look at parsing HTML: parsing HTML on the iPhone
There are many other links on SO.
why dont you put all your text into different tags such as div,p,etc . give id's to each of them and then get the text within them by the syntax
var text1 = document.getElementById("your ID").innerHTML
hope this works with your problem.
Related
Unable to render borders properly in xhtml2pdf. It is applying to individual elements.
Here is invoice template for rendering:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SRS Mess | Invoice</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
body{
font-family: 'Poppins', sans-serif;
user-select: none;
}
/* Keeping paragraph together */
p{
margin: 0;
-pdf-keep-with-next: true;
}
*,
::after,
::before {
box-sizing: border-box;
}
#media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
.container{
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: 7.5rem;
padding-left: 7.5rem;
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.text-danger {
color: rgba(220, 53, 69, 1) !important;
}
</style>
</head>
<body>
<div class="container mt-2 mb-2" style="background: rgb(237, 237, 255); border-top: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-radius: 1rem;">
<div class="text-center mt-3">
<img src="{{ST_ROOT}}/logo.png" alt="" height="200" width="200">
<p class="mt-2" style="font-size: 1.5rem; color: orange;">SRS Mess</p>
<br>
<p style="font-family: 'Merriweather', serif; font-size: 2rem; text-decoration: underline;">INVOICE</p>
<p style="font-size: 1.5rem; font-weight:bold; color: green;">Monthly Mess subscription of Rs. {{amount}} /- </p>
</div>
<br>
<div class="details">
<p><strong>Name: </strong>{{name}}</p>
<p><strong>Email: </strong>{{email}}</p>
<p><strong>Mobile: </strong>{{mobile}}</p>
<p><strong>Hostel: </strong>{{hostel}} {{room}}</p>
<p><strong>Branch: </strong>{{branch}}</p>
<p><strong>Date: </strong>{{date}}</p>
<p><strong>Time: </strong>{{time}}</p>
</div>
<br>
<div class="subscriptions text-center" style="border: 2px solid green; background-color: #e9ffe9;">
<p class="text-danger" style="font-size: 1.5rem;">Mess Subscription</p>
<p><strong>Start date: </strong>{{start_date}}</p>
<p><strong>End date: </strong>{{end_date}}</p>
</div>
<br>
<div class="footer">
<p>Thank you for taking the monthly mess subscription! <br> We hope that you will enjoy our meal!</p>
<p>If you have any issues, please contact us here</p>
</div>
</div>
</body>
</html>
This is the render_to_pdf function:
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result, link_callback=fetch_resources)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
Downloading the pdf by:
pdf = render_to_pdf('invoice.html', usr_data)
return HttpResponse(pdf, content_type="application/pdf")
When we render the pdf it looks like this:
Rendered PDF
But by HTML template it should be:
invoice.html
So I want to render the HTML template as it is. You can see that the borders are been applied to all the individual elements in the tag. It should not happen. So please let me know the solution for this.
Thanks in advance !!
This question already has answers here:
Can I have a <pre> Tag inside a <p> tag in Tumblr?
(3 answers)
Closed last year.
Currently I have a "quiz section" for my webpage. At the bottom of the information on the lesson there is a quiz.
Currently I have been able to show/hide standard text. But I want to know show a code block when I click "Show solution".
I have tried changing class names, but I can't seem to get it right.
function show_hide(element)
{
var myAnswer = element.nextElementSibling;
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}
.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}
<head>
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS#latest/prism.min.js"></script>
</head>
<body>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</p>
</body>
You have multiple error in this code:
id must be unique use class instead.
use <div> for contain <pre> instead of <p>
function show_hide(element) {
const myAnswer = element.nextElementSibling;
const displaySetting = myAnswer.style.display;
if (displaySetting === "inline-block") {
myAnswer.style.display = 'none';
element.innerHTML = 'Show Solution';
} else {
myAnswer.style.display = 'inline-block';
element.innerHTML = 'Hide Solution';
}
}
.quiz-question {
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button {
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover {
color: #fff;
background: #f44336;
transition: 0.5s;
}
.answer {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS#latest/prism.min.js"></script>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p class="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value.
</p>
<br><br>
<hr>
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<div class='answer'>
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</div>
You can use prettify library
function show_hide(element)
{
var myAnswer = element.nextElementSibling
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}
.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}
code
{
padding: 2px 4px;
color: #000000;
background-color: #eeeeee;
border-radius: 3px;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha512-PW9BfYtoXV6XYb/4FTkBoJEBM92TrGk7N324cCmF5i2dY02YvBg6ZPEAnSOZ5i2/nGPbsYFQwVzDxVVoWEKWww==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha512-/9uQgrROuVyGVQMh4f61rF2MTLjDVN+tFGn20kq66J+kTZu/q83X8oJ6i4I9MCl3psbB5ByQfIwtZcHDHc2ngQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head>
<body onload="prettyPrint()">
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<code class="language-cpp prettyprint line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</p>
</body>
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
This is my current HTML code (details changed for privacy):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
p {
display: table-cell;
}
img {
height: 204px;
float: left;
}
div.content-magazine {
display: table;
}
div.content-usedcar {
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 15px;
background-color: #FFFFFF;
padding: 10px;
}
</style>
<title>Anytown Car Sales | No.1 in West Yorkshire since 1982</title>
</head>
<body>
<H1>Anytown Car Sales</H1>
<H2>Est.1982</H2>
<H3>Sutton-in-Craven, West Yorkshire BD20</H3>
<H3>Tel: 01535 000000</H3>
<div class="content-magazine">
<div class="content-usedcar">
<img src="http://media.autoweek.nl/m/4cfy7lsbkrs1.jpg">
<P>2018 68 VAUXHALL INSIGNIA 1.5 TURBO 165 ELITE NAV, 5 door, blue, 15,000 miles £POA</P>
</div>
</body>
</html>
What I have been trying to do is to make a DIV that looks similar to the list at https://www.britanniacarsales.co.uk/used-cars with the picture next to the vehicle and space in between divs (color of my website's body will be changed in the code) but I am not quite sure how to get it to look similar if not the same.
What changes should I make to the code so that div class content-usedcar looks like the style in the link I've used as inspiration from? (I'm trying to make this original work, not copying others' CSS).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
p {
vertical-align: top;
margin: 0 0 0 10px;
}
img {
vertical-align: top;
height: 204px;
}
div.content-usedcar {
display: flex;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 15px;
background-color: #FFFFFF;
padding: 10px;
}
</style>
<title>Anytown Car Sales | No.1 in West Yorkshire since 1982</title>
</head>
<body>
<H1>Anytown Car Sales</H1>
<H2>Est.1982</H2>
<H3>Sutton-in-Craven, West Yorkshire BD20</H3>
<H3>Tel: 01535 000000</H3>
<div class="content-magazine">
<div class="content-usedcar">
<img src="http://media.autoweek.nl/m/4cfy7lsbkrs1.jpg">
<P>2018 68 VAUXHALL INSIGNIA 1.5 TURBO 165 ELITE NAV, 5 door, blue, 15,000 miles £POA</P>
</div>
</div>
</body>
</html>
how about this?
Here's a quick background on what I'm trying to do. I have a contact form on my website, and when the user clicks on 'Submit', I want it to do this:
User clicks submit
Confirmation box opens, asking user to agree or disagree to the
disclaimer
if agrees = submit form
if disagrees = close confirmation box
Here is what I want to know. I don't necessarily want to style the actual alert box, since I know that is not possible, what I want to do is style the text inside the alert box; the "disclaimer". I tried just adding header tags and bold tags to it, but those just generate the text and not the actual styles.
Here's the code I'm using, its just a very simple alert box script.. if you have a better idea, please let me know.
<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
{
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}
else
{
}
}
//-->
HTML:
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
Also, another issue i'm having with this is that instead of it just closing the dialog box, it still continues the script.
You cannot style alert or confirm box. You have to use DHTML box.
Using Impromptu
Try this, I used jQuery Impromptu plugin http://trentrichardson.com/Impromptu/
Demo: http://jsfiddle.net/muthkum/4h8cX/6/
For full code, check out page source on http://fiddle.jshell.net/muthkum/4h8cX/6/show/
Using smoke.js
Demo: http://jsfiddle.net/muthkum/8qXsv/3/
UPDATE:
Here is the full code using jQuery Impromptu
You can see, I've included jquery-1.8.2.js and jquery-impromptu.4.0.min.js. Also styles are included in the below codes. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by muthkum</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>
<style type='text/css'>
/*
------------------------------
Impromptu
------------------------------
*/
.jqifade{
position: absolute;
background-color: #777777;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}
</style>
<script type='text/javascript'>//<![CDATA[
function go_there(){
$.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
buttons: { Ok: true, Cancel: false},
callback: function(e,v,m,f){
if(v){
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}else{
}
}
});
}
//]]>
</script>
</head>
<body>
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
</body>
</html>