放置新的div /移動舊格子

我有一些吐司通知。我給了他們一個「絕對」的位置，並希望他們把自己放在自己的位置上。放置新的div /移動舊格子

新敬酒應該把自己以上已經存在的。那個舊的將會向下移動。

所以這是我重要的事業部：

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

和創建後我使用此代碼對一些動畫和摧毀：

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

這裏是我所期待的

圖片

來源

2017-04-26 peterHasemann

這是個問題/問題？發生了什麼？請發佈一個複製問題的工作片段 –

$（'parent_el'）。prepend（'// stuff to prepend'）也許 - http://api.jquery.com/prepend/ – ggdx

使用'document.body.appendBefore（ wrapperDiv，document.body.firstChild）'而不是'document.body.appendChild（wrapperDiv）;'https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore – Dwadelfri

看看這個JSBIN。

您可以使用Bootstrap的網格系統使事情變得更容易一些。你絕對不應該使用絕對佈局，它會使響應式網頁變得不可能 - 看看調整瀏覽器大小時會發生什麼。

你會想看看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>

你正在尋找的方法是prepend()

來源

2017-04-26 14:04:46

請注意，prepend（）atm是實驗性的，因爲該頁面明確指出並且可能不適用於跨瀏覽器。檢查http://caniuse.com/#search=prepend（） – yezzz

@yezzz啊，你是對的 - 一定是錯過了。 Polyfill for IE9 + –

是啊，還是jquery ...自OP已經使用它 – yezzz

放置新的div /移動舊格子

回答

相關問題