Contact

by matmat

HTML

<div id="Relations">
    <div class="Title h40">
        <div class="wrapper1">
            <div class="helper"></div>
            <div class="imgcontent">
                <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
            </div>
            <div class="imgcontent2">Mon actualité</div>
        </div>
        <div class="wrapper2">
            <div class="helper"></div>
            <div class="imgcontent3">
                <img src="http://www.junkst.com/Images/Icones/arrowdown.png" alt="Junkst" title="Junkst" />
            </div>
        </div>
    </div>
    <div class="publiwrapper">
        <div class="publi1 h30">Le 22/03/2014</div>
        <div class="publi2 lh30">Publication d'une annonce: Vend "objet" à 22€</div>
        <div class="publi3 h30"> <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 lh30">wwww.monsite.fr</div></a>

        </div>
        <div class="publi1-1 h30 lh30 w30 pospubli1-1">-</div>
        <div class="publi1-1 h30 lh30 w30 pospubli1-2">+</div>
        <div class="publi1-3 h30 lh30">Annonce</div>
        <div class="publi1-4 pospubli1 h30">
            <img src="http://www.fniktank.netai.net/Images/Icones/gplus_ic.png" class="h30" />
        </div>
        <div class="publi1-4 pospubli2 h30">
            <img src="http://www.fniktank.netai.net/Images/Icones/facebook_ic.png" class="h30" />
        </div>
        <div class="publi1-4 pospubli3 h30">
            <img src="http://www.junkst.com/Images/Icones/twitter_ic.png" class="h30" />
        </div>
        <div class="publi1-5 h40 w40 lh40" id="showcomm">
            <img src="http://www.fniktank.netai.net/Images/Icones/commentaires.png" />
        </div>
        <!-- Fin publiwrapper-->
    </div>
    <div id="mycommdiv" class="publiwrapper publiovf">
        <div class="commwrapper">
 ...

CSS

html, body {
    /* suppression des éventuels styles par défaut */
    margin:0;
    padding:0;
    font-size:100%;
    /* on spécifie un repère pour le calcul des hauteurs */
    height:100%;
    font-family:Georgia;
    padding:10px;
}
a {
    text-decoration:none;
    color:#900;
}
#Relations {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    width:354px;
    box-shadow: 1px 2px 8px #808080;
    border:1px solid grey;
    padding-bottom:1%;
}
.h20 {
    height:20px;
}
.h30 {
    height:30px;
}
.w30 {
    width:30px;
}
.w40 {
    width:40px;
}
.lh30 {
    line-height:30px;
}
.h40 {
    height:40px;
}
.Title {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    background:whitesmoke;
    box-sizing:border-box;
}
.helper, .imgcontent, .imgcontent2, .imgcontent3 {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.helper {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}
.imgcontent {
    /* des dimensions au hasard */
    height:70%;
    margin-left:2%;
    /* on le rend visible */
}
.imgcontent2 {
    margin-left:2%;
    color:#808080;
}
.imgcontent3 {
    /* des dimensions au hasard */
    height:50%;
    right:0;
    cursor:pointer;
    /* on le rend visible */
}
.imgcontent img {
    height:100%;
}
.imgcontent3 img {
    height:100%;
}
.wrapper1 {
    width:85%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.wrapper2 {
    width:10%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.publiwrapper {
    position:relative;
    width:90%;
    margin:auto;
    padding:5%;
    background:'';
    margin-top:2%;
}
.publi1 {
    position:relative;
    line-height:200%;
    border:1px solid grey;
    padding-left:10%;
    border:1px solid gainsboro;
    color:grey;
 ...

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