Как изменить скрипт jquery, чтобы подтолкнуть содержимое вниз? - PullRequest
Новая
       2

Как изменить скрипт jquery, чтобы подтолкнуть содержимое вниз?

0 голосов
/ 14 января 2012

Я использую уведомления jquery, но главная проблема заключается в том, что он добавляет уведомление поверх содержимого. Я хотел бы подтолкнуть содержание вниз. Любые предложения, как это сделать?

Я называю сценарий так: 

<script type="text/javascript">
    $(document).ready(function() {
       showNotification({
            type : "success",
            message: "This is a sample success notification"
       }); 
    });
</script>

Jquery: 

/**
 * Javascript functions to show top nitification
 * Error/Success/Info/Warning messages
 * Developed By: Ravi Tamada
 * url: http://androidhive.info
 * © androidhive.info
 * 
 * Created On: 10/4/2011
 * version 1.0
 * 
 * Usage: call this function with params 
 showNotification(params);
 **/

function showNotification(params){
    // options array
    var options = { 
        'showAfter': 0, // number of sec to wait after page loads
        'duration': 0, // display duration
        'autoClose' : false, // flag to autoClose notification message
        'type' : 'success', // type of info message error/success/info/warning
        'message': '', // message to dispaly
        'link_notification' : '', // link flag to show extra description
        'description' : '' // link to desciption to display on clicking link message
    }; 
    // Extending array from params
    $.extend(true, options, params);

    var msgclass = 'succ_bg'; // default success message will shown
    if(options['type'] == 'error'){
        msgclass = 'error_bg'; // over write the message to error message
    } else if(options['type'] == 'information'){
        msgclass = 'info_bg'; // over write the message to information message
    } else if(options['type'] == 'warning'){
        msgclass = 'warn_bg'; // over write the message to warning message
    } 

    // Parent Div container
    var container = '<div id="info_message" class="'+msgclass+'"><div class="center_auto"><div class="info_message_text message_area">';
    container += options['message'];
    container += '</div><div class="info_close_btn button_area" onclick="return closeNotification()"></div><div class="clearboth"></div>';
    container += '</div><div class="info_more_descrption"></div></div>';

    $notification = $(container);

    // Appeding notification to Body
    $('body').append($notification);

    var divHeight = $('div#info_message').height();
    // see CSS top to minus of div height
    $('div#info_message').css({
        top : '-'+divHeight+'px'
    });

    // showing notification message, default it will be hidden
    $('div#info_message').show();

    // Slide Down notification message after startAfter seconds
    slideDownNotification(options['showAfter'], options['autoClose'],options['duration']);

    $('.link_notification').live('click', function(){
        $('.info_more_descrption').html(options['description']).slideDown('fast');
    });

}
// function to close notification message
// slideUp the message
function closeNotification(duration){
    var divHeight = $('div#info_message').height();
    setTimeout(function(){
        $('div#info_message').animate({
            top: '-'+divHeight
        }); 
        // removing the notification from body
        setTimeout(function(){
            $('div#info_message').remove();
        },200);
    }, parseInt(duration * 1000));   



}

// sliding down the notification
function slideDownNotification(startAfter, autoClose, duration){    
    setTimeout(function(){
        $('div#info_message').animate({
            top: 0
        }); 
        if(autoClose){
            setTimeout(function(){
                closeNotification(duration);
            }, duration);
        }
    }, parseInt(startAfter * 1000));    
}

Ответы [ 3 ]

0 голосов
/ 14 января 2012

Хорошо, не полное решение ... Проблема в том, что CSS, несомненно, отвечает за отображение уведомлений в верхней части страницы. В уведомлении JS вы найдете строку 

$('body').append($notification);

Если вы измените это на 

$('body').prepend($notification);

уведомление будет отображаться вверху, если вы также убедитесь, что ваш CSS имеет: 

#info_message {
   position:relative;
}

Если есть position: absolute, то ваше уведомление будет всплывать над другим текстом.

Вероятно, по-прежнему будет происходить небольшой скачок вашего контента, когда уведомление появится и исчезнет, ​​но остальная анимация должна быть в порядке. Возможно, вам нужно смешать увеличение / уменьшение высоты с перемещением позиции, чтобы получить плавный переход, или использовать другую библиотеку.

0 голосов
/ 14 января 2012

В вашем HTML-файле добавьте div, где вы хотите, чтобы уведомление отображалось следующим образом: 

<body>
    <div id="notificationDiv">
        This is the DIV, where you want notification to appear.
    </div>
    <div id="content">
        This is content of the page.
    </div>
</body>

Затем просто измените строку в вашем файле JQUERY: 

// Appeding notification to Body
$('body').append($notification);

на это:

// Appeding notification to Body
$('#notificationDiv').html($notification);

Вы можете проверить это там .

Чтобы сдвинуть содержимое вниз, в вашем файле jquery_notification.css измените это: 

#info_message{
    display: none;
    width: 100%;
    height: 51px;
    position: absolute;
    top: 0;
    position: fixed;
    z-index: 50000;
    margin: 0;
    padding: 0;
}

... к этому (удалить оба свойства позиции): 

#info_message{
    display: none;
    width: 100%;
    height: 51px;
    top: 0;
    z-index: 50000;
    margin: 0;
    padding: 0;
}
0 голосов
/ 14 января 2012

Одна из возможностей - вставить контейнер уведомлений перед содержимым. Затем вы можете установить начальную высоту на 0 и анимировать высоту. Контент будет перемещаться по мере расширения контейнера уведомлений.

Рабочий образец: http://jsfiddle.net/yJYeb/1/

...