Solved

How to Convert Special words into Links using Javascript? - like Kontera does

Posted on 2008-06-16
14
363 Views
Last Modified: 2012-05-05
Hi!
If you happen to know Kontera - the in-text advertisement system- you'd be familiar with what I am asking.

They simple ask you to place a javascript call with your ID, and then all the special words in your text become links automatically.

I want to do the exact same thing, but with my own list of words, and something very simple.

For example, for every person that places my script in their site, if the words "cat" or "dog" are found, then all those words would be replaced by <a href=...>cat</a> and <a href=..>dog</a>, automatically.

How can I do that with plain javascript as they do!?

Do they use the function replace? or go through the whole page structure using DOM? or regular expressions? How do they do it so as to not mess up the HTML code?

And most importantly, their generated HTML, has no links on the code, when you hover over them. However the links actually work. How is that possible? The code shows it has no link href ="#", although the links still work..

I would really appreaciate if anybody could guide me.
THANK YOU VERY MUCH IN ADVANCE.

I really appreciate your time.
Thanks!
Rod



0
Comment
Question by:rodrix385
  • 5
  • 5
  • 2
14 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 21801906
No, sorry.  I'm not familiar with Kontera.  But, I do know how I would approach the
challenge.

1. Build your list of words.
2. In your script file, add an onload event handler
    i.e., something like what is described here: http://www.webreference.com/programming/javascript/onloads/
3. Include CSS for your special words, such that your code changes
    the "word" in the page to something like:

   <span class='special' onclick='doit(this)'>word</span>

  Where "doit()" is the routine that you include to perform the
  page load of the appropriate destination.

Does this make sense?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 80 total points
ID: 21802027
Like this (simple version)
<html>

<head>

<script>

var list = ["I","in"]; 

window.onload=function() {

  var allHTML = document.body.innerHTML;

  for (var i=0;i<list.length;i++) {

    var reg = eval("/"+list[i]+"/g");

    allHTML=allHTML.replace(reg,'<i><a href="" style="background-color:yellow">'+list[i]+'</a></i>')

  }

  alert(allHTML)

  document.body.innerHTML=allHTML;

}

</script>

</head>

<body>
 

<h1> My first page </h1>
 

This is my first web page and I can say anything I want in here - <b>I</b> do that by putting text or images in the body section - where I'm typing right now :)
 

</body>

</html>

Open in new window

0
 

Author Comment

by:rodrix385
ID: 21805378
THANKS GUYS!!! :)
This has been really useful.

However, I am still confused on how to process the keywords for actions.
Keyword highliting is done in my source code, and I managed to use regex with replacements, so as to do
<a href="myscript.php?var1=$1var2=$2> and etc.

What I am saying is that I have the two-part word I am was looking for with $1 and $2 and now I still need to process them so as to get the information to display.

However... I am not sure what technology to use to do that. I want to show a tooltip when the user hovers with the mouse on the highlighted word, and the text to display in the tooltip must be a function of f($1, $2).

The only way I see now, is of having an iFrame with a call to another webpage iframe.php?var1=$1&var2=$2. However, I know Kontera uses no iFrames and I resist completely against using iFrames as they are slow.

What is the other way around? is AJAX what Kontera uses?
Or is it a dynamically created javascript with parameters $1 and $2 what they do? If yes, how would I use a dynamically created javaascript script for displaying different tooltip contents, depending on content?

I really appreciate your time and all what you put for writing your answers
Thanks for everything!
Rod
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 21805420
What values are supposed to be substituted?
0
 

Author Comment

by:rodrix385
ID: 21805432
By the way, looking at a page's source code that uses Kontera  ads I can tell you that they DEFINITELY use a dinamically generated javascript.

They tell the user to set a js tag with their id like:
var KonteraID = 9093;

Then the main kontera.js is loaded and inside it, there is a document.write("<SCRIPT src='KonteraEngine.js?" + KonteraID + ....)

So that includes an additional js file that probably has the necessary dictionary of words and actions for that site?
I don't know.. I am really confused of how it works... all the code code is partially encrypted.. .but replacements seem to be there and actions too?

I can't really figure out HOW they are using the dinamically generated js to create all the info for each tooltip.

What could be a solution?!
Thanks!
Rod

 
0
 

Author Comment

