Hinzufügen von Haftnotizen hintereinander

Vielen Dank im Voraus, ich versuche klebrige Bilder hintereinander, wie in der folgenden Abbildung gezeigt, aber ich bekomme das Ergebnis als eines unter dem anderen. Die zuletzt hinzugefügte Haftnotiz sollte oben sein, alle anderen Notizen sollen hinter den neuesten stehen. Jede Hilfe wäre zu erwarten.Hinzufügen von Haftnotizen hintereinander

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<style> 
 
.pink{ 
 
\t background:#f05f9d; 
 
\t border:1px solid #f05f9d; 
 
\t color:#fff; 
 
\t font-weight:600; 
 
} 
 
.pink:hover{ 
 
\t background:#f05f9d; 
 
\t border:1px solid #f05f9d; 
 
\t color:#fff; 
 
\t font-weight:600; 
 
} 
 
.pink-button{ 
 
\t padding: 10px 11px; 
 
\t border-radius: 14px; 
 
\t font-weight: 600; 
 
\t font-size: 16px; 
 
} 
 
.sticky { 
 
\t margin: 0; 
 
\t padding: 8px 24px; 
 
\t width:200px; 
 
\t height:200px; 
 
\t font-size: 1.4em; 
 
\t border:1px #E8Ds47 solid; 
 
\t -moz-box-shadow:0px 0px 6px 1px #333333; 
 
\t -webkit-box-shadow:0px 0px 6px 1px #333333; 
 
\t box-shadow:0px 0px 6px 1px #333333; 
 
\t background: #fefdca; 
 
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
 
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
 
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
} 
 
.sticky p { 
 
\t text-align: center; 
 
} 
 
.sticky textarea { 
 
\t width:160px; 
 
\t height:170px; 
 
\t background: #fefdca; 
 
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
 
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
 
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t border-bottom:none !important; 
 
} 
 
