dcsimg
Results 1 to 16 of 16

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

  1. #1

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

    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.
    Last edited by Max45; Nov 26th, 2018 at 06:47 PM.

  2. #2
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,145

    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.

  3. #3

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by kfcSmitty View Post
    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>

  4. #4
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    31,945

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  5. #5

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by techgnome View Post
    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.

  6. #6

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by techgnome View Post
    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.

  7. #7
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,604

    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>
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  8. #8
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,145

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

  9. #9

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by Pradeep1210 View Post
    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

  10. #10

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by Pradeep1210 View Post
    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

  11. #11
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,604

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

    Quote Originally Posted by Max45 View Post
    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]+?
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  12. #12

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

    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>

  13. #13
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,604

    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>');
        }
    Last edited by Pradeep1210; Dec 3rd, 2018 at 06:07 AM. Reason: Fine tuned regex
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  14. #14

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

    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.

  15. #15
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,604

    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.?
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  16. #16

    Thread Starter
    Member
    Join Date
    Jun 2018
    Posts
    51

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

    Quote Originally Posted by Pradeep1210 View Post
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width