On my code I have a area where I can preview any code as I am typing. The problem I am having is when I select some text and then click on button either bold, italic, pre. The preview area does not display same code straight away.
Question How can I make sure that the preview area when I select some text and then click on a button then it will display correct code below straight away. At the moment just displays plain text.
Live Example
Codepen Code View
Codepen Full View
Script
<script type="text/javascript">
$('#code_view').on('click', function(e) {
var code = $('#editable').clone();
$('#preview').html(code);
});
$('#editable').keyup(function(){
$('#code_view').trigger('click');
});
$('#editable').each(function(){
this.contentEditable = true;
});
</script>
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Title" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-wmd">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<button id="bold" class="btn btn-default">B</button>
<button id="italic" class="btn btn-default"><i>I</i></button>
<button id="pre" class="btn btn-default">{}</button>
<button id="code_view" class="btn btn-default">Code View</button>
</div>
<div class="pull-right">
</div>
</div>
</div>
<div class="panel-body">
<div id="editable"></div>
</div><!-- .panel-body -->
</div><!-- .panel -->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div id="preview"></div>
</div>
</div>
</div><!-- .container -->
Seeing at the code you have done everything right. For achieving the result instantly on click of the button you need to call the code_view click function on the functionality buttons.
Updated code:
Code Pen
Hope this helps you.
-Help :)
Related
Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.
Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.
Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span> Get Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.
Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.
http://jsfiddle.net/fFLq4/
Add a couple element id's to your elements:
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" id="loginTxtBox" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
And add the javascript function to listen for the keypress:
var textBox = document.getElementById("loginTxtBox");
textBox.onkeypress=function(textBox){
if(this.value.length >= 5)
{
document.getElementById("loginButton").className = "button tiny";
}
else
{
document.getElementById("loginButton").className = "button tiny disabled";
}
};
This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.
If I understand this correctly, you would like to show the login form only if the user clicks on the Login Link.
To achieve this, I would suggest moving the links outside the and use any of these (toggle/show/slide) in jQuery to show it on click.
Here is the modified HTML:
<form id="loginForm" data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
</form>
<div class="row">
<div class="large-12 columns text-center">
<a id="login" href="#" class="button tiny disabled">Log in</a>
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
And here is a working fiddle of how to show/hide the login form:
http://jsfiddle.net/9C4s7/
The commented line in the js toggles the slide (clicking the link will show the form, clicking it again will hide it). The active line will only make it slide down once clicked. So, you go ahead and choose whichever works best for you!