Solved

jQuery Slide Hidden Content From Top Of Screen

Posted on 2013-05-22
6
518 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
  • 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Css regex 6 38
100% tall div not scrollable on iPhone 3 20
Using Modal's in to Retrieve Data from MySql and Populate Forms 13 41
send email part1 9 28
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

830 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