by:rodrix385
ID: 21805484
Hi HonorGod:
==What values are supposed to be substituted?
The current regex finds words that start with a-f and end with certain pattern.
In this way, two groups are obtained $1 (a-f) and $2 (pattern)

Then $1 and $2 are combined to retrieve information. For example, for certain $1 and $2, the toolitp should show InformationX and PictureY.

Please feel free to ask me any more questions that could help with the answer.
Thanks!  
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 41

Expert Comment

by:HonorGod
ID: 21808068
Interesting.  Given a particular match, e.g., $1 and $2, is there a dictionary, or
Ajax call to a DB or something that is used to look something up, something
else entirely?

btw, Michaels answer is very good.  Is there something that he has missed?

http://www.experts-exchange.com/Q_23489798.html#a21802027
0
 

Author Comment

by:rodrix385
ID: 21808321
Hi HonorGod
==Given a particular match, e.g., $1 and $2, is there a dictionary, or
Ajax call to a DB or something that is used to look something up, something
else entirely?

Yes, exactly. Michaels solution is excellent and very clear -THANKS MIKE :o) - however I am still confused of how the rest works to create somehting similar like the Kontera engine. So please help me to untangle the following.

The same ad service is actually on this website experts-exchange.com when you are logged out, and words are converted into intext ads on mouse hover, by an engine called EchoTopic. It works exactly as Kontera engine, so you might as well see it in action, on this exact same site.

I am looking forward to do the same thing. My question is how does the engine know that when I hover on the highlithed word "javascript" that an advertisement about a "Javascript course" must show up? It must have some kind of database lookup or data lookup...

There must be some kind of query that works internally either with AJAX or dynamic Javascript that loads the content on the tooltip. With Kontera, I have discovered that there is a dynamic javascript, but I wouldn't know how to use that myself.

Would the dynamic javascript have the database needed to fill in the tooltips?

And if I go AJAX, that would mean increasing server load drastically, wouldn't it be? For each tooltip the user hovers on, a call to the server is made- but maybe that isn't as much?. Wouldn't it be better to have a single javascriptt generated dinamically with all the data? I might have repeated content, so maybe the 'javascript' word is repeated many times on MY text, would that mean having different AJAX calls even though the requested content would be the same. Wouldn't then AJAX be a throwing away bandwith and maybe its betteer to go js?

But then- I wouldn't want to reveal the whole algorithm publicly- half javascript half server?
mm... quite puzzled. I don't know which one is the correct way to go.

So yes, I want to do the same thing, and I would have a dictionary or DB or an array (or whatever can store data) and retrieve text and an image using parameters $1 and $2.

What should I use? AJAX, or dynamic javascript? And how should I tag the content.
Should I do <a id="special" specialtag=$1 specialtag2=$2 href=...>  and then have a function that processes all elements with id 'special'?
 
How do theirs work?! It works so fast, no loading..

THANKS SO MUCH EVERYONE
I really appreciate both your time :)

Rod

P.S: Raised points to 145
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 21808808
Sounds like a tooltip, as explained, and demonstrated here

http://archivist.incutio.com/viewlist/css-discuss/49739
0
 

Author Comment

by:rodrix385
ID: 21809492
Hi HonorGod,
Thanks for the info, but I am not looking for the code for creating a tooltip.

I am looking for a way of retrieveing the data to fill the tooltip.
The question is should I use AJAX? iFrame? Dynamic javascript with document.write to create span tags with information?

It's a design question. What do you think it's best, what does kontera or this other system you think it uses?
What minimizes server load while maximizing user experience?

I am raising to 160.
Thanks!
Rod
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21809925
<script>
var qString = location.search.substring(1); // lose the leading ?
var list = qString.split('&')
.
.
.

now you can send page.html?word1&word2&word3

0
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 80 total points
ID: 21811949
To answer your question, it depends...

If the amount of information available for your tooltips is not too big, you could
certainly have it available when the page is loaded, thus minimizing the number
of lookups that need to be done at the server.  However, this can impact your
page load time.  So, it is a trade off.

If you have your tooltip info on the server, perhaps in a database, then only
those messages that need to be retrieved are retrieved.  You could also have
a staging, or caching effect by determining "frequently requested tips", and
have them "pre-loaded" for quick display.

It's a balancing act of trade offs.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now