Solved

jQuery Slide Hidden Content From Top Of Screen

Posted on 2013-05-22
6
510 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
Comment Utility
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
Comment Utility
@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
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 6

Expert Comment

by:mickey159
Comment Utility
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
Comment Utility
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
Comment Utility
Slide effect upwards:

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

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now