#StackBounty: #jquery Smooth jump to target div when its inline css is display block

Bounty: 50

I’ve a very long form on which the submit button is initially at the middle and once user scroll past the submit button, the button gonna be sticky.

Now, the form error text is at the end of the form and it is initially hidden, and if got error it will change to display: block; in inline css.

I want to make it when the error is in display: block; , the view window gonna automatically smooth jump to that text (not just jump to top because sometimes the submit button position is above the error), but it is not working.

Any insight?

P/S : I’ve already search and test several codes, but it is not working.

function moveScroller() {
var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                bottom: "4%",
                left: "1%"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: "",
                left: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

$(function() {
  moveScroller();
});

$(".submit-button a").on("click",function(){
    $(".errors").css("display","block");
});

if($('.errors').css('display') == 'block') {
    $('html, body').animate({
        scrollTop: $(".errors").offset().top
            }, 2000);
}
.errors {
  color: red;
  display: none;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo. <br> Mauris mattis, est eu suscipit volutpat, magna purus efficitur quam, ac malesuada mauris mauris vel diam. Etiam sagittis nibh rutrum urna porta, cursus suscipit sem porta. Maecenas suscipit enim nec ipsum venenatis facilisis. Praesent tincidunt molestie nunc, non blandit quam mattis et. Suspendisse in mi interdum, ultrices leo eu, consectetur mi. Ut malesuada mi in urna ultrices aliquam. Praesent in tincidunt mi. Nam quis finibus mauris. <br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam in aliquet arcu. Vivamus quis tellus nec augue congue molestie. Duis a diam nec velit malesuada luctus. Duis pretium consequat sodales. Curabitur posuere nunc eget ipsum condimentum consequat. Fusce suscipit id velit sed sollicitudin. Cras congue a felis vitae semper. Suspendisse faucibus porttitor lectus, non porta arcu tempor vitae. Sed vitae vestibulum justo, id pulvinar massa. Ut non libero non urna rutrum venenatis. Curabitur eleifend interdum justo quis rhoncus. Praesent volutpat leo a egestas elementum. <br> Curabitur at leo fringilla, dignissim turpis at, semper ante. Aliquam eu finibus risus, eget ultrices mauris. Phasellus non neque vel tellus tempus vestibulum rhoncus vitae mauris. In consectetur, justo vel lacinia auctor, lectus nisl pharetra ex, non tempor enim ligula quis justo. Curabitur eu enim tincidunt, rhoncus mauris quis, scelerisque ipsum. Vivamus molestie consectetur turpis eu condimentum. Maecenas tincidunt leo quis vestibulum sagittis. Nulla et diam lobortis metus consequat faucibus. Ut molestie metus quis orci porta, non egestas libero tempus. Ut sagittis, enim in finibus euismod, odio felis egestas arcu, quis sagittis nulla enim vitae arcu. Nullam eu cursus urna. Maecenas quis accumsan dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel suscipit justo, vitae volutpat ipsum. In ut fermentum erat, non pharetra velit.</p>
One or more fields have an error. Please check and try again.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p>


Get this bounty!!!

#StackBounty: #javascript #jquery #datatables #datatables-1.10 DataTables columns, columnDefs and rowCallback HTML5 initialisation

Bounty: 50

I currently have a datatable (ver 1.10.18) loaded with several options with js, but I need to make my code more reusable and I’m trying to initialise my datatable with html5 data-* attributes.

<table id="dataTable" cellspacing="0" width="100%" data-source="ajax.mysource.php">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th><i class="fas fa-low-vision"></i></th>
        </tr>
    </thead>
</table>

my jQuery code looks like:

var dataTable = $('#dataTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: $('#dataTable').data('source'),
    columns: [
        { 'data': 'name' },
        { 'data': 'address' },
        { 'data': 'visible' }
    ],
    order: [[ 1, 'asc' ], [ 0, 'asc' ]],
    responsive: true,
    nowrap: true,
    pageLength: 15,
    lengthChange: false,
    select: 'single',
    columnDefs: [
        {   targets: 0, width: "110px" },
        {   targets: 1, width: "150px" },
        {   targets: 1, render: $.fn.dataTable.render.ellipsis(80) },
        { targets: 2, render: $.fn.dataTable.render.visibilityIcon() }
    ],
    rowCallback: function(row, data, index) {
        if (data.visible == "0") {
            $(row).addClass("notVisible");
        }
    }
});

There are some options in common I would use for every datatable, but it would be great if I can set the columns, columnDefs and rowCallBack directly in my html using the html5 data-* attributes so I can use the same code for different tables, like:

<th data-columns="address" data-column-defs="{targets: 1, width:'150px'}" data-row-callback="function...">Address</th>

I haven’t found anywhere how to use the html5-* attributes other than ordering, sorting and page length.

Is setting this options with html5 actually possible with datatables.js ?


Get this bounty!!!

#StackBounty: #jquery #html #css How to expand answer form

Bounty: 100

I have a very nice layout of a list of comments with response example.

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

<

div class=”snippet-code”>

/**
 * Oscuro: #283035
 * Azul: #03658c
 * Detalle: #c7cacb
 * Fondo: #dee1e3
 ----------------------------------*/
 * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }

 a {
    color: #03658c;
    text-decoration: none;
 }