.sticky ol { 
 
\t margin: 12px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="sticky"> 
 
    <textarea placeholder="Type the problem here..."></textarea> \t \t \t \t 
 
</div><br/> \t \t 
 
<div id="spin_btn_div"> 
 
    <div class="btn-container" style="margin-bottom:0px;position:absolute;margin-left:40px;"> 
 
     <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
 
\t </div> 
 
</div> 
 
</body> 
 
<script> 
 
$('#addProblem').click(function(){ 
 
\t $('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 
 
}); 
 
</script> 
 
</html>

Quelle

2017-10-18 Ganesh Putta

Versuchen Sie, '.sticky' als' position: absolute; 'zu setzen, dann' position: relative; 'auf ihren Eltern, danach mit ihren' z-index' und 'left/right' Eigenschaften. – Krusader

Probieren Sie diese https://jsfiddle.net/x7cqphq9/ – Krusader

Hmm, perfekt ..., Aber es ist wie eins über dem anderen hinzufügen, ich versuche, wie eins nach dem anderen wie oben in Bild zu bekommen ...! –

Position Sie klebrig und legen Sie sie in einen Behälter. Weisen Sie dann den Wert left basierend auf der Anzahl .sticky zu. Überprüfen Sie das folgende Snippet.

$('#addProblem').click(function() { 
 
    $('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 
 
    var stickyCount = $('.sticky').length - 1; 
 
    $('.sticky').each(function() { 
 
    $(this).css('left', stickyCount * 100); 
 
    stickyCount--; 
 
    }); 
 
});

.pink { 
 
    background: #f05f9d; 
 
    border: 1px solid #f05f9d; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.pink:hover { 
 
    background: #f05f9d; 
 
    border: 1px solid #f05f9d; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.pink-button { 
 
    padding: 10px 11px; 
 
    border-radius: 14px; 
 
    font-weight: 600; 
 
    font-size: 16px; 
 
} 
 

 
.sticky { 
 
    margin: 0; 
 
    padding: 8px 24px; 
 
    width: 200px; 
 
    height: 200px; 
 
    font-size: 1.4em; 
 
    border: 1px #E8Ds47 solid; 
 
    -moz-box-shadow: 0px 0px 6px 1px #333333; 
 
    -webkit-box-shadow: 0px 0px 6px 1px #333333; 
 
    box-shadow: 0px 0px 6px 1px #333333; 
 
    background: #fefdca; 
 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381)); 
 
    background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0); 
 
    background: linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
} 
 

 
.sticky p { 
 
    text-align: center; 
 
} 
 

 
.sticky textarea { 
 
    width: 160px; 
 
    height: 170px; 
 
    background: #fefdca; 
 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381)); 
 
    background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0); 
 
    background: linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    border-bottom: none !important; 
 
} 
 

 
.sticky ol { 
 
    margin: 12px; 
 
} 
 

 
.sticky-container { 
 
    position: relative; 
 
    min-height: 250px; 
 
} 
 

 
.sticky { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="sticky-container"> 
 
    <div class="sticky"> 
 
    <textarea placeholder="Type the problem here..."></textarea> 
 
    </div> 
 
</div><br/> 
 
<div id="spin_btn_div"> 
 
    <div class="btn-container"> 
 
    <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
 
    </div> 
 
</div>

Quelle

2017-10-18 10:34:01

Vielen Dank ... aber mehrere Haftnotizen werden hinzugefügt, wenn ich zum dritten Mal auf den Button zum Hinzufügen klicke. –

Ehrfürchtiger Bruder ..! Ich habe nur ein paar Änderungen in Ihrem Code vorgenommen, schließlich funktioniert es, Sie verdienen wirklich eine Abstimmung ...! –

@GaneshPutta Hoffe, dass aus Ihrem Code-Snippet chaotisch folgt. –

Hier ist meine Version

HTML:

<section class="sticky-wrapper"> 
    <div class="sticky"> 
    <textarea placeholder="Type the problem here..."></textarea>    
    </div> 
</section> 
<br/> 
<div id="spin_btn_div"> 
    <div class="btn-container"> 
    <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
</div>

CSS

.sticky-wrapper { 
    position: relative; 
    min-height: 300px; 
} 

.pink{ 
    background:#f05f9d; 
    border:1px solid #f05f9d; 
    color:#fff; 
    font-weight:600; 
} 

.pink:hover{ 
    background:#f05f9d; 
    border:1px solid #f05f9d; 
    color:#fff; 
    font-weight:600; 
} 
.pink-button{ 
    padding: 10px 11px; 
    border-radius: 14px; 
    font-weight: 600; 
    font-size: 16px; 
} 
.sticky { 
    position: absolute; 
    margin: 0; 
    padding: 8px 24px; 
    width:200px; 
    height:200px; 
    font-size: 1.4em; 
    border:1px #E8Ds47 solid; 
    -moz-box-shadow:0px 0px 6px 1px #333333; 
    -webkit-box-shadow:0px 0px 6px 1px #333333; 
    box-shadow:0px 0px 6px 1px #333333; 
    background: #fefdca; 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
    background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
    background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
} 
.sticky p { 
    text-align: center; 
} 
.sticky textarea { 
    width:160px; 
    height:170px; 
    background: #fefdca; 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
    background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
    background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    border-bottom:none !important; 
} 
.sticky ol { 
    margin: 12px; 
}

JavaScript:

var zIndex = 0; 
var currentXPosition = 0; 

$('#addProblem').click(function(){ 

    zIndex++; 

    $('.sticky-wrapper').append('<div class="sticky" style="z-index: ' + zIndex +'; left: 0px"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 


    $(".sticky-wrapper").find(".sticky:not(:last-child)").each(function (i, item) { 
     var itemLeftPos = parseInt(item.style.left || 0); 
     currentXPosition = 100; 
     item.style.left = (itemLeftPos + currentXPosition) + "px"; 
    }); 

});

Hinweis: Ich habe mit Klasse .sticky-wrapper Wrapper-Element hinzugefügt. Link to JSFiddle

Quelle

2017-10-18 12:29:03 Krusader

Hinzufügen von Haftnotizen hintereinander

Antwort

Verwandte Themen