Hi guys, I would like to implement a text box using html with preloaded text and auto highlight an entire line when click, and the click line would bring up a pop up next to it, is it do able? Is there any kind suggestions on how I may achieved this??

For example in the attached screen shot, with the highlighted line saying I am learning how to code
It would pop up an image of a cute computer.
And when I introduce myself, it shows a picture of me.

All in a scroll text box.

Thanks guys!! :)

This ends up being several different items, some of which I believe require javascript. HTML supports a text box, and you can put preloaded text into it. Using CSS you can make it a fixed height and scrolling. I don't know how, but I suspect CSS can let you auto highlight an entire line when you click.

But if you want to pop up a window, that will involve some (relatively simple) javascript. You would need to find out which line the user clicked on, and then select what image to load.

All of these you should be able to find online - try doing each one, one at a time.

If you don't have quite so much time, you might look at some of the various javascript toolkits out there. dojo (the one I'm most familiar with, not necessarily the best) supports several types of text box and might make the automation easier, if you can get past their sometimes-impenetrable documentation.

commented: Thanks! +1

All in a scroll text box.

To do the scrolling "effect" you can use an overflow in css...

The popup effect, as said before, is going to require javascript (you can find many of those already made for your usages).

Hi scarletfire,
Yes it is possible, Use jquery, onfocus highlight the line at the same time trigger popup.I hope it will solve your problem.

commented: Thanks for you feedback, could you explain more in detail? Am not very clear with the jquery bit that uses onfocuse to highlight the line and trigger popup, would the pop up be customisable? Much appreciated!! :) +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.