ul {
    list-style-type: none;
}

body {
    font-family: 'Roboto', Arial, Helvetica, Sans-serif, Verdana;
    background: #dee1e3;
}

/** ====================
 * Lista de Comentarios
 =======================*/
.comments-container {
    margin: 60px auto 15px;
    width: 768px;
}

.comments-container h1 {
    font-size: 36px;
    color: #283035;
    font-weight: 400;
}

.comments-container h1 a {
    font-size: 18px;
    font-weight: 700;
}

.comments-list {
    margin-top: 30px;
    position: relative;
}

/**
 * Lineas / Detalles
 -----------------------*/
.comments-list:before {
    content: '';
    width: 2px;
    height: 100%;
    background: #c7cacb;
    position: absolute;
    left: 32px;
    top: 0;
}

.comments-list:after {
    content: '';
    position: absolute;
    background: #c7cacb;
    bottom: 0;
    left: 27px;
    width: 7px;
    height: 7px;
    border: 3px solid #dee1e3;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
    content: '';
    width: 60px;
    height: 2px;
    background: #c7cacb;
    position: absolute;
    top: 25px;
    left: -55px;
}


.comments-list li {
    margin-bottom: 15px;
    display: block;
    position: relative;
}

.comments-list li:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 0;
}

.reply-list {
    padding-left: 88px;
    clear: both;
    margin-top: 15px;
}
/**
 * Avatar
 ---------------------------*/
.comments-list .comment-avatar {
    width: 65px;
    height: 65px;
    position: relative;
    z-index: 99;
    float: left;
    border: 3px solid #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    overflow: hidden;
}

.comments-list .comment-avatar img {
    width: 100%;
    height: 100%;
}

.reply-list .comment-avatar {
    width: 50px;
    height: 50px;
}

.comment-main-level:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
}
/**
 * Caja del Comentario
 ---------------------------*/
.comments-list .comment-box {
    width: 680px;
    float: right;
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    border-width: 10px 12px 10px 0;
    border-style: solid;
    border-color: transparent #FCFCFC;
    top: 8px;
    left: -11px;
}

.comments-list .comment-box:before {
    border-width: 11px 13px 11px 0;
    border-color: transparent rgba(0,0,0,0.05);
    left: -12px;
}

.reply-list .comment-box {
    width: 610px;
}
.comment-box .comment-head {
    background: #FCFCFC;
    padding: 10px 12px;
    border-bottom: 1px solid #E5E5E5;
    overflow: hidden;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
    float: right;
    margin-left: 14px;
    position: relative;
    top: 2px;
    color: #A6A6A6;
    cursor: pointer;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
    color: #03658c;
}

.comment-box .comment-name {
    color: #283035;
    font-size: 14px;
    font-weight: 700;
    float: left;
    margin-right: 10px;
}

.comment-box .comment-name a {
    color: #283035;
}

.comment-box .comment-head span {
    float: left;
    color: #999;
    font-size: 13px;
    position: relative;
    top: 1px;
}

.comment-box .comment-content {
    background: #FFF;
    padding: 12px;
    font-size: 15px;
    color: #595959;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name.by-author:after {
    content: 'autor';
    background: #03658c;
    color: #FFF;
    font-size: 12px;
    padding: 3px 5px;
    font-weight: 700;
    margin-left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/** =====================
 * Responsive
 ========================*/
@media only screen and (max-width: 766px) {
    .comments-container {
        width: 480px;
    }

    .comments-list .comment-box {
        width: 390px;
    }

    .reply-list .comment-box {
        width: 320px;
    }
}
<link href="https://cdn.bootcss.com/font-awesome/4.0.2/css/font-awesome.min.css" rel="stylesheet">

Comments

  • <!-- Contenedor del Comentario -->
    Agustin Ortiz
    20 minutes ago
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
    </div> </div> <!-- Respuestas de los comentarios --> <ul class="comments-list reply-list"> <li> <!-- Avatar -->
    <!-- Contenedor del Comentario -->
    Lorena Rojero
    10 minutes ago
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
    </div> </li> <li> <!-- Avatar -->
    <!-- Contenedor del Comentario -->
    Agustin Ortiz
    10 minutes ago
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
    </div> </li> </ul> </li> <li>
    <!-- Contenedor del Comentario -->
    Lorena Rojero
    10 minutes ago
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
    </div> </div> </li> </ul> </div>