Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36836 > unrolled thread

How to make on-clickable div text look clickable

Back to article view | Back to comp.lang.javascript

Contents

  How to make on-clickable div text look clickable James Harris <james.harris.1@gmail.com> - 2019-06-08 10:52 +0100
    Re: How to make on-clickable div text look clickable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 12:14 +0200
    Re: How to make on-clickable div text look clickable "R.Wieser" <address@not.available> - 2019-06-08 15:58 +0200
      Re: How to make on-clickable div text look clickable James Harris <james.harris.1@gmail.com> - 2019-06-08 19:25 +0100
        Re: How to make on-clickable div text look clickable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 20:42 +0200
        Re: How to make on-clickable div text look clickable "R.Wieser" <address@not.available> - 2019-06-09 10:02 +0200
    Re: How to make on-clickable div text look clickable James Harris <james.harris.1@gmail.com> - 2019-06-08 19:17 +0100
      Re: How to make on-clickable div text look clickable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 20:40 +0200

#36836 — How to make on-clickable div text look clickable

When you programmatically make text clickable by adding a click-event 
listener do you have a preferred way of making that text look clickable?

I found that browsers don't change the appearance of the text, by default.

I guess I could go to the trouble of changing styling specifically for 
the div text and maybe for mouseover events etc. But I wonder if there's 
an easier way to do this. Or, failing that, a recommended set of styling 
settings.

I should say I am not sure it would be good to use /all/ the browser's 
default formatting for this case. For example, it may be best not to use 
underlining. Not sure yet. But I do want the clickable div texts to look 
clickable, as opposed to looking like plain text, and I wondered if you 
guys knew of or had a preferred way of doing so. I guess this is a 
common situation.

Ideas welcome.


-- 
James Harris

[toc] | [next] | [standalone]

#36840

James Harris wrote:

> When you programmatically make text clickable by adding a click-event
> listener do you have a preferred way of making that text look clickable?

This subject is off-topic here.  Read the FAQ.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#36843

James,

> do you have a preferred way of making that text look clickable?

As a reader ?   I would want to have it look like the real thing.  You know, 
underlined and with a certain color.

As a writer ?  I would probably use the "a" tag itself, setting the "href" 
property to "javascript:your_function()".  You know, letting the tag handle 
all the nitty-gritty of making the text look clickable.

https://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event?rq=1

Than again, I often go for the easiest solution (after having spend quite 
some time googeling and testing what the easiest solution might be :-) ).

> I should say I am not sure it would be good to use /all/ the browser's 
> default formatting for this case

In that case you will most likely confuse and (sooner rather than later) 
annoy the user, which expects a certain uniformity.

But you can ofcourse also go for Stefans suggsetion, and not change the text 
itself but putting it on a button.   Or maybe just a small button (with the 
letter "A" - for Answer - in it) at the end of the question.

Regards,
Rudy Wieser

[toc] | [prev] | [next] | [standalone]

#36849

On 08/06/2019 14:58, R.Wieser wrote:
> James,
> 
>> do you have a preferred way of making that text look clickable?
> 
> As a reader ?   I would want to have it look like the real thing.  You know,
> underlined and with a certain color.

Well, here's a page with standard links. What it has in common with what 
I intend for this application is that it has a short clickable piece of 
text per line.

   http://pensites.com/politics/article/

In that, clicking on a line of text links to a page.

In what I want to do now, however, each line of text would be a 
question, and clicking on it would bring up the answer below.

I mention it purely because I think it illustrates that in that form the 
default formatting for links isn't too pretty.

> 
> As a writer ?  I would probably use the "a" tag itself, setting the "href"
> property to "javascript:your_function()".  You know, letting the tag handle
> all the nitty-gritty of making the text look clickable.
> 
> https://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event?rq=1
> 
> Than again, I often go for the easiest solution (after having spend quite
> some time googeling and testing what the easiest solution might be :-) ). >
>> I should say I am not sure it would be good to use /all/ the browser's
>> default formatting for this case
> 
> In that case you will most likely confuse and (sooner rather than later)
> annoy the user, which expects a certain uniformity.
> 
> But you can ofcourse also go for Stefans suggsetion, and not change the text
> itself but putting it on a button.   Or maybe just a small button (with the
> letter "A" - for Answer - in it) at the end of the question.

Good points. Some people have a flair for styling. Unfortunately, I am 
not one of 'em!


-- 
James Harris

[toc] | [prev] | [next] | [standalone]

#36851

James Harris wrote:

> On 08/06/2019 14:58, R.Wieser wrote:
>> James,
>>> do you have a preferred way of making that text look clickable?
>> 
>> As a reader ?   I would want to have it look like the real thing.  You
>> know, underlined and with a certain color.
> 
> Well, here's a page with standard links. What it has in common with what
> I intend for this application is that it has a short clickable piece of
> text per line.

Which part of “OFF-TOPIC” did you not get?
 
Score adjusted.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#36855

James,

> Well, here's a page with standard links.

... Which as a javascript lock installed:   Javascript not enabled ?   No
entrance.   /At all/.   And as I've got JS disabled (and no intention to
enable it, especially not for websites which /demand/ its availability) ...

> it has a short clickable piece of text per line.

I don't get it, whats so special about that ?

< p >The question ?  The < a href="answer.htm" >answer< /a >< /p >

(I had to add the spaces after the "<" and before the ">" because otherwise 
the newsgroup server complains)

> Some people have a flair for styling. Unfortunately, I am not one of 'em!

I don't think I've got much in that regard either.    Its just that I've
browsed the web for long enough to notice that all kinds of "lets make this
link different" stylings often cause them to be ignored, because you're
automatically looking for the standard one.    The anoyance kicks it when
you have to spend time to look at /everything/, wondering if its clickable
or not.


Having said that, I do (now) realize that your situation is a bit special
(the question, answer combination on a single line), and I could imagine
that removing the standard underlining could make it look better.   I would
keep the coloring though, as its an indication to the user to which
questions he already read - even when re-visiting the page.

Than again, you will most likely lose that coloring advantage when you
"javascript:..." those HREFs ...

Regards,
Rudy Wieser

[toc] | [prev] | [next] | [standalone]

#36848

On 08/06/2019 11:05, Stefan Ram wrote:
> Supersedes: <button-20190608110113@ram.dialup.fu-berlin.de>
> [Added: » type="button"«]
> 
> James Harris <james.harris.1@gmail.com> writes:
>> When you programmatically make text clickable by adding a click-event
>> listener do you have a preferred way of making that text look clickable?
> 
> <button type="button">Text</button>

I was surprised at your idea of a button, thinking it would be something 
with rounded-rectangle borders etc but then I saw this:

   https://www.w3schools.com/howto/howto_js_accordion.asp

So I have to choose between a clickable button which doesn't look like a 
button and clickable text which can be made more button like! Sometimes 
there are too many options. ;-)

-- 
James Harris

[toc] | [prev] | [next] | [standalone]

#36850

James Harris wrote:

> On 08/06/2019 11:05, Stefan Ram wrote:
>> James Harris <james.harris.1@gmail.com> writes:
>>> When you programmatically make text clickable by adding a click-event
>>> listener do you have a preferred way of making that text look clickable?
>> 
>> <button type="button">Text</button>

Do not listen to Stefan Ram; he has no clue about real Web development.
 
> I was surprised at your idea of a button, thinking it would be something
> with rounded-rectangle borders etc but then I saw this:
> 
>    https://www.w3schools.com/howto/howto_js_accordion.asp

<https://www.w3fools.com/>
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web