Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Click on a hyperlink to open text

Reply
Thread Tools

Click on a hyperlink to open text

 
 
Steve Novak
Guest
Posts: n/a
 
      10-20-2011
In the following site
http://support.apple.com/kb/ht1574
There is a hyperlink with the text " How to redeem an iTunes Gift Card
on a computer"
When you click on it, it reveals some more text which disappears on
the next click.
I inspected the code to figure out how this is done but was unable to
isolate the required code.
Can someone pleas post a simple example of the code to achieve this
effect.
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-20-2011
20.10.2011 10:17, Steve Novak wrote:

> In the following site
> http://support.apple.com/kb/ht1574
> There is a hyperlink with the text " How to redeem an iTunes Gift Card
> on a computer"


It looks like a link, but it's not a real link, in the full meaning of
the word. Disable JavaScript in your browser and try again to see that
the "link" does not work.

> When you click on it, it reveals some more text which disappears on
> the next click.
> I inspected the code to figure out how this is done but was unable to
> isolate the required code.


It's rather simple though slightly obfuscated by various complexities.
The text revealed is part of the document's content, just placed in an
element that is hidden with CSS (display: none is one simple way of
hiding, and it's what the page uses). When you click on the "link", then
(if JavaScript is enabled), the CSS settings for the element are changed
and it becomes visible. Clicking it again changes the status back.

A fundamental design flaw with this is that when CSS is enabled and
JavaScript is not, the information is not available at all to the user.

A more robust way would be something like this:

<div class=stuff>
<h2>How to do something</h2>
<div class=howto>
This is how to do it, in detail.
</div>
</div>

Works fine, doesn't it? If you want to hide the detailed explanation
initially and make it available only via clicking on the heading
(assuming the user realizes he needs to do that! you might wish to style
the heading in a link-like manner for that), you should ensure that
hiding only takes place when revealing is possible.

This means that you would add some relatively simple JavaScript code
that traverses the document, recognizes elements that have class=stuff,
assigns an onclick handler to the h2 element inside any such element and
sets the display property of any element with class=howto to 'none'. The
onclick event handler would then just toggle that display property value
between 'none' and 'block'.

It's not that complicated, and I would say that if you don't know how to
do that (and don't want to learn that), you shouldn't do it - just
copying such code without understanding how it works tends to hurt,
sooner or later.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      10-20-2011
In article <j7ojor$mqo$(E-Mail Removed)>,
"Jukka K. Korpela" <(E-Mail Removed)> wrote:

> 20.10.2011 10:17, Steve Novak wrote:
>
> > In the following site
> > http://support.apple.com/kb/ht1574

....
>
> A fundamental design flaw with this is that when CSS is enabled and
> JavaScript is not, the information is not available at all to the user.


It is to me on my Mac on FF or Safari with JS disabled, the info
simply appears in full. The JS only enables a hiding, its absence
does not make it compulsory.

--
dorayme
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-20-2011
20.10.2011 12:23, dorayme wrote:

> In article<j7ojor$mqo$(E-Mail Removed)>,
> "Jukka K. Korpela"<(E-Mail Removed)> wrote:
>
>> 20.10.2011 10:17, Steve Novak wrote:
>>
>>> In the following site
>>> http://support.apple.com/kb/ht1574

> ...
>>
>> A fundamental design flaw with this is that when CSS is enabled and
>> JavaScript is not, the information is not available at all to the user.

>
> It is to me on my Mac on FF or Safari with JS disabled, the info
> simply appears in full. The JS only enables a hiding, its absence
> does not make it compulsory.


Standing corrected, I realize that I had right-clicked and selected
"Inspect Element" (a Firebug feature), which showed me

<blockquote style="display: block;">

and I failed to remember that it shows me the document's current status,
not the original HTML source. That is, display: block had been added
with JavaScript.

So it works just as you say. I wouldn't copy the code though - it's far
too complex for simple use, and the basic idea can be implemented much
simpler (with a few-liner if you use jQuery).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-20-2011
Jukka K. Korpela wrote:
> (with a few-liner if you use jQuery).


Yeah, but you have to load this lumbering mess of a library for a rather
simple roll-your-own handful for JavaScript functions...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Steve Novak
Guest
Posts: n/a
 
      10-20-2011
On Oct 20, 3:48*am, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> A fundamental design flaw with this is that when CSS is enabled and
> JavaScript is not, the information is not available at all to the user.
>
> A more robust way would be something like this:
>
> <div class=stuff>
> <h2>How to do something</h2>
> <div class=howto>
> This is how to do it, in detail.
> </div>
> </div>
>
> Works fine, doesn't it?


I copied your sample code and it does not work.
I don't mind if in order to achieve this effect there is a need for
CSS or JavaScript. All I'm after is a simple example of working code.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      10-20-2011
In article
<(E-Mail Removed)
m>,
Steve Novak <(E-Mail Removed)> wrote:

> On Oct 20, 3:48*am, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> > A fundamental design flaw with this is that when CSS is enabled and
> > JavaScript is not, the information is not available at all to the user.
> >
> > A more robust way would be something like this:
> >
> > <div class=stuff>
> > <h2>How to do something</h2>
> > <div class=howto>
> > This is how to do it, in detail.
> > </div>
> > </div>
> >
> > Works fine, doesn't it?

>
> I copied your sample code and it does not work.


It works to give the information without any tricks, that I think
is the point. Tricks to be truly admired are the ones by
accomplished magicians.

Still, I digress. Here is one rudimentary way that can be
enhanced all sorts of ways:

body {
margin: 1em 2em 1em 2em;
max-width: 40em;
}
h1 {font-size: 1.3em; }
p.example {
width: 40em;
}
..one:hover:after {
content: "Cras vel eros. Vivamus sed odio et orci tincidunt
ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis,
tellus. Vestibulum blandit nibh eget turpis. Quisque mollis,
lacus consectetur eleifend convallis, diam augue blandit magna.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis
dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna. Cras
vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna.";
color: #00c;
background: #fff;
}
div span {color: #c00; background: white;}

with

<p class="example one">On hover, extra text should appear.<br></p>

--
dorayme
 
Reply With Quote
 
Steve Novak
Guest
Posts: n/a
 
      10-21-2011
ok, I found some simple code that does it:
http://www.randomsnippets.com/2008/0...show-your-div/

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-21-2011
21.10.2011 14:07, Steve Novak wrote:

> ok, I found some simple code that does it:
> http://www.randomsnippets.com/2008/0...show-your-div/


Anyone who uses it probably deserves what he gets, so how about first
doing even the elementary test (which the page author should have
conducted) of switching off images in your browser and then seeing how
the page "works".

To repeat myself: This is the kind of things you shouldn't do if you
don't know how to code it yourself - properly. (If you do know it, you
can of course look at other people's code to get some ideas about
details and enhancements.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
click click click Andy Morrison Computer Support 7 12-20-2007 06:50 AM
How to fire both event button click and textchanged when button is click and text is changed Amy ASP .Net 0 06-01-2006 02:33 PM
open text file in browser window using hyperlink sohan ASP .Net 3 03-02-2006 03:17 PM
open page externally when click on hyperlink inside datagrid Marshal Antony ASP .Net 2 02-27-2004 08:47 AM
open page externally when click on hyperlink inside datagrid Marshal Antony ASP .Net Datagrid Control 1 02-26-2004 06:22 AM



Advertisments