Dynamically add ckeditor textarea using javascript

CKEditor textarea add dynamic using javascript

CKEditor textarea add dynamic using javascript

Are you looking for the solution of the following questions than here is the solution to add dynamic CKEditor textarea.

How to add CKEditor Textarea runtime using javascript?
How to add CKEditor Textarea Dynamically using javascript?
How to add CKEditor Textarea runtime using jQuery?
How to add CKEditor Textarea Dynamically using jQuery?
CKEditor textarea add dynamic using javascript.

When you are working with CMS or webpage where you need the functionality to do “Add More” which will add new textbox, checkbox, radio button or select dropdown than you can do it easily. Even you can add simple textarea as well with normal code but when you need to insert CKEditor at runtime than may be you stuck.

I am here to help you, Simple code to add CKEditor textarea dynamically at runtime without refresh the page. You can use this code to add CKEditor textarea at runtime.

 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="../includes/ckeditor/ckeditor.js"></script>
 <script src="../includes/ckeditor/adapters/jquery.js"></script>
 
 var counter = 1;
 
 function AddMoreTextEditor()
 {
   var newtxtname = 'txtNew' + counter;
   var newTextArea = '<textarea rows="10" cols="50" class="ckeditor" name="' + newtxtname + '" id="' + newtxtname + '"></textarea>';
   $("#divid").html(newTextArea);
   $('textarea#' + newtxtname).ckeditor();
   counter++;
 }

please set “#divid” which is the placeholder here. You need to set the path of “ckeditor.js” and “jquery.js” as per your project. In above javascript code there is a function named “AddMoreTextEditor” to add new CKEditor textarea. Call this function from your “Add More” Link.

Please let me know if you need more help.

Incoming search terms:

  • textarea javaScript

How to know browsing mobile device or identify mobile device using javascript or jquery

 

If you have below question in your mind than this article is very helpful for you.

How to know that web-site open in mobile device or in computer?
Can I run some specific code when its open in mobile device only?
How to know browsing mobile device or identify mobile device using javascript or jquery?

Its long time but I went to Malaysia for my vacation, which is really an awesome country and enjoy lots in Malaysia, having very good experience in Malaysian airline(but thank god that i did not travel in missing Malaysian aircraft MH370) and top tourist places in Malaysia. If you planning to visit Malaysia than definatily visit top 10 tourist places of Malaysia which is Cameron Highlands, Georgetown Inner City, Taman Negara, Pulau Tioman, Mount Kinabalu, Petronas Twin Towers, Langkawi, Perhentian Islands, Sepilok Rehabilition Centre, Mulu Caves and Genting Highland

Now, let’s come to the topic of mobile device and web-site issue, recently I am working on the web-site where we have one page with the apps, this page include description and hyperlink of android apps for android devices, apple apps for iphone and ipads. For navigation on this page there is one nice icon in footer menu of my web-site. This is working fine with the web-site. But my client needs to do something new, so when user click on this link and its android device or ios device than its not open the apps page but bring you directly to the apps store, and user can directly install apps from apps store. To implement this we need to know the user’s device and as per that we need to set the link.

var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
 
if(isMobile.Android())
{
   // Your Code
}
 
if(isMobile. iOS ())
{
   // Your Code
}

Above javascript code is useful to know that user browsing from mobile device or from the computer. its also useful to know that which mobile device is used for browsing the web-site. Please let me know if you have any question regarding the browsing device and compatibility of browsers and all mobile devices.

Open external links in new tab or open external links in new window automatically using jquery

 

How to open external links in new tab or how to open external links in new window automatically using jquery?

Today, when I am working with the link building for my blog than suddenly one new thought come in my mind that when we include external links in our web-site, and readers redirect on those links from our web-site. This way we can loose the readers from our web-site and may be they will not come back from that.

One way to keep the readers on our web-site is to open all the external links in new tabs. Or open all the external links in new windows. This means open external link in separate tab or open external link in separate window.
There are two way to fix this issue, either you can do it automatically using the jquery or you can give target _blank in all <a> tags in the content of each web page as well as all the links in your website navigation.

I don’t think that I need to explain regarding how to open external links in new tab or how to open external links in new window in <a> tag.
You can do it automatically using jquery code which is as below.

