[RESOLVED] How to make links in div".conDiv" clickable because they are now not?
Hi all,
I have a div ".conDiv"
used to display messages sent to it by user in a simple chat app
HTML Code:
.conDiv {
color: blue;
background-color: lightgrey;
border-color:red;
overflow: auto;
text-align: left;
box-shadow: 10px 10px 8px #888888;
margin: auto;
border: 3px solid red;
padding: 5px;
width: 300px;
height: 270px;
word-wrap: break-word ;
}
<body>
<div class="conDiv" id="conDivID"></div>
<br>
<div class=" myInputtextDiv">
<input style="color:black;" type="text" id="myInput" maxlength="10000">
<input type="text" id="baseimage" hidden >
</br>
<input id="myBtn" type="button" onclick="sendFunction()" value=" Send">
<script>
function sendFunction() {
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img width=" =100px;" height=" 100px">').attr('src', imagesrc.value);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append("<span style='color: blue'>" + userinput + ' </span>');
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timestring + '</span>');
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
}
</script>
And I can't figure it out why when I send links to div it is not clickable
So any help?
How to make links in div".conDiv" clickable because they are now not?
Thank you for your time very much. Any help will be appreciated.
Re: How to make links in div".conDiv" clickable because they are now not?
How are you sending the links? How are you setting the content? There is nothing stopping links from being clicked in what you posted.
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
kfcSmitty
How are you sending the links? How are you setting the content? There is nothing stopping links from being clicked in what you posted.
Sorry i forgot to post the whole code.
This is the rest off the code
Code:
<div class="conDiv" id="conDivID"></div>
<br>
<div class=" myInputtextDiv">
<input style="color:black;" type="text" id="myInput" maxlength="10000">
<input type="text" id="baseimage" hidden >
</br>
<input id="myBtn" type="button" onclick="sendFunction()" value=" Send">
<script>
function sendFunction() {
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img width=" =100px;" height=" 100px">').attr('src', imagesrc.value);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append("<span style='color: blue'>" + userinput + ' </span>');
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timestring + '</span>');
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
}
</script>
Re: How to make links in div".conDiv" clickable because they are now not?
There's no links... The only things being added to the div tag in question are some span tags and an img tag... but no links... sooo....
-tg
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
techgnome
There's no links... The only things being added to the div tag in question are some span tags and an img tag... but no links... sooo....
-tg
Users use "myInput" to send text and links to the "conDiv". It is a chat application.
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
techgnome
There's no links... The only things being added to the div tag in question are some span tags and an img tag... but no links... sooo....
-tg
Users use "myInput" to send text and links to the "conDiv". It is a chat application.
Re: How to make links in div".conDiv" clickable because they are now not?
How are they sending links - Well-formed anchor tags or just URL in regular text?
Try this:
Code:
<script>
function sendFunction() {
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img width=" =100px;" height=" 100px">').attr('src', imagesrc.value);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append("<span style='color: blue'>" + embedUrls(userinput) + ' </span>');
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timestring + '</span>');
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
}
function embedUrls(text) {
var urlRe = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRe, '<a href="$1">$1</a>');
}
</script>
Re: How to make links in div".conDiv" clickable because they are now not?
You'll need to detect whether they posted a URLor not.
You could do something like this (note this is just for demonstrative purposes... it has not been tested at all and you should write it cleaner than this).
Code:
if(userinput.indexOf("http://") > -1 || userinput.indexOf("https://") > -1) {
$('#conDivID').append('<span style="color: blue"><a href="' + userinput + '" target="_blank">' + userinput + '</a></span>');
} else {
$('#conDivID').append("<span style='color: blue'>" + userinput + ' </span>');
}
That will now check to see if the user has entered a URL and, if they have, it will display it as a link. This will only work properly if they ONLY post a link. You would need to modify it if you want it to allow something like
"Hello there! Check out http://www.vbforums.com!"
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
Pradeep1210
How are they sending links - Well-formed anchor tags or just URL in regular text?
Try this:
Code:
<script>
function sendFunction() {
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img width=" =100px;" height=" 100px">').attr('src', imagesrc.value);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append("<span style='color: blue'>" + embedUrls(userinput) + ' </span>');
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timestring + '</span>');
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
}
function embedUrls(text) {
var urlRe = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRe, '<a href="$1">$1</a>');
}
</script>
Incredible it worked, thanks very much.But is
it possible to make it open in a new window " target="_blank"?
and also how to include the code links end with .com,.net,.org,.om,.us,.uk,.sa,.gov etc.?
And thank you very much for your value time
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
Pradeep1210
How are they sending links - Well-formed anchor tags or just URL in regular text?
Try this:
Code:
<script>
function sendFunction() {
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img width=" =100px;" height=" 100px">').attr('src', imagesrc.value);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append("<span style='color: blue'>" + embedUrls(userinput) + ' </span>');
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timestring + '</span>');
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
}
function embedUrls(text) {
var urlRe = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRe, '<a href="$1">$1</a>');
}
</script>
Incredible it worked, thanks very much.But is
it possible to make it open in a new window " target="_blank"?
and also how to include the code links end with .com,.net,.org,.om,.us,.uk,.sa,.gov etc. and phone numbers if user uses my site on his mobileand send phone number it should be clickable ?
And thank you very much for your value time
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
Max45
Incredible it worked, thanks very much.But is
it possible to make it open in a new window " target="_blank"?
and also how to include the code links end with .com,.net,.org,.om,.us,.uk,.sa,.gov etc. and phone numbers if user uses my site on his mobileand send phone number it should be clickable ?
And thank you very much for your value time
All you need is to come up with a good regex for what you need. What I showed you is regex for URLs which relies on the fact that they start with http/https.
So for the links ending in .com,.net,.org,.om,.us,.uk,.sa,.gov etc. try:
(?![\s^])[^\s]+?\.(?:com|net|org|om|us|uk|sa|gov)(?=[\s$])
For phone numbers you may try something like this:
[+\d][\d\w]+?
Re: How to make links in div".conDiv" clickable because they are now not?
You mean to use the three regex like this?
Code:
<script >
function embedUrls(text) {
var urlRe1 = /(https?:\/\/[^\s]+)/g;
var urlRe2 = (?![\s^])[^\s]+?\.(?:com|net|org|om|us|uk|sa|gov)(?=[\s$]) ;
var urlRe3 =[+\d][\d\w]+?;
return text.replace(urlRe1, '<a href="$1">$1</a>');
return text.replace(urlRe2, '<a href="$1">$1</a>');
return text.replace(urlRe3, '<a href="$1">$1</a>');
}
</script>
Re: How to make links in div".conDiv" clickable because they are now not?
No, you can combine them into one regex using | character (which basically means a or b).
Somewhat like this:
Code:
function embedUrls(text) {
var urlRe = /(https?:\/\/[^\s]+)|(?![\s^])[^\s]+?\.(?:com|net|org|om|us|uk|sa|gov)\b|[+\d][\d\s]+?/g;
return text.replace(urlRe, '<a href="$1" target="_blank">$1</a>');
}
Re: How to make links in div".conDiv" clickable because they are now not?
When I try your code and start sending link,emails and phone numbers. They all not appear in "conDiv". I don't know why.
Re: How to make links in div".conDiv" clickable because they are now not?
Can you send some sample text that you are entering that contains the links/emails/phone numbers etc.?
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
Pradeep1210
Can you send some sample text that you are entering that contains the links/emails/phone numbers etc.?
Hi Pradeep1210,
They are
Links
google.com
something.gov
something.om
Numbers
95544120
99451236
99405090
Emails
[email protected]
Thank you
Re: How to make links in div".conDiv" clickable because they are now not?
I tried the regex on the links, numbers and email address you sent and all of them get selected.
Is there any specific problem you are facing?
Re: How to make links in div".conDiv" clickable because they are now not?
I tried the regex on the links, numbers and email address you sent and all of them get selected.
Is there any specific problem you are facing?
Re: How to make links in div".conDiv" clickable because they are now not?
Quote:
Originally Posted by
Pradeep1210
I tried the regex on the links, numbers and email address you sent and all of them get selected.
Is there any specific problem you are facing?
Quote:
Originally Posted by
Pradeep1210
I tried the regex on the links, numbers and email address you sent and all of them get selected.
Is there any specific problem you are facing?
hi
Maybe there is a problem in my whole code.
This is my whole code
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content=" RedAppleChat is a FREE chatting webApp.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<title>RedAppleChat</title>
<style>
.bannerDiv {
width: 100%;
height: 50px;
background-color: lime;
text-align: center;
}
.UsernameLabelDiv{
color: red;
margin: auto;
width:300px;
height:30px;
}
.myInputtextDiv{
box-shadow: 10px 10px 8px #888888;
margin: auto;
border: 3px solid red;
padding: 5px;
width:300px;
height:90px;
background-color:lightgrey ;
}
input[id=myUserName] {
color: red;
border:2px solid blue;
border-radius: 4px;
}
input[id=myInput] {
width: 100%;
padding: 10px 10px;
border: 2px solid red;
border-radius: 4px;
}
.conDiv {
color: blue;
background-color: #ddd;
border-color:red;
overflow: auto;
text-align: left;
box-shadow: 10px 10px 8px #888888;
margin: auto;
border: 3px solid red;
padding: 5px;
width: 300px;
height: 300px;
word-wrap: break-word ;
}
.timeSpan{
color: grey;
font-size:10px;
}
.img{
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
border: 1px solid lime;
border-radius: 4px;
padding: 5px;
}
.img:hover{
width: 100%;
height: auto;
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<link rel=" shortcut icon" href="https://imgur.com/57AweD4.png" />
<body>
<div class=" bannerDiv">
<img style=" width =40px;" height=" 40px"
src="https://imgur.com/57AweD4.png" alt="LOGO" />
<span style="font-family: Times New Roman ;font-size: 30px; color: red">
RedAppleChat</span>
</div>
<form>
<div class=" UsernameLabelDiv">
<input style="width: 300px" type="text" placeholder="Username" id="myUserName"maxlength="10"onkeyup="saveValue(this)" onkeypress="return AvoidSpace(event)">
</div>
<div class="conDiv" id="conDivID"></div>
<div class=" myInputtextDiv">
<input style="color:black;" type="text" id="myInput" maxlength="10000">
<input type="text" id="baseimage" onkeyup=" sendImage()" hidden >
</br>
<input id="myBtn" type="button" onclick="sendFunction();" value=" Send">
<input id="fileInput" type="file" style="display: none;" />
<input type="button" value="Choose Image!"onclick="document.getElementById ('fileInput').click();" />
<input id="myBtn" type="button" onclick="clearChat()" value=" Clear">
</div>
<div class=" chooseBottun">
</div>
<br>
<script>
function sendFunction() {
var d = new Date()
var h12 = d.getHours();
var h24 = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if (s < 10) {
s = "0" + s
}
if (m < 10) {
m = "0" + m
}
if (h12 > 12) {
h12 = h12 - 12
}
if (h12 == 00) {
h12 = 12
}
var timeStamp = h12 + ":" + m + ":" + s + " ";
if (h24 > 11) {
timeStamp += "PM";
} else {
timeStamp += "AM";
}
var userName = document.getElementById("myUserName").value;
var userinput = document.getElementById("myInput").value;
var imagesrc = document.getElementById("baseimage");
var img = $('<img class="img" width=" =100px;" height=" 100px">')
.attr('src', imagesrc.value);
var regex = new RegExp("^[A-Za-z0-9]+$");
if (regex.test(userName)& imagesrc.value =="") {
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append( embedUrls(userinput));
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timeStamp + '</span>');
$('#conDivID').append('</br>');
document.getElementById('baseimage').value = "";
document.getElementById('myInput').value = "";
document.getElementById("myInput").focus();
} else if (regex.test(userName)& imagesrc.value !="") {
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append( embedUrls(userinput));
$('#conDivID').append('</br>');
$('#conDivID').append(img);
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timeStamp + '</span>');
$('#conDivID').append('</br>');
document.getElementById('baseimage').value = "";
document.getElementById('myInput').value = "";
document.getElementById("myInput").focus();
}else {
alert("Please Enter Your Username To Start Chat,Only English Letters And Numbers Allowed Without Spaces Between Them In The Username Field.");
document.getElementById("myUserName").value = "";
document.getElementById("myUserName").focus();
}
//To use scrolls on the conDivID.
document.getElementById("conDivID").scrollTop =
document.getElementById("conDivID").scrollHeight;
}
</script>
</form>
<br>
<script >
//To make links in div"conDiv" clickable
function embedUrls(text) {
var urlRe = /(https?:\/\/[^\s]+)|(?![\s^])[^\s]+?\.(?:com|net|org|om|us|uk|sa|gov)\b|[+\d][\d\s]+?/g;
return text.replace(urlRe, '<a href="$1" target="_blank">$1</a>');
}
</script>
<script>
// To display image after browsing for it
document.getElementById("fileInput").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
$('#fileInput').attr('src', e.target.result);
$('#baseimage').val(e.target.result);
sendFunction();
};
reader.readAsDataURL(this.files[0]);
}
</script>
<script type="text/javascript">
//To save myUserName text even after refreshing the page.
document.getElementById("myUserName").value = getSavedValue("myUserName");
function saveValue(e){
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue (v){
if (localStorage.getItem(v) === null) {
return "";
}
return localStorage.getItem(v);
}
</script>
<script> // To use Enter to send
var input = document.getElementById("myInput");
input.addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myBtn").click();
}
});
</script>
<script>
//To remove spaces from the beginning , the
//ending and between letters and words inside
//myUserName input text.
function AvoidSpace(event) {
var k = event ? event.which : window.event.keyCode;
if (k == 32) return false; }
</script>
<script>//To clear chat.
function clearChat(){
document.getElementById('conDivID').innerHTML = "";
}
</script>
<div style="text-align:center;">
<p>Select language to translate chat to</p>
<div id="google_translate_element"></div>
<script type="text/javascript"> //To add goole translation service.
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</div>
</body>
</html>
