I'm trying to make a contact page where you can mouseover (or click) a link that then holds my twitter feed on the right of the page, it will then do the same with a facebook feed and buzzz feed for different links. A cool idea, but right now I can only get it to open on another page...
Here's what I have,
<html>
<head>
<title>I'm Josiah.</title>
<style type="text/css">
body {
font-family: Helvetica, Bitstream Vera Sans, sans-serif;
color: #000000;
}
.content {
text-align: left;
margin-left: 20%;
margin-top: 8%;
color: #00BFFF;
}
.heading {
font-size: 3em;
font-weight: bold;
}
.item {
margin-left: 3%;
color: #00BFFF
}
.mainlink {
font-size: 2em;
}
.comment {
color: gray;
font-size: 1em;
margin-left: 5%;
}
.contact {
position:absolute;top:1000px;left:500px;
}
A:link {
text-decoration: none;
color: #00BFFF;
}
A:visited {
text-decoration: none;
color: #00BFFF; }
A:active {
text-decoration: none;
color: #00BFFF;
}
A:hover {
text-decoration: none;
color: #38ACEC;
}
.twitter {
position:absolute;top:200px;left:950px;
}
</style>
</head>
<body bgcolor=#828282>
<span>&nbsp;</span>
<div class="content">
<div class="heading">Hi. I'm Josiah</div>
<div class="item">
<div class="mainlink">&bull; <a href="www.twitter.com/mrjosiaht" onmouseover="tweet()">@mrJosiaht</a></div>
<div class="comment">For the tweeters</div>
</div>
<div class="item">
<div class="mainlink">&bull; <a href="http://jonty.co.uk/made">josiah.com/made</a></div>
<div class="comment">For people who like code</div>
</div>
<div class="item">
<div class="mainlink">&bull; <a href="http://jonty.co.uk/is/also/on">josiah.com/is/also/on</a></div>
<div class="comment">For stalkers</div>
</div>
<div class="item">
<div class="mainlink">&bull; <a href="http://contact.josiah.com">contact.josiah.com</a></div>
<div class="comment">For saying hello</div>
</div>
<div class="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
function tweet() {
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 400,
height: 150,
theme: {
shell: {
background: '#696969',
color: '#060e02'
},
tweets: {
background: '#696969',
color: '#00BFFF',
links: '#00BFFF'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('MrJosiahT').start();
}
</script>
</div>
</body>
</html>