Tumblr Style Userhovercard

Tumblr style UserHoverCard

Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.

FIDDLE

.summary {
    margin: -50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 0;
}
.summary-mask {
    margin: 50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 1;
}
.loaded .summary-mask {
    z-index: -1;
}

HTML

<div class="the-container">
    <div class="summary-mask"></div>
    <div class="summary" data-id="100"> <a href="http://kraigo.tumblr.com/" class="profile-ava"></a>

        <div class="user-container"></div>
    </div>
</div>

JS

var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> <a href="http://kraigo.tumblr.com/" class="profile-action">Follow</a> <p class="profile-nick"> <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) {
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.the-container').addClass('loaded');
                });
            }
        });

    }

    function hideProfileTooltip() {
        $('.the-container').removeClass('loaded');
    }
    $('.the-container').hover(function (e) {

        var id = $(this).find('.summary').attr('data-id');
        showProfileTooltip($(this), id);

    }, function () {
        hideProfileTooltip();
    });
});

Django get_fields but not foreignkey fields

Just check the class of the field using isinstance():

simple_field_names = [field.name for field in Info._meta.fields
                             if field.name != 'id' and
                                not isinstance(field, models.ForeignKey)]

If you want to get list of text fields only then you can pass a list of required classes to isinstance() function:

text_field_names = [field.name for field in Info._meta.fields
                    if isinstance(field, (models.CharField, models.TextField))]

Grid system extra space right side

I solved the problem as follows.

CSS:

.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin:10px;
}
.posts-holder {
  position:relative;
margin: 10px auto;
}

JavaScript

$( function() {
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

});

Working DEMO

integers and special chars in AngularJS

Your pattern must be like :-

var pattern = /^[a-zA-Z ]+$/g;

integers and special chars in AngularJS

Your pattern must be like :-

var pattern = /^[a-zA-Z ]+$/g;

Bootstrap popup when double click a table row

Try this code:

$('tr').on('dblclick', function() {
    $('#addModal').modal('show');
});

Since modal is already initialized by data attibutes on the button (data-target="#addModal"), you just need to bind dblclick event and show modal with .modal('show') method.

Demo: http://plnkr.co/edit/J0SuQdy00dcf9baE7xJu?p=preview

---

Related Topics