"Utilize jQuery to animate several elements from the center to the top of the page

Question

"Utilize jQuery to animate several elements from the center to the top of the page

I am attempting to shift AlwaysVisibleControls from the center of the screen to the top of the page after a short delay.

Here is the code I have:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) {
    $('.PanelNotificationBox').click(function () {
        $(this).fadeOut('slow', function () {
            $(this).remove();
        });
    });

    while (ScrollTopTimeOuts.length != 0) {
        clearTimeout(ScrollTopTimeOuts[ScrollTopTimeOuts.length - 1]);
        ScrollTopTimeOuts.length--;
    }
    ScrollTopTimeOuts[ScrollTopTimeOuts.length] = setTimeout(function () {
        $('.PanelNotificationBox').animate({ top: 0 }, 'slow');
    }, 3000);
}

This solution works, but an issue arises when there are multiple notifications (

$('.PanelNotificationBox').size()>1

). In this case, they overlap after the animation.

Q: How can I animate elements so that the first notification is on top and subsequent ones stay relative to each other?

Edit: When I placed the notification divs inside a container div and attempted to animate the container, no animation occurred. Below is the generated HTML/CSS (note: the outer div is within an UpdatePanel):

<div id="ctl00_UpdNotifier"         
    <div style="top: 0px;" id="ctl00_Notifier1_PnlNotification" class="NotificationContainer">
        <div style="left: 292px; top: 398px; display: none; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_InfoMsg2" class="PanelNotificationBox PanelInfo AutoHide" title="click to close notification">
            <span>Test-Notification(Info)</span>
        </div>
        <div style="left: 292px; top: 463px; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_ErrorMsg1" class="PanelNotificationBox PanelError" title="click to close notification">
            <span>Test-Notification(RMA-Error)</span>
        </div>
    </div>
</div>

CSS-File:

.PanelNotificationBox 
{
    visibility:hidden;
    z-index:9999;
    width: 50%;
    font-weight: bold;
    font-size:small;
    border: 1px solid;
    margin: 10px auto;
    padding: 20px 20px 20px 60px;
    background-repeat: no-repeat;
    background-position: 8px center;
    box-shadow: 2px 2px 3px #3A4F63;
    border-radius: 4px;
}


.PanelInfo {
    color:Black;
    background-color: InfoBackground;
    background-image: url('../images/info-icon.png');
}

.PanelError {
    color:White;
    background-color: red;
    background-image: url('../images/error-icon.png');
}

javascript jquery asp.net css asp.net-ajax

Answer 1

Answer №1

To optimize your message display on the page, I recommend placing all messages within a div element and positioning it absolutely at the top of the page. You can then animate this div to showcase all the messages sequentially. By organizing your elements within this div, they will automatically arrange themselves in sequence.

<style type="text/css>
.CustomContainer {
    position:absolute;
    left:10px;
    top:10px;
    width:230px;    
}   
</style>

<div id="CustomContainerID" class="CustomContainer">
    <div>First element</div>
    <div>Second element</div>   
    <div>.... next elements</div>
</div>

Here is an example of how you can implement this using JavaScript:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) 
{
    // Function for individual message close
    $('.PanelNotificationBox').click(function () {
        $(this).fadeOut('slow', function () {
            $(this).remove();
        });
    });

   clearTimeout(ScrollTopTimeOuts);

   // Animate the container after 3 seconds
   ScrollTopTimeOuts = setTimeout(function () {
       $('#CustomContainerID').animate({ top: 0 }, 'slow');
   }, 3000);
}

Answer 2

To optimize your message display on the page, I recommend placing all messages within a div element and positioning it absolutely at the top of the page. You can then animate this div to showcase all the messages sequentially. By organizing your elements within this div, they will automatically arrange themselves in sequence.

<style type="text/css>
.CustomContainer {
    position:absolute;
    left:10px;
    top:10px;
    width:230px;    
}   
</style>

<div id="CustomContainerID" class="CustomContainer">
    <div>First element</div>
    <div>Second element</div>   
    <div>.... next elements</div>
</div>

Here is an example of how you can implement this using JavaScript:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) 
{
    // Function for individual message close
    $('.PanelNotificationBox').click(function () {
        $(this).fadeOut('slow', function () {
            $(this).remove();
        });
    });

   clearTimeout(ScrollTopTimeOuts);

   // Animate the container after 3 seconds
   ScrollTopTimeOuts = setTimeout(function () {
       $('#CustomContainerID').animate({ top: 0 }, 'slow');
   }, 3000);
}

Answer 3

Answer №2

After trying out the suggestions from @Yoshi and @Aristos, I discovered that they both had a flaw of disrupting the AlwaysVisibleControls js-functionality. Despite this setback, I appreciate their input :)

In the end, I came up with a solution that is functioning well (minus the timer aspect):

var first=$('.PanelNotificationBox:first');
$('.PanelNotificationBox').each(function (index) {
    $(this).animate({ top: '-=' + first.offset().top }, 'slow');
});

Answer 4

After trying out the suggestions from @Yoshi and @Aristos, I discovered that they both had a flaw of disrupting the AlwaysVisibleControls js-functionality. Despite this setback, I appreciate their input :)

In the end, I came up with a solution that is functioning well (minus the timer aspect):

var first=$('.PanelNotificationBox:first');
$('.PanelNotificationBox').each(function (index) {
    $(this).animate({ top: '-=' + first.offset().top }, 'slow');
});

"Utilize jQuery to animate several elements from the center to the top of the page

Answer №1

Answer №2

Similar questions

Interacting with a RESTful API in Xamarin.Forms mobile app and other devices within the shared network

Designing the button outline variant with Material-UI styling

Guide to using Javascript to dynamically insert items into the shopping cart menu list

problems with hovering over radio buttons in Internet Explorer 9

One-time PHP form submission only

How can JavaScript be used to modify the locale of a web browser?

Full replacement of a cell within an HTML table

Removing the hash symbol in Angular: A step-by-step guide

Issues arise with Promises in nodejs when the process exits before waiting for child processes to complete

Encountering an issue when trying to input special characters with Entity Framework

CSS: Experimenting with creating a hover effect that lifts the box upwards

Learn to send a dynamic query string from PHP using AJAX for displaying results in a pop-up window

Unable to modify an image with the combination of HttpHandler, UpdatePanel, and Timer

Ways to create animation solely using CSS for a div element

Access my account on the one.com control panel using the identical login credentials

Can you identify a sort event specifically for items that have been updated but not deleted?

Validation of forms using AJAX

The update in state is not reflected immediately by setState, instead, it is rendered after subsequent state changes

A step-by-step guide on building an interactive settings page for your Chrome extension

String validation using regular expressions