Automatic Link [IMPORTANT] - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
December 30, 2011 at 2:31 pm #35900

schart
Participant

First, some notes you need to know:
* I use Webs, they generated the profile page.
* I can’t use PHP.
* I can post links, but not clickable links. ex: http://www.schart.net won’t be clickable

I have a profile page (link)
ul class=”feedList”> li> *UPDATE GOES HERE* /li> /ul>

I want all VISIBLE links to be clickable so, if I post a status that is :
Check this out http://www.google.com!
Will become this:
Check this out: a href=”http://www.google.com”>http://www.google.com /a>

I tried Tweetify, but that went into the code, making all links visible, in the code as well so the page was REALLY messed up. I only want to make that link clickable.

December 30, 2011 at 6:26 pm #93738

Mottie
Member

I’m confused… you have a service that doesn’t allow you to add basic HTML (links) but you can add javascript? Could you elaborate on what exactly you are allowed to add?

I’m doubtful we’ll be able to do anything to help you if the site is that restricted.

December 31, 2011 at 9:48 am #93777
Mottie
Member
Hi Schart!

First off there are a bunch of errors on your page. I found four <head> tags on that page as well… there should only be one set of opening and closing tags.

So, I’m guessing you mean the “Recent Activity” section? I wrote a script a while back that replaces urls in a shout box with links and I got it to work on your site. Here is a demo.

It will replace any url it finds with a link, or you can label the url:
```
// http://www.google.com becomes

http://www.google.com



// label the url using curly brackets around the label {label}

// separate the label and url with a colon {label}:url

// {Google}:http://www.google.com becomes

Google
```
Here is the code
```
jQuery(window).load(function(){

var regex = /({(w+?)}:)?(https?://[w-.]+.[a-zA-Z]{2,3}(?:/S*)?(?:[w])+)/g;

jQuery('ul.feedList').find('li b').each(function(j){

var last = ' ', txt, shout = $(this);

shout

.html(function(i,h){

var txt, url = h.split(' ');

jQuery.each(url, function(j, u) {

if (regex.test(u)) {

txt = u.split(':')[0] || ' ';

if (txt.indexOf('}') >= 0) {

u = u.replace(txt + ':', '');

var x = 1;  // find open bracket (spaces in link name)

while (txt.indexOf('{') < 0 && j-x > 0) {

txt = url[j-x] + ' ' + txt;

url[j-x] = '';

x++;

}

txt = txt.replace(/[{}:]/g, '');

} else {

txt = '';

}

url[j] = '' + ((txt === '') ? u : txt) + '';

}

});

h = url.join(' ');

return h;

});

});

});
```
If you can’t get it to work on your site, then it may be due to:
- Javascript errors preventing the code below it from running
- Multiple copies of jQuery; you only need one copy.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘JavaScript’ is closed to new topics and replies.