mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-03 01:52:48 +02:00
First add of home page
This commit is contained in:
Richard Rutter
4
css/css3.css
Normal file
4
css/css3.css
Normal file
@@ -0,0 +1,4 @@
|
||||
#main p {
|
||||
hyphenate:auto;
|
||||
hyphenate-lines:3;
|
||||
}
|
||||
634
css/screen.css
Normal file
634
css/screen.css
Normal file
@@ -0,0 +1,634 @@
|
||||
@import "/css/css3.css";
|
||||
|
||||
|
||||
BODY {
|
||||
margin:0;
|
||||
padding:0;
|
||||
color: #000;
|
||||
background: #FFF8E5;
|
||||
font-size: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
HTML>BODY, HTML>BODY#cover {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ABBR, ACRONYM, .caps {
|
||||
text-transform: lowercase;
|
||||
font-variant:small-caps;
|
||||
font-style: normal;
|
||||
border-bottom: 0;
|
||||
letter-spacing:0.1em;
|
||||
}
|
||||
|
||||
cite, CITE ABBR, CITE ACRONYM, CITE .caps, em {
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-family: 'premiera bold', georgia, serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* @group layout */
|
||||
|
||||
#main {
|
||||
|
||||
width:61.8%;
|
||||
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#supp {
|
||||
|
||||
margin-left:61.8%;
|
||||
}
|
||||
|
||||
#main H1, #main H2, #main P, #main PRE, #main UL, #main OL, #main DL, #supp UL, #supp H3, #supp OL, #supp P, FORM, .example, #supp #deck {
|
||||
padding: 0 11.8%;
|
||||
}
|
||||
|
||||
H1 SPAN, #supp SPAN, #toc LI SPAN, .quote-from-book .ic, .thumb {
|
||||
position: absolute;
|
||||
text-align:right;
|
||||
display:block;
|
||||
}
|
||||
|
||||
H1 SPAN, #toc LI SPAN, .thumb {
|
||||
left: -0.75em;
|
||||
width:7.29%;
|
||||
font-family: 'Premiera Book', georgia, serif;
|
||||
-moz-font-feature-settings:"onum" 1;
|
||||
-ms-font-feature-settings:"onum" 1;
|
||||
-o-font-feature-settings:"onum" 1;
|
||||
-webkit-font-feature-settings:"onum" 1;
|
||||
font-feature-settings:"onum" 1;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
left: -0.3em;
|
||||
}
|
||||
|
||||
#supp SPAN {
|
||||
left: -0.5em;
|
||||
width: 11.8%;
|
||||
}
|
||||
|
||||
#nextprev, H3 {
|
||||
position: relative;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group typography */
|
||||
#main, #supp, #footer, #cover, .amzbox {
|
||||
font: 1.0em/1.375em 'Premiera Book', georgia, serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, #header, #big-title #ts {
|
||||
font-family: 'Premiera Book', Georgia, serif;}
|
||||
|
||||
|
||||
h1#big-title span {
|
||||
font-style: italic;
|
||||
font-family: 'premiera Italic', Georgia, serif;
|
||||
}
|
||||
|
||||
a, a:visited, a:link, a:active, a:hover {
|
||||
|
||||
color: #00408F;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:#666;
|
||||
}
|
||||
|
||||
html>body a, html>body a:visited, html>body a:link, html>body a:active, html>body a:hover {
|
||||
/* Need to hide borders on links from IE6 due to text-jog bug */
|
||||
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #F2ECDA;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
html>body a:active, html>body a:hover {
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
H1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.083333333333333em;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
H2, H3 {
|
||||
font-weight: normal;
|
||||
font-size: 1.1875em; /* 19px */
|
||||
margin: 1.157894736842105em 0; /* 22px */
|
||||
text-indent: -0.052631578947368em; /* 1px */
|
||||
}
|
||||
H4 {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
margin: 0 0 0.6875em 0;
|
||||
}
|
||||
|
||||
#supp H2 { /* header*/
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
position:absolute;
|
||||
right: 4.5076%;
|
||||
top: 1.375em;
|
||||
}
|
||||
|
||||
#supp h2 a {
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
|
||||
#supp h2 a:active, #supp h2 a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#supp h3 {
|
||||
margin-bottom: 0.578947368421053em; /* 11px */
|
||||
margin-top: 1.736842105263158em; /* 33px*/
|
||||
}
|
||||
|
||||
|
||||
BLOCKQUOTE {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
}
|
||||
|
||||
.quote-from-book {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-from-book .ic {
|
||||
left: 0px;
|
||||
width: 11.8%;
|
||||
}
|
||||
|
||||
UL, OL, DL {
|
||||
margin: 1.375em 0 1.375em 0;
|
||||
}
|
||||
|
||||
LI, DD, DT {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
DD {
|
||||
margin-left: 1.375em;
|
||||
}
|
||||
|
||||
P {
|
||||
margin-top: 1.375em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
P + P {
|
||||
margin-top: 0;
|
||||
text-indent: 1.375em;
|
||||
}
|
||||
|
||||
p.imgholder {
|
||||
margin-top: 1.375em;
|
||||
margin-bottom: 1.375em;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
Q {
|
||||
font-style:italic;
|
||||
quotes: '\2018' '\2019' '\201C' '\201D';
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
}
|
||||
|
||||
Q:before {
|
||||
content: '\2018';
|
||||
}
|
||||
|
||||
Q:after {
|
||||
content: '\2019';
|
||||
}
|
||||
|
||||
HTML > BODY Q {
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
BODY BLOCKQUOTE Q {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
CODE {
|
||||
font-family: 'lucida console', 'andale mono', 'monotype.com', monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
code code {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
PRE {
|
||||
margin: 1.375em 0 0 1.375em;
|
||||
}
|
||||
|
||||
BLOCKQUOTE EM {
|
||||
font-style: normal;
|
||||
font-family: 'Premiera Book', georgia, serif;
|
||||
}
|
||||
|
||||
UL UL, OL OL {
|
||||
margin-left: 1.375em;
|
||||
}
|
||||
|
||||
#main LI P {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
H1 A:link, H1 A:visited, H1 A:hover, H1 A:active {
|
||||
color: #333;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
H2 A:link, H2 A:visited, H2 A:hover, H2 A:active {
|
||||
text-decoration:none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#supp UL {
|
||||
list-style:circle;
|
||||
margin-top: 0.6875em;
|
||||
}
|
||||
|
||||
OL#annotations {
|
||||
list-style:lower-roman;
|
||||
}
|
||||
|
||||
#nextprev LI {
|
||||
list-style: none;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group header */
|
||||
#header {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.1em;
|
||||
color: #fff;
|
||||
background: #400300 url(/i/newdrop.png) repeat-x bottom;
|
||||
padding: 1.1em 1.1em 2.2em 1.1em;
|
||||
margin:0 0 2.2em 0;
|
||||
}
|
||||
|
||||
#header a {
|
||||
color: #e7e7e7;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#header a:hover, #header a:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
#header a span {
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
}
|
||||
|
||||
span.of {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group footer */
|
||||
#footer {
|
||||
font-size: 0.875em;
|
||||
clear:both;
|
||||
margin: 0;
|
||||
padding: 4.714285714285714em 0 1.571428571428571em 7.29%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #999;
|
||||
}
|
||||
html>body #footer a {
|
||||
border-bottom: 1px solid #F2ECDA;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Bits and pieces */
|
||||
.author {
|
||||
text-indent:0;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.bits h1 {
|
||||
margin-top: -0.166666666666667em;
|
||||
margin-bottom: 0.916666666666667em;
|
||||
}
|
||||
|
||||
.bits #supp {
|
||||
padding-top: 0.6875em;
|
||||
}
|
||||
|
||||
#toc h3 {
|
||||
margin-top: 1.736842105263158em; /* 33px */
|
||||
margin-bottom: 0.578947368421053em; /* 11px */
|
||||
}
|
||||
|
||||
OL#toc {
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
OL#toc OL {
|
||||
margin-left: 0;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
OL#toc OL OL {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nobullets {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: #F2ECDA;
|
||||
}
|
||||
|
||||
.thumb IMG {
|
||||
height: 2.5em;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.bracket {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group forms */
|
||||
FORM {
|
||||
margin: 0 0 1.375em 0;
|
||||
}
|
||||
FORM DT {
|
||||
margin:1em 0 0 0;
|
||||
}
|
||||
FORM DD {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
INPUT, TEXTAREA {
|
||||
font: 1.0em/1.375em georgia, "times new roman", serif;
|
||||
}
|
||||
INPUT.textbox, TEXTAREA {
|
||||
border: 1px solid #999;
|
||||
font: 1.0em/1.375em georgia, "times new roman", serif;
|
||||
width:100%;
|
||||
}
|
||||
INPUT.button {
|
||||
border-width: 1px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Examples */
|
||||
#main #box1, #main #box2 { /* 2.1.1 */
|
||||
font-size:12px;
|
||||
width:1em;
|
||||
height:1em;
|
||||
border:1px solid black;
|
||||
margin-left: 11.8%;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
margin-top: 1.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
#main #box2 { /* 2.1.1 */
|
||||
font-size:60px;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
.inex { /* inline example */
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
div.ex2-1-7 {
|
||||
font-family: "univers bold condensed", impact, haettenschweiler, sans-serif;
|
||||
font-size: 200%;
|
||||
letter-spacing:0.1em;
|
||||
margin-top:0.75em;
|
||||
margin-left:0.75em;
|
||||
}
|
||||
|
||||
div.ex2-1-8 {
|
||||
margin-top:0.75em;
|
||||
margin-left:0.75em;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
.ex2-1-8i {
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
div.ex2-1-9 {
|
||||
margin-top:0.75em;
|
||||
margin-left:0.75em;
|
||||
font-size: 200%;
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc1 {
|
||||
margin: 0 3em 0 auto;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc1 th {
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc1 td {
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
text-align: right;
|
||||
padding: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc2 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc2 th {
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
padding: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc2 td:before {
|
||||
content: "\2022";
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.ex2-1-10-toc2 td {
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
text-align: left;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.ex2-2-1ii {
|
||||
font-size: 1.5em;
|
||||
line-height: 0.85;
|
||||
text-indent: -0.5em;
|
||||
margin-top: 1.5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.ex2-2-1i {
|
||||
line-height: 3;
|
||||
border-top:1px solid #ccc;
|
||||
border-bottom:1px solid #ccc;
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ex2-2-2 {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 3em;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.ex2-2-2 .basictext {
|
||||
margin-left: 10em;
|
||||
}
|
||||
|
||||
.ex2-2-2 .sidenote {
|
||||
width: 9.6em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-indent: 0;
|
||||
font-size: 0.8333em;
|
||||
line-height:1.8;
|
||||
}
|
||||
|
||||
.ex2-3-2i {
|
||||
text-indent:-1.5em;
|
||||
}
|
||||
|
||||
.ex2-3-2ii:before {
|
||||
content: "\2767";
|
||||
padding-right: 0.4em;
|
||||
}
|
||||
|
||||
.ex2-3-2iii {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
#main .ex2-3-2iii p {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
.ex2-3-2iii p + p:before {
|
||||
content: "\2761";
|
||||
padding-right: 0.1em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
.ex2-3-4 {
|
||||
margin-left:0;
|
||||
margin-right:0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ex2-3-4 pre {
|
||||
font-family: inherit;
|
||||
display: table;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group Amazon box */
|
||||
.amzbox {
|
||||
position:absolute;
|
||||
width:380px;
|
||||
}
|
||||
|
||||
.amzbox P, .amzbox UL {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amzbox P {
|
||||
padding: 1.5em 38px 38px 51px;
|
||||
font-style: italic;
|
||||
font-family: 'premiera italic', georgia, serif;
|
||||
background: url(/i/amz-drop.png) bottom no-repeat;
|
||||
}
|
||||
|
||||
.amzbox P.first {
|
||||
padding: 36px 38px 1.5em 38px;
|
||||
background:url(/i/amz-drop.png) top no-repeat;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.amzbox IMG {
|
||||
float:left;
|
||||
width: 57px;
|
||||
height: 24px;
|
||||
margin: 3px 1em 1em 0;
|
||||
}
|
||||
|
||||
.amzbox UL {
|
||||
padding: 0 38px 0 51px;
|
||||
list-style-type: square;
|
||||
background: url(/i/amz-drop.png) center no-repeat;
|
||||
}
|
||||
|
||||
#amazonswitcher label {
|
||||
white-space:nowrap;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
|
||||
|
||||
/* @group Deck ad */
|
||||
|
||||
#deck {
|
||||
margin-top: 3em;
|
||||
width: 13.636363636363636em;
|
||||
}
|
||||
|
||||
#supp #deck p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
107
index.php
Normal file
107
index.php
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
|
||||
<title>The Elements of Typographic Style Applied to the Web – a practical guide to web typography</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link rel='stylesheet' href='http://f.fontdeck.com/s/css/GERHYe/hNqcZuLwYNms1N98PLak/webtypography.net/1575.css' type='text/css' /><style type="text/css" media="screen"><!--
|
||||
@import "/css/screen.css?1";
|
||||
--></style>
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ie-lte-7.css" />
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/js/global.js"></script>
|
||||
<script type="text/javascript" src="/js/amz.js"></script>
|
||||
<meta name="MSSmartTagsPreventParsing" content="true" />
|
||||
<link rel="start" title="Home page" href="/" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 feed" href="http://feeds.feedburner.com/webtype" />
|
||||
<script src="/mint/?js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
#cover {
|
||||
color: #fff;
|
||||
background: #400300 url(/i/bg-home.gif) repeat-x top;
|
||||
padding: 4.5076% 7.2924%;
|
||||
}
|
||||
|
||||
#cover H1 {
|
||||
font-size: 2.0625em;
|
||||
line-height: 1.666666666666667em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1#big-title span {
|
||||
position:static;
|
||||
display:inline;
|
||||
}
|
||||
|
||||
h1#big-title span#ts {
|
||||
font-style:normal;
|
||||
position:relative;
|
||||
left:-1.05em;
|
||||
}
|
||||
|
||||
#entrance {
|
||||
position: absolute;
|
||||
right: 4.5076%;
|
||||
bottom: 11.8%;
|
||||
font-size:1em;
|
||||
line-height1.375em;
|
||||
}
|
||||
|
||||
#cover H2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.083333333333333em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#entrance a {
|
||||
color: #fff;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
html>body #entrance a {
|
||||
text-decoration:none;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
html>body #entrance a:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
#entrance UL {
|
||||
list-style:none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
LI SPAN {
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="cover">
|
||||
|
||||
|
||||
<h1 id="big-title">
|
||||
The Elements <br />
|
||||
<span id="ts"><span class="of">of</span> Typographic Style<br /></span>
|
||||
Applied <span>to the</span> Web
|
||||
</h1>
|
||||
|
||||
<div id="entrance">
|
||||
<h2>A practical guide to web typography</h2>
|
||||
<ul>
|
||||
<li>Will return as soon as possible</li>
|
||||
<?php /*
|
||||
<li><a href="/intro/">Read the Introduction
|
||||
</a></li>
|
||||
<li><a href="/toc/">Table of Contents</a></li>
|
||||
<li><span style="left:-3.5em">Latest: </span><a href="/Harmony_and_Counterpoint/Numerals__Capitals_and_Small_Caps/3.2.1/">3.2.1 Use titling figures with full caps, and text figures in all other circumstances
|
||||
</a></li>
|
||||
*/ ?>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
131
js/amz.js
Normal file
131
js/amz.js
Normal file
@@ -0,0 +1,131 @@
|
||||
// Intercept Amazon links to set preferred store
|
||||
|
||||
// URL components for the different affiliate schemes
|
||||
var amz_schemes = new Array("uk", "ca", "com");
|
||||
var amz_affil = new Array();
|
||||
amz_affil["uk"] = new Array(".co.uk", "jalfrezi-21", "UK and the rest of Europe");
|
||||
amz_affil["ca"] = new Array(".ca", "clagnut0d-20", "Canada");
|
||||
amz_affil["com"] = new Array(".com", "clagnut-20", "US and the rest of the world");
|
||||
|
||||
function initLinks() {
|
||||
// Test for cookies
|
||||
if (testCookies()) { // if cookies are enabled
|
||||
// Get existing store setting
|
||||
var amz_dest = readCookie("amz_dest");
|
||||
var allLinks = document.getElementsByTagName('a');
|
||||
for (var i=0; i < allLinks.length; i++) { // loop through all links on page
|
||||
var aLink = allLinks[i];
|
||||
var url = aLink.href;
|
||||
var amzMatch = url.search(/amazon\./);
|
||||
if (amzMatch > -1) { // crude check for link to Amazon
|
||||
if (amz_dest) {
|
||||
// If store is set then rebuild link
|
||||
var country = amz_affil[amz_dest][0];
|
||||
var affil = amz_affil[amz_dest][1];
|
||||
|
||||
// Change all possible urls to the desired country and affil
|
||||
for (var j=0; j<amz_schemes.length; j++) {
|
||||
c2 = amz_affil[amz_schemes[j]][0];
|
||||
a2 = amz_affil[amz_schemes[j]][1];
|
||||
url = url.replace(c2,country);
|
||||
url = url.replace(a2,affil);
|
||||
}
|
||||
|
||||
aLink.href = url
|
||||
|
||||
} else { // store is not set
|
||||
aLink.onclick = function(e) {
|
||||
return interceptAmzLinks(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function interceptAmzLinks(theLink) {
|
||||
// create new div
|
||||
var div = document.createElement("div");
|
||||
|
||||
// create new img
|
||||
var amzimg = document.createElement("img");
|
||||
amzimg.src = "/i/amz.gif";
|
||||
amzimg.setAttribute("alt","Amazon");
|
||||
|
||||
// create new p
|
||||
var para1 = document.createElement("p");
|
||||
para1.appendChild(amzimg);
|
||||
var para1txt = document.createTextNode("You are about to follow a link to Amazon. Which store would you prefer to visit?");
|
||||
para1.appendChild(para1txt);
|
||||
para1.className = "first";
|
||||
div.appendChild(para1);
|
||||
|
||||
// create new ul
|
||||
var ul = document.createElement("ul");
|
||||
|
||||
// build list of links
|
||||
var i, scheme, country, afil, desc, key, func, url, li, litxt, a, atxt;
|
||||
|
||||
for (i=0; i < amz_schemes.length; i++) {
|
||||
|
||||
scheme = amz_schemes[i];
|
||||
country = amz_affil[scheme][0];
|
||||
affil = amz_affil[scheme][1];
|
||||
desc = amz_affil[scheme][2];
|
||||
|
||||
li = document.createElement("li");
|
||||
a = document.createElement("a");
|
||||
a.setAttribute("title","Go to product page on Amazon"+country);
|
||||
a.setAttribute("onclick","setAmzDest('"+scheme+"')");
|
||||
|
||||
url = theLink.href;
|
||||
url = url.replace(/\.co\.uk/,country);
|
||||
url = url.replace(/jalfrezi-21/,affil);
|
||||
a.href = url;
|
||||
|
||||
atxt = document.createTextNode("Amazon" + country);
|
||||
a.appendChild(atxt);
|
||||
li.appendChild(a);
|
||||
|
||||
litxt = document.createTextNode(" - " + desc);
|
||||
li.appendChild(litxt);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
div.appendChild(ul);
|
||||
|
||||
// style box
|
||||
div.className = "amzbox";
|
||||
|
||||
// position box
|
||||
viewportHeight=getInnerHeight();
|
||||
viewportWidth=getInnerWidth();
|
||||
downScroll = getVertScroll();
|
||||
rightScroll = getHorizScroll();
|
||||
|
||||
topPos = ((viewportHeight - 200) / 2) + downScroll;
|
||||
leftPos = ((viewportWidth - 500) / 2) + rightScroll;
|
||||
div.style.left = leftPos+"px";
|
||||
div.style.top = topPos+"px";
|
||||
|
||||
// create new p
|
||||
var para2 = document.createElement("p");
|
||||
var para2txt = document.createTextNode("You will only be bothered with this once.");
|
||||
para2.appendChild(para2txt);
|
||||
div.appendChild(para2);
|
||||
|
||||
// attach div to body
|
||||
document.body.appendChild(div);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function setAmzDest(amz_dest) {
|
||||
createCookie("amz_dest",amz_dest,"365");
|
||||
initLinks();
|
||||
return true;
|
||||
}
|
||||
|
||||
function changeLink(theLink) {
|
||||
|
||||
}
|
||||
120
js/global.js
Normal file
120
js/global.js
Normal file
@@ -0,0 +1,120 @@
|
||||
// highlight targeted id
|
||||
function highlight() {
|
||||
loc = window.location;
|
||||
loc = loc + "";
|
||||
tstart = loc.indexOf("#");
|
||||
if (tstart > -1) {
|
||||
targetId = loc.substring(tstart+1, loc.length);
|
||||
targetObj = document.getElementById(targetId);
|
||||
if (targetObj) {
|
||||
targetObj.className = "highlight";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createCookie(name,value,days) {
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
||||
var expires = "; expires="+date.toGMTString();
|
||||
}
|
||||
else expires = "";
|
||||
document.cookie = name+"="+value+expires+"; path=/";
|
||||
}
|
||||
|
||||
function readCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function testCookies() {
|
||||
createCookie("test","ok",1);
|
||||
if (readCookie("test")) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getInnerHeight() {
|
||||
var y;
|
||||
if (self.innerHeight) // all except Explorer
|
||||
{
|
||||
y = self.innerHeight;
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight)
|
||||
// Explorer 6 Strict Mode
|
||||
{
|
||||
y = document.documentElement.clientHeight;
|
||||
}
|
||||
else if (document.body) // other Explorers
|
||||
{
|
||||
y = document.body.clientHeight;
|
||||
}
|
||||
return y;
|
||||
}
|
||||
|
||||
function getInnerWidth() {
|
||||
var x;
|
||||
if (self.innerHeight) // all except Explorer
|
||||
{
|
||||
x = self.innerWidth;
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight)
|
||||
// Explorer 6 Strict Mode
|
||||
{
|
||||
x = document.documentElement.clientWidth;
|
||||
}
|
||||
else if (document.body) // other Explorers
|
||||
{
|
||||
x = document.body.clientWidth;
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
function getVertScroll() {
|
||||
var y;
|
||||
if (self.pageYOffset) // all except Explorer
|
||||
{
|
||||
y = self.pageYOffset;
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.scrollTop)
|
||||
// Explorer 6 Strict
|
||||
{
|
||||
y = document.documentElement.scrollTop;
|
||||
}
|
||||
else if (document.body) // all other Explorers
|
||||
{
|
||||
y = document.body.scrollTop;
|
||||
}
|
||||
return y;
|
||||
}
|
||||
|
||||
function getHorizScroll() {
|
||||
var x;
|
||||
if (self.pageYOffset) // all except Explorer
|
||||
{
|
||||
x = self.pageXOffset;
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.scrollTop)
|
||||
// Explorer 6 Strict
|
||||
{
|
||||
x = document.documentElement.scrollLeft;
|
||||
}
|
||||
else if (document.body) // all other Explorers
|
||||
{
|
||||
x = document.body.scrollLeft;
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
highlight();
|
||||
initLinks();
|
||||
}
|
||||
Reference in New Issue
Block a user