"Google Plus Styled Post"
Bootstrap 3.2.0 Snippet by mouse0270

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="[ glyphicon glyphicon-chevron-down ]"></span>
</span>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="panel-google-plus-tags">
<ul>
<li>#Millennials</li>
<li>#Generation</li>
</ul>
</div>
<div class="panel-heading">
<img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" />
<h3>Robert McIntosh</h3>
<h5><span>Shared publicly</span> - <span>Jun 27, 2014</span> </h5>
</div>
<div class="panel-body">
<p>Do people born in 2000 get to choose if they are Generation Y or Generation Z? How do you decide what generation you want to belong to?</p>
</div>
<div class="panel-footer">
<button type="button" class="[ btn btn-default ]">+1</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
body {
background-color: rgb(229, 229, 229);
padding-top: 60px;
padding-bottom: 30px;
}
.panel-google-plus {
position: relative;
border-radius: 0px;
border: 1px solid rgb(216, 216, 216);
font-family: 'Roboto', sans-serif;
}
.panel-google-plus > .dropdown {
position: absolute;
top: 5px;
right: 15px;
}
.panel-google-plus > .dropdown > span > span {
font-size: 10px;
}
.panel-google-plus > .dropdown > .dropdown-menu {
left: initial;
right: 0px;
border-radius: 2px;
}
.panel-google-plus > .panel-google-plus-tags {
position: absolute;
top: 35px;
right: -3px;
}
.panel-google-plus > .panel-google-plus-tags > ul {
list-style: none;
padding: 0px;
margin: 0px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function () {
$('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) {
var $panel = $(this).closest('.panel-google-plus');
$comment = $panel.find('.panel-google-plus-comment');
$comment.find('.btn:first-child').addClass('disabled');
$comment.find('textarea').val('');
$panel.toggleClass('panel-google-plus-show-comment');
if ($panel.hasClass('panel-google-plus-show-comment')) {
$comment.find('textarea').focus();
}
});
$('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) {
var $comment = $(this).closest('.panel-google-plus-comment');
$comment.find('button[type="submit"]').addClass('disabled');
if ($(this).val().length >= 1) {
$comment.find('button[type="submit"]').removeClass('disabled');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro
Bootstrap 4 Social Network Post - TheMashaBrand
Google style login extended (with HTML5 LocalStorage)

Questions / Comments:

Good snippet, but when i tried it on my app the comment form is like disabled.

Jess Phorphun () - 10 years ago - Reply 0

I would need to see your implementation of the snippet to identify why it isn't work. Are you able to share it with me? If not can you replicate the issue on codepen.io or jsfiddle.net

mouse0270 () - 9 years ago - Reply 0

it's just like yours, i didn't change anything. Or should I?

Jess Phorphun () - 9 years ago - Reply 0

Yes, but anything else you add or change to even code around it could make an impact. I will need more information to be able to assist you. It is hard to debug this without it.

mouse0270 () - 9 years ago - Reply 0

http://codepen.io/Jessmoi/p...

Thankyou

Jess Phorphun () - 9 years ago - Reply 0

this example is failing because it isn't loading jquery or bootstrap.

mouse0270 () - 9 years ago - Reply 0

sorry, it loads the jquery and bootstrap now. But the comment form is still disabled.

Jess Phorphun () - 9 years ago - Reply 0

You were loading jquery after you loaded bootstrap. check this out: http://codepen.io/mouse0270...

mouse0270 () - 9 years ago - Reply 0

it's the jquery file then? Thankyou so much, it's working :D

Jess Phorphun () - 9 years ago - Reply 0

Why class are inside bracket [ col-xs-12 col-sm-offset-1 col-sm-5 ]

Jitendra Vyas () - 10 years ago - Reply 0

This is a personal habit of mine that helps me organize classes so for example a font awesome icon that is floated left with bootstrap and a custom color would look like this. [ fa fa-cog ][ pull-left ][ text-purple ].

mouse0270 () - 10 years ago - Reply 0

hi

priya () - 10 years ago - Reply 0

Nice....

Dashkootek () - 10 years ago - Reply 0

Nice work dude.

Dashkootek () - 10 years ago - Reply 0

Amazing, thank you ;)

yo () - 10 years ago - Reply 0

i have a question when i use this snipp with angulare it show the post but when you click inside the add a comment input box it does now open i can you pleas advise

Josh () - 10 years ago - Reply 0

happens to me also, but looks like no one has an answer

thailam () - 10 years ago - Reply 0

I would love to help you, but I do not use angularjs and wouldn't even know what is causing the problem. Sorry.

mouse0270 () - 10 years ago - Reply 0

that good

Huy Kate () - 10 years ago - Reply 0

huy

huy () - 10 years ago - Reply 0

thanks i was working on the same thing you saved alot of work thanks

Wendell () - 10 years ago - Reply 0

You are welcome, glad I could help!

mouse0270 () - 10 years ago - Reply 0

Great!!!

Rilwanrabo () - 10 years ago - Reply 0

Nice but in firefox isn't perfect.

Paradoxon () - 10 years ago - Reply 0

It is now firefox friendly! Thanks for letting me know. Hope this helps!

mouse0270 () - 10 years ago - Reply 0

Awe... The problem with programming this at 2300 hours. haha. I only tested it in chrome. I'll see about patching it up for firefox. It only seems like small issues. Shouldn't be to hard to fix.

Check back tomorrow it should be all patched up.

mouse0270 () - 10 years ago - Reply 0

Now its ok. Thank you, I'll use it. :)

Paradoxon () - 10 years ago - Reply 0

hj

huy () - 10 years ago - Reply 0

Amazing - looking snippet!

maxsurguy () - 10 years ago - Reply 0

Thank you, I just wish I didn't start it at 2300 hours. Didn't finish until around midnight. Trying to get everything as close to perfect as I could.

mouse0270 () - 10 years ago - Reply 0