Solved

jQuery Slide Hidden Content From Top Of Screen

Posted on 2013-05-22
6
525 Views
Last Modified: 2013-05-25
I've create a jsFiddle here: http://jsfiddle.net/JNnNr/
Click the broken image and my content will pop up.
I would like my content to slide in from the top of the browser window and stop in the center.
<div id="assignments-main-container">
    <img id="show-hidden-popup" class='click-assignments' src="~/Content/ImagesAppBar/appBar-Assignment.png" style="width: 58px; height: 50px;" />
    <p class='click-assignments' style="margin-top: 5px; font-size: x-small;">
        Assignments
    </p>

    <style type="text/css">
        .notifier-Container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            display: none;
            background: rgba(64, 64, 64, .4);
            /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);*/
            cursor: default;
        }

        .notifier-Inner {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -120px;
            margin-left: -175px;
            width: 350px;
            height: 240px;
            font-family: Tahoma;
            font-size: 10pt;
            color: rgb(0,0,0);
            border: 1px solid rgb(119,136,153);
            background-color: rgb(255,255,255);
            opacity: 1;
            -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
            -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
            box-shadow: 10px 10px 10px #000; /* CSS3 */
            z-index: 102;
            cursor: default;
        }

        .notifier-Content {
            width: 318px;
            height: 125px;
            padding: 5px;
            margin: 10px;
            margin-top: -15px;
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 12pt;
        }

        .lbl-Notification {
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 11pt;
        }

        .notice-CloseContainerLink {
            text-decoration: none;
            color: rgb(245,128,38);
            font-weight: bold;
            font-family: Tahoma;
            font-size: 10pt;
            cursor: pointer;
        }

        .notice-CloseContainerImage {
            float: right;
            position: relative;
            left: 18px;
            top: -20px;
            width: 34px;
            height: 35px;
            cursor: pointer;
        }

        .notice-CloseTextLinkContainer {
            clear: both;
            width: 55px;
            height: 25px;
            line-height: 25px;
            vertical-align: middle;
            text-align: center;
            float: right;
            bottom: 20px;
            right: 150px;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var overlay = $('<div id="overlay"></div>');
            // Show or hide the notice container
            $("#show-hidden-popup").click(function () {
                $("#notice-InfoContainer-assignments").show();
            });

            $('#notice-CloseContainerLink').click(function () {
                $('#notice-InfoContainer-assignments').hide("slow");
                overlay.appendTo(document.body).remove();
            });

            $('.notice-CloseContainerImage').click(function () {
                $('#notice-InfoContainer-assignments').hide("slow");
                overlay.appendTo(document.body).remove();
            });
        });
    </script>
    <div id="notice-InfoContainer-assignments" class="notifier-Container" style="display: none;">
        <div id="notice-InfoInner-assignments" class="notifier-Inner">
            <img src="~/Content/ImagesAppBar/x-Close.png" alt="quit" class="notice-CloseContainerImage" id="x-home-assignments" />
            <div id="notice-Content-assignments" class="notifier-Content">
                Information Notice:<br />
                @*@Html.Label("{Welcome to Assignments Partial View}", new { @class = "lbl-Notification" })*@
                <label class="lbl-Notification">Welcome to Assignments Partial View</label>
            </div>
            <div class="notice-CloseTextLinkContainer">
                <a class='notice-CloseContainerLink'>Close</a>
            </div>
        </div>
    </div>
</div>

Open in new window

0
Comment
Question by:GenericCog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39188297
Can you provide a image for animation ? I think you need show slow

 $("#show-hidden-popup").click(function () {
                $("#notice-InfoContainer-assignments").show("slow");
            });

Open in new window

0
 

Author Comment

by:GenericCog
ID: 39188322
@jagadishdulal, the .show("slow") method simply implements a "fade-in" effect from the position I set in the CSS.  I do not want to use an image to slide down from the top of the browser, jQuery does not require it as it can animate the div.  However, the animate() method does not show a hidden element so I'm looking for a some magic trickery to get the job done!
0
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
ID: 39188387
The working demo:

http://jsfiddle.net/JNnNr/3/


Change the number 500 in
$('.notifier-Inner').show().animate({'top':'50%'},500);

Open in new window

to change the duration for moving.

If you have questions, feel free to ask me.
0
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

 
LVL 6

Expert Comment

by:mickey159
ID: 39189715
A much simpler version here:

http://jsfiddle.net/JNnNr/4/

BTW, using long id and class names are confusing and bad for maintenance. To make it easier, try using shorter names. Hope this helps!!
0
 

Author Closing Comment

by:GenericCog
ID: 39192789
The slide effect back up does not work, however, since I did not explicitly ask for that in this question, I cannot complain!!
Great work, thank you so much!
0
 
LVL 6

Expert Comment

by:mickey159
ID: 39196364
Slide effect upwards:

http://jsfiddle.net/JNnNr/6/

I don't mind, just ask me and I will answer. Do complain!!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question