I have two immediate problems with the code I am working with.
I have an area when I hover over it makes visible prompts to social media sites. But I don’t know how to keep the prompts visible while you choose the site that you want to visit.
Secondly as the icons appear there is a small line that appears between the icons. What is this from and how do I remove it.
Obviously I would like some help in resolving these two problems.
The viewable link is:
http://rouse.ws/promptTest/slideRightSocialTest.html
The code is as follows:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HORIZONTAL-SLIDING-PANEL</title>
<style>
body {
margin:0;
padding:0;
}
#socialPrompt {
position: fixed;
width: 50px;
height: 100px;
left: 0px;
top: 100px;
display: block;
cursor: pointer;
background-color: lightgray;
}
#panel {
position: fixed;
left: 0px;
top: 100px;
height: 100px;
width: 0;/*new line*/
background-color: white;
}
#panel .content {
width:290px;
margin-left:70px;
margin-top: 20px;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//Hide the content.
$(".content").hide();
//when the #socialPrompt is hovered on
$('#socialPrompt').hover(function(){
$('#panel').stop().animate({width:"400px", opacity:0.8}, 500, function() {//sliding the #panel to 400px
$('.content').fadeIn('slow'); //slides the content into view.
});
},
//when the #socialPrompt is hovered off
function(){
//fade out the content
$('.content').fadeOut('slow', function() {
$('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
});
});
});
</script>
</head>
<body>
<!--the hidden panel -->
<div id="panel">
<div class="content">
<!--Slideable social icons here... -->
<a href="#">
<img src="img/facebook.png" alt="Co-op Care on facebook" width="64" height="64" /> </a>
<a href="#">
<img src="img/twitter.png" alt="Twitter@Co-op Care" width="64" height="64" /> </a>
<a href="#">
<img src="img/google.png" alt="Google +" width="64" height="64" /> </a>
<a href="#">
<img src="img/youtube.png" alt="You Tube" width="64" height="64" /> </a>
</div>
</div>
<!-- This DIV will activate the sliding panel. -->
<div id="socialPrompt">
<p>
Social Prompt
</p>
</div>
</body>
</html>
Thanks!
WBR
