I have tweets and commenting system like this
This is the code block for one set of tweet and its comments and commenting box:
<li class="storyBlock">
<div>
<div class="grid userImageBlockL">
<div class="imgMedium"> <img width="44" height="44" alt="image" src="/bakasura1/files/images/medium/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockL">
<div class="userContentHeader">
<h5> Harsha Vantagudi <span class="storyMessage">Testing the Seconds</span></h5>
<span class="user-status-time">6 hours ago</span> <span>Comment Delete</span> </div>
<ul class="commentList">
<li class="commentBlock">
<div>
<div class="grid userImageBlockS">
<div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockS alpha omega">
<h5> Harsha Vantagudi <span class="storyMessage">Write your comment...</span></h5>
<span class="user-status-time">27 minutes ago</span> <span>Comment Delete</span></div>
<div class="clear"></div>
</div>
</li>
<li class="commentBlock">
<div>
<div class="grid userImageBlockS">
<div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockS alpha omega">
<form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
<div style="display: none;">
<input type="hidden" value="POST" name="_method">
</div>
<input type="hidden" id="StatusMessageReplyPid" value="67" name="data[StatusMessageReply][pid]">
<input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]">
<input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]">
<textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">Write your comment...</textarea>
<input type="submit" name="" value="Comment">
</form>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
I am a little confused as to how to create an Ajax from submit when the comment is saved the new comment should stack top to bottom. Since there is no unique tweet identifier. I am not sure how to address this problem.
Can some one recommend an easy solution for the same?
http://demos.99points.info/facebook_wallpost_system/
nice demo and tutorial there
Did you try this plugin ,
http://timeago.yarp.com/
this should help
Related
I am using a Templatemo template and attempting to get the Email Form Submission to function.
(Signaturetables.com is the site)
I have downloaded the correct contact.php form from templatemo and followed instructions, and modified it all accordingly to info#signaturtables.com.
Can anyone see what is my problem?
I have contacted GoDaddy regarding this. They are hosting Signaturetables.com. They say they cannot even see emails being sent from the mail area.
They are suggesting the error is then on the php page.
This is over my head and I need help!
Thanks to anyone who can shed light on this for me!
HERE IS MY INDEX.HTML PAGE FORM SUBMISSION CODE:
<div class="templatemo_lightgrey" id="templatemo_contact">
<div class="templatemo_paracenter">
<h2>Contact us</h2></div>
<div class="clear"></div>
<div class="container">
<div class="templatemo_paracenter">
Please feel free to call or e-mail for inquiries.
</div>
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="templatemo_maps">
<div class="fluid-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2965.3996287541227!2d-91.66233118455531!3d41.99169827921325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87e4f0b4219cc027%3A0xe64b0645b30a6bc!2sSignature+Santiago!5e0!3m2!1sen!2sus!4v1479248142906" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="contact.php" method="post" id="form" class="contact-form">
<div class="form-group">
<input name="cf_name" type="text" class="form-control" id="fullname" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="cf_email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><button type="button" class="btn btn-primary">Send Message</button></div>
</form>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="cf_message" rows="10" class="form-control" id="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I need two horizontal checkboxes in one page:
<div data-role="content">
<div data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies">
<legend>Hobbies (separates by ',')</legend>
</fieldset>
</div>
<div id="language" data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Languages (ordered by native, second lang...)</legend>
<input id="eng" type="checkbox">
<label for="eng">English</label>
<input id="zho" type="checkbox">
<label for="zho">国语</label>
<input id="jpn" type="checkbox">
<label for="jpn">日本語</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" id="revert">Revert</a>
</div>
<div class="ui-block-b">
<input value="Update" type="submit">
</div>
</div>
</div>
One image is more than a thousand words. As you see, two checkboxes' totally messed up:
Old fashion table tag works!!!
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG
I am trying to make dropdown login form in navigation bar using Bootstrap 3, but it does not look good - labels and inputs are wider than drop down ... panel.
How I can change drop down form width using col-* Bootstrap classes?
Here is the code (http://getbootstrap.com/css/#forms-horizontal):
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Sign in <b class="caret"></b>
<div class="dropdown-menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</li>
</ul>
Thanks in advance.
You could add padding to the .dropdown-menu and change your columns to col-lg-11
Example: http://bootply.com/110118
I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue