0

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

2
Contributors
2
Replies
3
Views
4 Years
Discussion Span
Last Post by rouse
0

The answer for your first question is that your mouse event covers only when the mouse cursor is hovered over the selected element. But when the mouse cursor is moved to be over your new panel, the moustout event is called and that will cause your panel to be hidden again.

The answer for your second question is that you have white space in your HTML tags between the anchor (a) tag. As a result, that white space will be displayed with link style (blue underline). The simpliest way to do is to remove the white spaces.

<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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.