新しいdivを上に配置/古いdivを下に移動

私はトーストの通知を受けています。私は彼らに「絶対的」な立場を与え、自分たちで自分自身を置くことを望んでいます。新しいdivを上に配置/古いdivを下に移動

新しいトーストは、すでに存在するものをより上にと置き換える必要があります。古いものは下に移動します。

だからこれは私の重要本部れる：ここで私は
を探しています何の絵だ

var thisToast = this.toastCounter - 1; // get the toast Id $(document).find("#toast_" + thisToast) .fadeIn(750) .delay(3000) .fadeOut(750, function() { $(this).remove(); // Destroy the toast });

：

CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) { var wrapperDiv = document.createElement("div"); var width = 350; wrapperDiv.id = "toast_" + this.toastCounter; wrapperDiv.style.position = "absolute"; wrapperDiv.style.left = "50%"; wrapperDiv.style.display = "none"; wrapperDiv.style.width = width + "px"; wrapperDiv.style.height = "100px"; wrapperDiv.style.border = "2px solid " + borderColor; wrapperDiv.style.borderRadius = "10px"; wrapperDiv.onclick = function() { wrapperDiv.remove(); // Destroy the toast by clicking on it } document.body.appendChild(wrapperDiv); }

と、それを作成した後、私はいくつかのアニメーションのためにこのコードを使用し、それを破壊します

出典

2017-04-26 peterHasemann

質問/問題があるprepend()？何が起こっていますか？あなたの問題を再現する作業スニペットを投稿してください –

$（ 'parent_el'）。prepend（ '// prepend'）多分 - http://api.jquery.com/prepend/ – ggdx

'document.body.appendBefore 'document.body.appendChild（wrapperDiv）;の代わりに' wrapperDiv、document.body.firstChild） '' https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore – Dwadelfri

チェックアウト：JSBIN。

Bootstrapのグリッドシステムを使用すると、少し簡単にできます。あなたは本当に絶対レイアウトを使うべきではありません。それは応答可能なWebページを不可能にします。ブラウザのサイズを変更するとどうなるかを見てください。

Element APIをご覧ください。

var container = document.querySelector('div.container'); 
var newDiv = document.createElement('div'); 

newDiv.innerHTML = "HELLO WORLD"; 
container.prepend(newDiv);

および添付HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script> 

    <div class="container"> 
    hey 
    </div> 

    </body> 
</html>

あなたが探している方法である

出典

2017-04-26 14:04:46

prepend（）atmはそのページがはっきりと述べているように実験的であり、クロスブラウザでは動作しないかもしれません。 http://caniuse.com/#search=prepend（）を確認してください – yezzz

@yezzzああ、あなたは正しい - それを逃している必要があります。 Polyfill for IE9 + –

ええ、またはjquery ... OPは既にそれを使用しているので – yezzz

新しいdivを上に配置/古いdivを下に移動

答えて

関連する問題