//Open external links in new tab or open external links in new window automatically using jquery
 
$(function($){
    $('a[href^="http://"]')
        .not('[href*="freelancephpdevelopment.com "]')
        .attr('target','_blank');
});

You need to add this code in your page in script tags, make sure that you change the domain name or url which is “freelancephpdevelopment.com” in this code with your domain name or url. Please let me know if you need more help to fix this type of issues.

remove first li element or append li element in ul li

How to remove first element from ul li options

When we are working with the <ul> and <li> then some time we need to remove the first element or we need to insert the <li> element in the current <ul> <li> list. some time you think that its a big job but actually its really very easy using jQuery. below is the option where you can insert the new <li> element and when you insert new <li> element then its remove the first <li> element, this way its maintain the current number of <li> elements.

 
Code 1
 
<div id="part2" class="content_flash_area" style="width:580px; height:518px; overflow-y: scroll;overflow-x:hidden;">
 <ul>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer India</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Freelance PHP Developer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelance Programmer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelance Developer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer USA</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer UK</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer Australia</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Wordpress Freelancer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Freelance PHP Developer</a></li>
 </ul>
</div>
 
Code 2
 
<script type="text/javascript">
function ChangeData()
{
    $("#part2 ul").append("<li><a href="http://www.freelancephpdevelopment.com">Wordpress Freelancer India</a></li>");			
    var counter = $("#part2 ul li").size();
    if(parseInt(counter)>10)
  	 $('#part2 ul li:first').remove();
    }
}
</script>

Here, Code 1 is your div where you set up the <ul> and <li> elements. while in code 2 its show you how to insert new <li> elements, if you see then <li><a href=”http://www.freelancephpdevelopment.com”>Wordpress Freelancer India</a></li> is added in the append function which will insert new <li> after last <li> element.

if you need to count the <li> elements then its also simple, you can see that i count the elements and if its more then 10 elements then remove the first elements. some time work is very simple but we make it complicated.

How to allow only numeric numbers in HTML input box using jQuery

How to allow only numeric numbers in HTML input box using jQuery?
jquery validation only digits

Jquery is very easy and helpful for all type of validation, if we need to allow only digits in the textbox or we need to allow only numeric numbers in the HTML input box then its really very easy using the jquery. below is the code through which its possible to allow only numbers in the textbox.

<script language=”javascript”>
$(document).ready(function()
{

$.validator.addMethod(“numbersonly”, function(value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/i.test(value);
}, “You can insert only numeric numbers”);
$(“#comment_form”).validate();

});

</script>

now give the class name “numbersonly” to the textbox where you want to apply this validation. and you can change the message where i wrote “You can insert only numeric numbers” its the error display message.

 

 

special characters validation using jquery

special characters validation using jquery

Jquery Validation for special characters

if you are working with the PHP or ASP and you wan’t allow user to input the special character in the textbox or in the text area then you need to do validation for the special characters. using jquery its really easy to implement the validation of the special characters. use below jquery code in your web-page if you won’t allow user to input the special characters.

 

<script language=”javascript”>

$(document).ready(function()
{
$.validator.addMethod(“noSpecialChars”, function(value, element) {
return this.optional(element) || /^[a-z0-9.-\_]+$/i.test(value);
}, “Special Character Are not Allowed, Please remove it to submit the Page”);
$(“#yourform”).validate();

});

</script>

Now this code will work for all the textbox and textarea, where you give class name noSpecialChars on the input tags. also please be careful that you give the your form id on the place where i wrote “yourform”.

Here “Special Character Are not Allowed, Please remove it to submit the Page” is the message which will show when user insert in to the textbox or textarea. you can set your own error message at there.

 

 

Incoming search terms:

  • special character validation in jquery
  • special characters validation in jquery

What is JavaScript and JQuery?

JavaScript is scripting language based on the prototype, JavaScript is not related with Java. Java is different programming language.

JavaScript is used in web-application, almost all the web based application use javascript as scripting language. there is one another scripting language known as vbscript, basically this scripting language is used in desktop application. you can also use javascript in the desktop application.

Next version of the javascript is the JQuery, JQuery is very big library and you get easy solution using it, you get very good effects when you use JQuery. you can use object oriented programming in javascript as well. so you create the class in the javascript and create the object and use it through out the application.