[RESOLVED] How to make links in div".conDiv" clickable because they are now not?

**Max45** · Nov 25th, 2018, 11:33 AM

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.

**kfcSmitty** · Nov 26th, 2018, 10:46 AM

How are you sending the links? How are you setting the content? There is nothing stopping links from being clicked in what you posted.

**Max45** · Nov 26th, 2018, 06:45 PM

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>

**techgnome** · Nov 26th, 2018, 09:14 PM

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

**Max45** · Nov 27th, 2018, 07:11 AM

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.

**Max45** · Nov 27th, 2018, 07:44 AM

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.

**Pradeep1210** · Nov 27th, 2018, 08:33 AM

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>

**kfcSmitty** · Nov 27th, 2018, 08:38 AM

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!"

**Max45** · Nov 27th, 2018, 11:08 AM

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

**Max45** · Nov 27th, 2018, 11:12 AM

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

**Pradeep1210** · Nov 30th, 2018, 10:30 AM

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]+?

**Max45** · Nov 30th, 2018, 04:43 PM

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>

**Pradeep1210** · Dec 3rd, 2018, 03:17 AM

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>');
    }

**Max45** · Dec 3rd, 2018, 06:23 PM

When I try your code and start sending link,emails and phone numbers. They all not appear in "conDiv". I don't know why.

**Pradeep1210** · Dec 7th, 2018, 10:23 AM

Can you send some sample text that you are entering that contains the links/emails/phone numbers etc.?

**Max45** · Dec 10th, 2018, 08:02 AM

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
Canadian45@gmail.com

Thank you

**Pradeep1210** · Dec 13th, 2018, 10:47 AM

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?

**Pradeep1210** · Dec 13th, 2018, 10:48 AM

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?

**Max45** · Dec 13th, 2018, 06:56 PM

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?

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>

Thread: [RESOLVED] How to make links in div".conDiv" clickable because they are now not?

Thread Tools

Display

[RESOLVED] How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Re: How to make links in div".conDiv" clickable because they are now not?

Posting Permissions