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?
Related
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
I'm trying to make a google apps script link up with an HTML document and it is INFURIATING.
My code works fine when I test it using the 'test web app for your latest code' but when I deploy it as a web app, all I get is an error message that says "script function does not found"
//this is my javascript
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('Index.html');
}
<!-- aaand this is a crude effigy of my index.html fie for demonstration purposes -->
<!DOCTYPEhtml>
<html>
<head>
<h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1> <p>Some ugly, crude HTML for demonstration purposes</p>
<body> <button> A pointless button, just because.</button></body>
</head>
</html>
Ok I'll admit the above "accepted" answer is correct (Edit: that is no longer the accepted answer), but........
If you are going to want to incorporate your own CSS file into your html (why would you not?) then your going to need to format it like this:
your original .gs file (.gs) with doGet()
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
your original html file (.html) (I named all of mine "index")
<!DOCTYPE html>
<html>
<head>
<title>Elliots Site</title>
<base target="_top">
<?!= include('css'); ?>
<script>
</script>
</head>
<body>
<div class="to2">
</div>
<div class="top">
<div class="title">
<h1 class="tital">Elliot's site</h1>
</div>
<img class="pic1" src="https://docs.google.com/drawings/d/e/2PACX-1vSH6kVTlN1hP891dSK44zmRK6gi7b3iGzt7CnO4P37a8zABg-NADND5q2_hgezsIQEFYqgcz_JVUWk7/pub?w=327&h=187">
</div>
<div class= space>
<ul class="nav">
<base href=" https://script.google.com/a/pelhamcityschools.org/macros/s/AKfycbwk_bEKfLI4sxCfeFoSWbRV7H4NhYWxr5oTPSGZFs9j/dev" target="_blank">
<li>google</li>
</ul>
</div>
<div class= "part2">
<img class= "pic" src="https://docs.google.com/drawings/d/e/2PACX-1vTd3j0_lBWS8u0HHFB7Eg0XzOkVdrdZco57nkewuzaTcDzpPkpoDevTzo0FFJEvgctAPhSxUtxvwgCj/pub?w=510&h=360"style="float:left">
<h2 class= "text">Hi I'm Elliot, and I'm a cool guy. I made this website on my own, and its good. I am happy about it and am excited to show it to dad.</h2>
</div>
<div class= "part3">
<div class="blank">
<h4>©2020 Elliot Massey</h4>
</div>
<div class="space2">
</div>
</div>
<?!= include('javascript'); ?>
</body>
</html>
Your CSS file (.html) (Please notice the scriptlet that calls on this{The scriptlet is the <?!= include('css'); ?>})
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
title {
display: none;
}
.to2 {
background-color:#00FFFF;
background-size: cover;
height: 130px;
background-attachment: fixed;
}
.top .title .tital {
font-family: 'Piazzolla', serif;
text.getTextStyle(.setLinkUrl("https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght#1,500&display=swap"));
}
.top .title {
background-position: center, center;
background-color:yellow;
background-size: auto;
height: fillparent;
text-align: center;
background-attachment: scroll;
}
.top .pic1 {
display: block;
margin-left: auto;
margin-right: auto;
background-attachment: fixed;
vertical-align: middle;
}
.top {
background-color:#00FFFF;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.space .nav li {
background-color: yellow;
background-size: cover;
height: 100px;
background-attachment: fixed;
display: inline-block;
padding: 20px;
}
.space .nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.space {
background-color: white;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
.part2 .pic .text {
font-family: 'Roboto', sans-serif;
font-weight: 100;
background-attachment: fixed;
float: right;
vertical-align: top;
}
.part2 .pic {
float: left;
background-attachment: fixed;
vertical-align: top;
}
.part2 {
background-color:white;
background-size: cover;
height: 600px;
background-attachment: fixed;
align-items : top;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.part3 .blank h4 {
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap');
background-color: black;
color: white;
text-align: center;
}
.part3 .blank {
align-items : center;
background-color:black;
background-size: cover;
height: 100px;
text-align: center;
}
.part3 .space2 {
background-color:black;
background-size: auto;
height: 50px;
}
</style>
and last but not least a java script function (.html)
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
One last thing, if your screeching about including the CSS () in the original html, don't. One, this a lot less jumbled so you can A. Impress your boss or whoever by making your code appear shorter, B. You can read it easier. Two you can make multiple and quickly switch out the name in the scriptlet. Three, you can debug them separate.
Also feel free to copy and paste this into google app scripts to see the code with their highlights and the end result (I know it looks like crap I only spent ten minutes on it)
This is what you want to paste into scripts if you want your own code (think of it as a layout) in the previous order
function doGet() {
return HtmlService.createTemplateFromFile(YOUR_HTML_HERE)
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
<script>
</script>
</head>
<body>
<?!= include('javascript'); ?>
</body>
</html>
*the below CSS formatting is not necessary,just recommended
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
That's about it... uhhhh...Good Bye
I used this code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1>
<p>Some ugly, crude HTML for demonstration purposes</p>
<button> A pointless button, just because.</button>
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('ah3');
}
function showDialoge() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}
Make sure you pick the new selection when you deploy as webapp.
When I created a page using Visual Studio Code, the font was looked good.
When I started to use Visual Studio (Whether it was through debugging or running in azure), part of the text became distorted.
The difference between text that looks good and text that doesn't look good (distorted) is that the text that doesn't look good is text I manually wrote on the page - inside the HTML file.
The text that does looks good, is loaded from an XML file and using the document.InnerHTML.GetElementById.. command.
Someone has an idia?
I've tried to change the position of the google link - no change..
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Assistant|Heebo&display=swap">
body {
background: #fdfdfe;
box-sizing: border-box;
font-family: 'Assistant', sans-serif;
color: #51565d;
line-height: 1.8;
height: 100%;
text-align: right;
direction: rtl;
overflow-y:scroll;
font-size: 16px;
}
You can use this code
<link href="https://fonts.googleapis.com/css?family=Assistant&display=swap" rel="stylesheet">
<style type="text/css">
body {
background: #fdfdfe;
box-sizing: border-box;
font-family: 'Assistant', sans-serif;
color: #51565d;
line-height: 1.8;
height: 100%;
text-align: right;
direction: rtl;
overflow-y:scroll;
font-size: 16px;
}
</style>
<div class="">lorem ipsum dolor sit amet</div>
I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>
Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.
Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
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.