Press "Enter" to skip to content

Highlight jQuery URL ColorUP In Textareas Like On Twitter | urlcolorup

jQuery URL ColorUP plugin allows it to automatically mark URLs in textareas like those on Twitter. Pull requests are always welcome if you find any bugs or if you want to improve them.

trigger url jquery, twitter url link example, twitter like website template

How to make use of it:

1. Import jQuery javascript library and jQuery URL colorup plugin into HTML document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.urlcolorup.js" type="text/javascript"></script>

2. Create a standard HTML text area.

<textarea rows="3"></textarea>

3. Call the function in the text area.

<script type="text/javascript">
$(document).ready(function() {
$("textarea").urlcolorup();
});
</script>

4. CSS template for URL highlighter design. Feel free to change it according to your needs.

.jqueryUrlcolorup .highlighter {
white-space: pre-wrap;
color: transparent;
overflow: hidden;
position: absolute;
padding-left: 10px;
padding-top: 5px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
.jqueryUrlcolorup .theSelector {
background-color: transparent;
position: relative;
direction: ltr;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
resize: none !important;
-webkit-transition: height 0.2s;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 4px 6px;
vertical-align: middle;
min-height: 48px !important;
line-height: 20px;
}
.jqueryUrlcolorup .url {
background: -webkit-linear-gradient(#dce6f8, #bdcff1);
border-radius: 2px;
box-shadow: 0 0 0 1px #a3bcea;
font-size: 14px;
white-space: pre-wrap;
line-height: 20px;
}

twitter-like url highlighting with jquery, jquery url colorup Plugin/Github


See Demo And Download

Official Website(amitmerchant1990): Click Here

This superior jQuery/javascript plugin is developed by amitmerchant1990. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.