Essai boite commentaire

by matmat

HTML

<script src="http:\\fonts.googleapis.com\css?family=Italianno"></script>
<link href='http://fonts.googleapis.com/css?family=Italianno' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<div class="publiwrapper">
    <div class="publi1">Le 22/03/2014</div>
    <div class="publi2">Publication d'une annonce: Vend "objet" à 22€</div>
    <div class="publi3"> <a href=""><div class="publi3-1">
    <span class="helper"></span>
    <img src="http://www.fniktank.netai.net/Images/Icones/Link.png" height="20" />
        </div> 
        <div class="publi3-2">wwww.monsite.fr</div></a>

    </div>
    <div class="publi1-1">-</div>
    <div class="publi1-2">+</div>
    <div class="publi1-3">Annonce</div>
    <div class="publi1-4" style="left:90px;top:2px;border:none;">
        <img src="http://www.fniktank.netai.net/Images/Icones/gplus_ic.png" height="20" />
    </div>
    <div class="publi1-4" style="left:65px;top:2px;border:none;">
        <img src="http://www.fniktank.netai.net/Images/Icones/facebook_ic.png" height="20" />
    </div>
    <div class="publi1-4" style="left:40px;top:2px;border:none;">
        <img src="http://www.fniktank.netai.net/Images/Icones/twitter_ic.png" height="20" />
    </div>
    <div class="publi1-5" id="showcomm">
        <img src="http://www.fniktank.netai.net/Images/Icones/commentaires.png" height="20" />
    </div>
    <div class="publi1-5" style="top:'';bottom:5px;">
        <img src="http://jsfiddle.net/img/logo.png" height="20" />
    </div>
</div>
<div id="commdiv" class="publiwrapper publiovf" style="display:block;">
    <div class="commwrapper">
            <div class="mycomm1">
                <div class="mycomm1-1">
<span class="helper"></span>
                    <img src="http://www.fniktank.netai.net/Images/Icones/Link.png" height="20" />
                </div>
                <div class="mycomm1-2"><textarea id="ajoutCOMMENTcomment"></textarea></div>
 ...

CSS

.publiwrapper {
    position:relative;
    width:210px;
    padding:12px;
    font-size:11px;
    font-family:calibri;
    margin-top:5px;
}
.publiovf {
    border:none;
}
#commdiv {
    display:none;
}
.commwrapper {
    width:210px;
    border:1px solid gainsboro;
    margin-top:-10px;
    padding-bottom:10px;
}
.publi1 {
    position:relative;
    height:25px;
    line-height:25px;
    border:1px solid grey;
    padding-left:25px;
    border:1px solid gainsboro;
    color:grey;
    padding-top:5px;
    font-size:10px;
}
.publi1-1 {
    position:absolute;
    top:25px;
    left:2px;
    height:25px;
    line-height:25px;
    width:25px;
    background:whitesmoke;
    border:1px solid gainsboro;
    text-align:center;
    vertical-align:center;
    cursor:pointer;
    border-radius:20px;
    color:#FF7000;
}
.publi1-2 {
    position:absolute;
    top:25px;
    left:205px;
    height:25px;
    line-height:25px;
    width:25px;
    background:whitesmoke;
    border:1px solid gainsboro;
    text-align:center;
    vertical-align:center;
    cursor:pointer;
    border-radius:20px;
    color:#FF7000;
}
.publi1-3 {
    position:absolute;
    top:0px;
    left:115px;
    height:25px;
    line-height:25px;
    width:85px;
    background:gainsboro;
    text-align:center;
    color:#FF7000;
    border:1px solid grey;
    font-family:'italianno';
    font-size:20px;
}
.publi1-4 {
    position:absolute;
    top:60px;
    left:222px;
    height:20px;
    line-height:20px;
    width:20px;
    background:white;
    border:1px solid gainsboro;
    text-align:center;
    vertical-align:center;
    cursor:pointer;
}
.publi1-5 {
    position:absolute;
    bottom:30px;
    left:209px;
    height:20px;
    line-height:20px;
    width:20px;
    background:white;
    border:1px solid gainsboro;
    text-align:center;
    vertical-align:center;
    cursor:pointer;
}
.publi1-4 img {
    height:20px;
    width:20px;
    opacity:0.5;
}
.publi1-5 img {
    height:20px;
    width:20px;
   ...

JavaScript

$(document).on('click', '.comm3', function () {
    var seldiv = $(this).attr("data-idsel");

    var nbdiv = $(this).attr("data-nb");
    var valcurdiv = parseInt(seldiv) + 1;
    var curdiv = '#co_' + seldiv;
    var nextdiv = '#co_' + valcurdiv;

    if (nbdiv != seldiv) {
        $(this).attr("data-idsel", valcurdiv);
        $(curdiv).hide('slow');
        $(nextdiv).show();
    }
});
$(document).on('click', '#showcomm', function () {

    $("#commdiv").toggle("slow", function () {
        // Animation complete.
    });
});

	$( '#ajoutCOMMENTcomment' ).on( 'keydown', function(event) {
		$(this).css('height','auto');
        $(this).height(this.scrollHeight);
		if(event.which == 13) {
		$('#submitformcomment').trigger('submit');
		event.preventDefault();
		return false;
		}
	});