<style >
em.quote{
text-align: center;
justify-content: center;
margin-top: 515px;
margin-left: 550px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
justify-content: center;
text-align: center;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}}
#main{
text-align: center;
border-style: solid;
background-color: #b48eaeff;
}
p.info{
font-family: sans-serif;
}
p.link{
text-align: center;
}
#image{
display: block;
margin: 0 auto;
max-width: 100%
}
</style>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width,initial-scale=1">
<html>
<head>
<div id="main">
<h1 id="title"> Dr.Norman Borlaug</h1>
</div>
<div id="img-div">
<div id="img-caption" alt=" A gallery of images of Norman Borlaug">
<div class="row" class=“img-responsive”>
<div class="column">
<img src="img/normanwithpeople.png" alt="Norman Borlaug having a conversion with colleuges">
<img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">
<img src="img/normanholdingnobelpize.png" alt=" Norman Borlaug holding the Nobel Peace Prize">
</div>
<div class="column">
<img src="img/normanatconference.png" alt="Norman Borlaug at a confrence">
<img src="img/normanwithjimmy.png" alt="Norman_Borlaug with former President Jimmy Carter">
<img src="img/normaninmexico.jpg" alt=" A painting of Norman Borlaug in a field in Mexico">
</div>
<div class="column">
<img src="img/norman.png" alt="Norman Borlaug and his wife">
<img src="img/normangetsaward.png" alt="Norman Borlaug receives an award from president George W Bush">
<img src="img/normanatscience.png" alt=" Norman Borlaug at a agricultural science and technology ">
</div>
</div>
<p class="important">
<em class="quote">Fathered a revolution that saved billons of lives</em>
</p>
</head>
<div id="tribute-info">
<p class="info">Norman Ernest Borlaug (March 25, 1914 – September 12, 2009) was an American agronomist who led initiatives worldwide that contributed to the extensive increases in agricultural production termed the Green Revolution. Borlaug was awarded multiple honors for his work, including the Nobel Peace Prize, the Presidential Medal of Freedom and the Congressional Gold Medal.
Borlaug received his B.S. in forestry in 1937 and Ph.D. in plant pathology and genetics from the University of Minnesota in 1942. He took up an agricultural research position with CIMMYT in Mexico, where he developed semi-dwarf, high-yield, disease-resistant wheat varieties. During the mid-20th century, Borlaug led the introduction of these high-yielding varieties combined with modern agricultural production techniques to Mexico, Pakistan, and India. As a result, Mexico became a net exporter of wheat by 1963. Between 1965 and 1970, wheat yields nearly doubled in Pakistan and India, greatly improving the food security in those nations.
Borlaug was often called "the father of the Green Revolution", and is credited with saving over a billion people worldwide from starvation. According to Jan Douglas, executive assistant to the president of the World Food Prize Foundation, the source of this number is Gregg Easterbrook's 1997 article "Forgotten Benefactor of Humanity." The article states that the "form of agriculture that Borlaug preaches may have prevented a billion deaths." He was awarded the Nobel Peace Prize in 1970 in recognition of his contributions to world peace through increasing food supply.</p></div>
</body>
<a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link"> <p class="link"> Learn More About Norman Borlaug<p>
</html>
This the code for the project but how do I display the images so anyone can see currently can see it since i have the images in a folder together but nobody else can I sent as an attached file to a friend it popped up for the most part but the images don't display on mobile or when i forward it to someone else / to the public as well.
Your images have a relative path--they need a full (absolute) path.
So change this: src="img/normanwithpeople.png"
To this: src="https://www.server.com/path/to/img/normanwithpeople.png"
Related
I use list.js, but it displays also similar results. For example I am typing Mar..., website displays also mur, car, man and etc. How can I disable them?
It is demo from codepen:
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="javve" data-slug-hash="isInl" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="List.js - Fuzzy search">
<span>See the Pen <a href="https://codepen.io/javve/pen/isInl/">
List.js - Fuzzy search</a> by Jonny Strömberg (#javve)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
You are using fuzzy-search, if you change <input type="text" class="fuzzy-search" /> to <input type="text" class="search" /> it works.
check it Codepen
I'm using Amazon AWS SES. This is how I send emails:
$request = array();
$request['Source'] = $row['emailfromname'] . " <{$verifyemail[0]}>";
$request['Destination']['ToAddresses'] = $to;
$request['Message']['Subject']['Data'] = $row['emailsubject'];
$request['Message']['Body']['Html']['Data'] = $row['emailbody'];
try {
$result = $client->sendEmail($request);
$messageId = $result->get('MessageId');
...
So it's pretty basic.
My problem is that some emails are sending as HTML. Here is an example of an offender:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><span style="font-family: Calibri, sans-serif; line-height: 11pt; font-size: 11pt; color: #333333;">Hi Name,</span></p>
<hr><span style="font-size:11pt;font-family:'Calibri',sans-serif"><b>From:</b> sender#sender.com.au<br><b>Sent:</b> Thursday, 9 March 2017 10:51 AM<br><b>To:</b> receiver#receiver.com.au<br><b>Subject:</b> Enquiry for ID: 98419081886, 123 Fake Street,
Docklands, Vic 3008, Listing Agent Leasing Consultant</span><br><br><div id="message" style="width: 600px; margin: 0 auto;">
<h1 class="header">
<img src="http://www.test.com/logo.png" style="border: 0; width: 258px;"><div class="header-separator" style="height: 4px; background-color: #e4002b; width: 100%; margin-top: 17px;"></div>
</h1>
<p style="margin: 0;">You have received a new enquiry for</p>
<br><p style="margin: 0;"> id: 98419081886</p>
<div class="footer" style="margin-top: 1em; padding: 5px; background: #999999; color: #fff;">
Message sent from www.test.com.au </div>
</div></body></html>
It sends in plain text as HTML code with the weird header info. This is my Outlook 2010 email received:
Docklands, Vic 3008, Listing Agent Leasing Consultant
MIME-Version: 1.0
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><span style="font-family: Calibri, sans-serif; line-height: 11pt; font-size: 11pt; color: #333333;">Hi Name,</span></p> <hr><span style="font-size:11pt;font-family:'Calibri',sans-serif"><b>From:</b> sender#sender.com.au<br><b>Sent:</b> Thursday, 9 March 2017 10:51 AM<br><b>To:</b> receiver#receiver.com.au<br><b>Subject:</b> Enquiry for ID: 98419081886, 123 Fake Street, Docklands, Vic 3008, Listing Agent Leasing Consultant</span><br><br><div id="message" style="width: 600px; margin: 0 auto;">
<h1 class="header">
<img src="http://www.test.com/logo.png" style="border: 0; width: 258px;"><div class="header-separator" style="height: 4px; background-color: #e4002b; width: 100%; margin-top: 17px;"></div>
</h1>
<p style="margin: 0;">You have received a new enquiry for</p>
<br><p style="margin: 0;"> id: 98419081886</p>
<div class="footer" style="margin-top: 1em; padding: 5px; background: #999999; color: #fff;">
Message sent from www.test.com.au </div>
</div></body></html>
The thing that's really confused me, however, is that other very similar emails send with no issues at all!
I'm guessing there's a clue in that the first line of the output reads Docklands, VIC 3008 ... But even if I remove that line-break, the space and the comma (so it reads 123 Fake StreetDocklands), the output stills starts with Docklands... including the space at the beginning!
Feeling sheepish and annoyed... After leading myself on a wild goose chase, I found my problem. It's so trivial that I was going to delete this question, but I won't in the hope it helps other SES users.
My subject had a line-break in it!
I'm not sure how or why Amazon lets this cause a problem for the email body, but it does.
I am doing a proof-of-concept to see if ZingCharts is a viable solution in our web application. I am trying to create a simple stacked bar chart. Everything works fine in my example until I add a title to my style tag, title="mystyle". I am using the title in the style tag as this models the situation in our full-blown application where we include a number of css files all titled with our custom page style.
Here is my example code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
.h1 {
margin: 0 0 1px 0;
padding: 5px 7px 7px 7px;
font-size: 11px;
font-weight: bold;
background-color: #ceceb5;
border-color:#ffffff #ffffff #998B74 #ffffff;
border-width:0px 0px 2px 0px;
border-style:solid solid ridge solid;
}
table.fullTable {
width: 100%;
}
td.jsChartSection {
text-align: center;
border: 1px solid #888888;
background-color: #EFEFEF;
padding: 10px 20px 10px;
}
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
"type": "bar",
"stacked":true,
"stack-type":"normal",
"backgroundColor":"#FFF0FF",
"hoverMode":"node",
"tooltip": {
"htmlMode":false
},
"legend":{
"align":"center",
"vertical-align":"bottom"
},
"plotarea": {
"width": '100%',
"height": '100%',
"margin": '20 20 50 70'
},
"scale-x":{
"values":["2009","2010","2011","2012","2013", "2014"],
"items-overlap":true,
"item":{
"font-angle":-45,
"auto-align":true
}
},
"scale-y":{
"label":{
"text":"# of Widgets"
},
"values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
},
"series": [
{ "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
{ "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
<div class="h1">Chart Management with Zingcharts</div>
<div class="h1">Another div element</div>
<div class="h1">And another div element</div>
<div class="h1">And yet another div element</div>
<div class="databox">
<table cellspacing="5" class="fullTable">
<tr>
<td class="jsChartSection">
<div>
<div id='chartDiv'></div>
</div>
</td>
</tr>
</table>
<!-- databox -->
</div>
<!-- Content -->
</body>
</html>
When I do this in this example it causes an issue with the following img element that is generated by ZingChart...
<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
This element is placed in the top left-hand corner of my page, and the tooltips now behave strangely.
How can I get ZingChart to work correctly while still using my custom page style?
Thanks!
Place this in your <head> element:
<style title="zingchart"></style>
This will force ZingChart to inject its own styles into that element, preventing conflicts.
I'm on the ZingChart team, please let me know if you need anything else :)
Edit:
Apparently browsers implement the concept of "preferred" stylesheets, the idea being that if on one page you have:
<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">
...only the style from one CSS element will be used, the other will be ignored. The same happens with inline tags.
The problem is that ZingChart creates its own CSS rules dynamically, and injects a tag with title="zingchart". So, when in the HTML page there is another <style> or <link> with a different "title", one of them (most likely the ZingChart style) will be ignored.
We have removed the code which sets the "title" from our code, which will be available in our next public release. Meanwhile, you will need to remove the "title" attribute from your <style> element.
At the moment the used code centers a div with a width of 980px in a background div which contains an image with a link. This works fine on PC, Apple and Android. When the resolution is more than 980px, you see the background image equally on both sides. On Android phone or tablet you see 100% of the maincontainer div. But on iPhone and iPad, the maincontainer div aligns to the left and you see about 200px of the background div on the right side. I tried a lot of things, but I can't get it to act on iPhone and iPad like it does on Android devices: the maincontainer div 100% of the viewport.
My code is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
height:100%;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #FFF;
}
body {
width:100%;
height:100%;
font-family:Arial,Verdana,Helvetica;
font-size:12px;
font-weight:normal;
color:#020051;
line-height:14px;
text-align:center;
background-size: 100%;
background-attachment:fixed;
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#background_with_link{
position:absolute;
top:0px;
width:2400px;
left:50%;
display: block;
margin-left:-1200px;
text-align:center;
}
#main_container{
position:absolute;
top:0px;
width:980px;
left:50%;
margin-top:103px;
margin-left:-490px;
margin-bottom:50px;
margin-right:auto;
}
</style>
</head>
<body>
<div id="background_with_link">
<img src="/UserFiles/Banners/image.jpg" alt="" title="" border="0" />
<!-- Main Container start -->
<div id="main_container">
</div>
<!-- Main Container end-->
</div>
</body>
</html>
I hope there is a solution for this. Thanks!
Erwin
I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
Note that this is not an issue on the latest GA chrome builds.
<html>
<head>
<title>Select Testing</title>
<style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
<script type="text/javascript">
function leftBad() {
document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
<div id="moveBad" class="button" onclick="leftBad();"></div>
<div id="moveGood" class="button" onclick="leftGood()";></div>
<div id="panelContainer">
<div id="panels">
<table>
<tr>
<td>
<div id="page1" class="panel">
</div>
</td>
<td>
<div id="page2" class="panel">
<select>
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Safari tries to be helpful when there's a select box partially out of view, if you see:
http://jsfiddle.net/H5J27/
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.