205cde/contact.html at master · ledakis/205cde · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Discover Coventry</title>
        <meta name="description" content="Discover the city of Coventry! A simple guide to the city. Created on 2014.">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

        <!-- mark tyer's gist https://gist.github.com/marktyers/d9cf82f8185ff9eff768 -->
        <script>
        	window.onload = function() {
            console.log('onLoad');
            var form = document.forms.register;
            form.onsubmit = function() {
                console.log('onSubmit');
                if (form.name.value.length == 0) {
                    console.log('empty field');
                    document.getElementById('nameError').innerHTML = 'Name field empty'
                    return false;
                } else {
                    document.getElementById('nameError').innerHTML = ''
                } // if
                return true;
            } // onSubmit

            form.name.onblur = function() {
                console.log('onBlur');
                if (form.name.value.length == 0) {
                    console.log('empty field');
                    document.getElementById('nameError').innerHTML = 'Name field empty';
                    return false;
                } else {
                    document.getElementById('nameError').innerHTML = '';
                } // if
            } // onBlur

            form.phone.onkeyup = function() {
                console.log('onKeyUp');
                form.phone.value = form.phone.value.replace(' ', '');
                if (form.phone.value.length == 0 || isNaN(form.phone.value)) {
                    console.log('failed validation');
                    document.getElementById('phoneError').innerHTML = 'Invalid phone number';
                } else {
                    document.getElementById('phoneError').innerHTML = '';
                }
            } // onKeyUp

            } // onLoad
	    </script>

        <!-- mark tyer's gist-->

    </head>

    <body>
        <div id="page">
            <header>
                <div id="logo" itemscope itemtype="http://schema.org/City">
                    <img itemprop="logo" src="covlogo2.png" alt="Coventry City Logo" />
                </div>
                <nav>
                    <div id="floater"></div>
                    <div id="navigation">
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="history.html">History</a></li>
                            <li><a href="contact.html">Contact Us</a></li>
                            <li><a href="university.html">University</a></li>
                            <li><a href="info.html">Information</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
            <div class="content">
                	<form name="register" method="post" action="http://www.google.com/">
                        <p>Name:<br><input type="text" name="name"/><span id="nameError"></span></p>
                        <p>Phone:<br><input type="text" name="phone"/><span id="phoneError"></span></p>
                        <p><input type="submit"/></p>
                    </form>
            </div>


            <div class="content" itemscope itemtype="http://schema.org/City">
                    <div class="imgright">
                        <img itemprop="photo" class="zoom" src="images/coventry-index.jpg" alt="Coventry city photo. Showing a panoramic view of the cathedral and city centre."><h6>Click to zoom</h6>
                    </div>
                <article><h1>Coventry City Guide</h1>
                <p>Welcome to <span itemprop="name">Coventry</span>. <span itemprop="description">Our city and region is rich in culture, history and heritage and has made a name for itself through the centuries, captivating visitors from right across the globe with the finest selection of historic medieval buildings and internationally recognisable family friendly attractions.</span> From castles and cathedrals to motor museums and art galleries we have legends and stories that are unrivalled and unmatched. Just an hour from London by train and twenty minutes from central Birmingham, we are truly at the heart of the UK. Whether you are staying for a week, a few short days or here for a few hours, we have something for everyone.</p>
                </article>
            </div>


            <footer>
                <div id="foo">
                    <p style="line-height:40px;float:left;margin-left:10px;">Follow us!</p>
                        <ul>
                            <li><a href="http://www.facebook.com/covguide" target="_blank"><img src="images/fb.png" alt="Facebook button"></a></li>
                            <li><a href="http://www.flickr.com/covguide" target="_blank"><img src="images/flickr.png" alt="Flickr button"></a></li>
                            <li><a href="http://www.twitter.com/covguide" target="_blank"><img src="images/twitter.png" alt="Twitter button"></a></li>
                            <li><a href="http://plus.google.com/+covguide" target="_blank"><img src="images/gplus.png" alt="Google Plus button"></a></li>
                        </ul>
                <a  href="http://validator.w3.org/check?uri=referer" target="_blank" ><img src="images/html5_valid.png" alt="the html5 valid logo"> </a>
                </div>
            </footer>
        </div>
        <script>
            $( '.zoom' ).click(function() {
              $( '.imgright' ).switchClass( "imgright", "imgrightzoom", 1000, "easeInOutQuad" );
                var txt = $(this).parent().children("h6");
                txt.toggle();
                $( ".imgrightzoom" ).switchClass( "imgrightzoom", "imgright", 1000, "easeInOutQuad" );
            });
        </script>
    </body>
</html>