jqueryスクリプトを修正してコンテンツをプッシュダウンする方法はありますか？

jquery通知を使用していますが、主な問題はコンテンツの上に通知を追加することです。私はコンテンツを押し下げたいと思います。どのようにこれを行うための任意の提案？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));  
}

出典

2012-01-14 user1149048

あなたはCSSに提供できますあなたは追加された通知をスタイルするために使用していますか？ – craigmj

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);

これを確認することができますthere。

あなた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; 
}

出典

2012-01-14 11:55:47 PrimosK

私はあなたが言ったことすべてをやったと思う：余分なdivを上に追加し、.jsファイル$（ '＃notificationDiv'）に行を追加した。 – user1149048

でも、私は同じ結果を残しています。あなたはreprezentacija.ltでそれを確認することができます。 – user1149048

私は答えを更新しました... – PrimosK

一つの可能性はコンテンツの前に通知コンテナを挿入することです。最初の高さを0に設定し、高さをアニメートできます。通知コンテナが展開されると、コンテンツは下に移動します。

ワーキングサンプル：http://jsfiddle.net/yJYeb/1/

出典

2012-01-14 11:18:13 Krzysztof

私はこれをどのようにして行うのか、それを私のバージョンにどのように適用できるのかを知ることはできません。私はあなたのバージョンのjavascriptをコピーしても、まだ良いものはありません。私は "コンテナ"を削除してもあなたのバージョンが動作しているようです。私の仕事のサンプルはreprezentacija.ltで見つけることができます。他の提案があれば、本当に感謝します。 – user1149048

jquery.notificationの '＃info_message'から' position：fixed'ルールを削除しようとしています。css'の代わりに '$（ 'div＃info_message'）を置き換えてください。css（{div：{0}}アニメーション（{div：＃info_message}）;アニメーション（{div：＃info_message}）;アニメーション（{div： 'jquery.notification.js'にあります。 – Krzysztof

[OK]を、ないトータルソリューションを...問題は、CSSは、ページの上部に表示される通知を行うための確か責任があるということです。通知JSでは、あなたは、ライン

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

あなたは

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

に通知が上部に表示されますことを変更する場合がございます限り、あなたはまた、あなたのCSSを確保するようあります

#info_message { 
    position:relative; 
}

position: absoluteがある場合は、通知が他のテキストに表示されます。

通知が表示されて消えてもコンテンツのジャンプがまだあるかもしれませんが、残りのアニメーションはokです。おそらく、スムーズな遷移を得るために高さを拡大/縮小して位置を移動させたり、別のライブラリを使用したりする必要があります。あなたは、通知は次のように表示したい場所あなたのHTMLファイルで

出典

2012-01-14 11:23:44 craigmj

これを試しました。役に立たなかった – user1149048

reprezentacija.ltで作業サンプルを見つけることができます。他の提案があれば、私が本当に感謝します。 – user1149048

jqueryスクリプトを修正してコンテンツをプッシュダウンする方法はありますか？

答えて

関連する問題