Member Avatar for rouse

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
  • 157 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rouse
Member Avatar for Taywin

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>
Member Avatar for rouse

Thanks for both of your observation.
WBR

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.