onClick on Link change string: Is that possible ?
ask...@gmx.net
i would like to do the following. If any link is clicked
the var myString should toggle between the Abstract to myLink and the
whole text.
First the page looks like that
myLink_A
myString_A = "the abstract to link_A"
myLink_B
myString_B = "the abstract to link_B"
myLink_C
myString_C = "the abstract to link_C"
if the surfer clicks on myLink_B then the page should look like this
myLink_A
myString_A = "the abstract to link_A"
myLink_B
myString_B = "now the value of myString_B is the whole text
(and not just the abstract) that belongs to link_B". In myLink_B
you can read foo bar and so on
myLink_C
myString_C = "the abstract to link_C"
So according to a onClick-Event on a certain link the value of the a
certain string has to change and the page must be redisplayed again.
Is that possible at all with JavaScript, could you give a good link or
an advice where to look. (fully-fledged example code is always welcome
of course ;o)
Thanks a lot
best regards
Tom
Yep
> Hello,
>
> i would like to do the following. If any link is clicked
> the var myString should toggle between the Abstract to myLink and the
> whole text.
>
> First the page looks like that
>
> myLink_A
> myString_A = "the abstract to link_A"
>
> myLink_B
> myString_B = "the abstract to link_B"
>
> myLink_C
> myString_C = "the abstract to link_C"
>
> if the surfer clicks on myLink_B then the page should look like this
>
>
> myLink_A
> myString_A = "the abstract to link_A"
>
> myLink_B
> myString_B = "now the value of myString_B is the whole text
> (and not just the abstract) that belongs to link_B". In myLink_B
> you can read foo bar and so on
>
> myLink_C
> myString_C = "the abstract to link_C"
>
> So according to a onClick-Event on a certain link the value of the a
> certain string has to change and the page must be redisplayed again.
>
Dynamic Writing is very common, the FAQ has a function to do it at
<URL:http://jibbering.com/faq/>
The following examples demonstrate many techniques - tested on IE5,
Mozilla1.2 and Opera7. Some explanations may be useful:
- "altText" is an expando attribute, i.e. an attribute you invent. You
can retrieve its value thanks to the "getAttribute" method. Note that
an attribute is *not* a property in Mozilla (you'll see the
consequences in the code).
- function f does it the "normal way" (apart from the expando
attribute). It uses a bunch of DOM2 methods, defined at
<URL:http://www.w3.org/>. If you're familiar with the DOM model (nodes
etc) this should be fairly easy to grasp and use.
- function g uses the innerHTML model, supported by many browsers (IE,
Mozilla, Opera7+). It is much simpler to use, it'd be even interesting
to use the innerText model but it's not supported by Mozilla.
- function h does it without getAttribute, you just pass values as
arguments and redefine the handler on the fly (not very common, but so
powerful). You could also store all the values in a global object and
retrieve them thanks to IDed A elements.
So, to make a good script you'd have to:
- determine the targets and the setText methods (innerHTML or DOM)
- determine where to source the info (getAttribute, arguments or
global vars)
- build your approach
I believe you've got enough material to get started, now :-) If you
encounter syntax issues, just go for clj archives at
groups.google.com, using the relevant keywords...
HTH
Yep.
<a href="#"
altText="Hello World"
onclick="f(this);return false">Click here!</a>
<a href="#"
altText="Bye World"
onclick="g(this);return false">Click Here!</a>
<a href="#"
onclick=
"h(this,'Click here!','The world is not enough');return false">
Click Here!</a>
<script type="text/javascript">
function f(A){
var text=getText(A);
if(A.hasChildNodes && A.removeChild && A.firstChild &&
document.createTextNode && A.getAttribute && A.appendChild){
while(A.hasChildNodes()) A.removeChild(A.firstChild);
A.appendChild(
document.createTextNode(A.altText||A.getAttribute("altText"))
);
A.altText=text;
}
}
function g(A){
if(typeof A.innerHTML!="undefined" && A.getAttribute){
var text=getText(A);
A.innerHTML=A.altText||A.getAttribute("altText");
A.altText=text;
}
}
function h(A,text1,text2){
if(typeof A.innerHTML!="undefined"){
A.innerHTML=text2;
A.onclick=function(t1,t2){
return function(){
h(this,t1,t2);
return false;
}
}(text2,text1);
}
}
function getText(el){
if(typeof el.innerText!="undefined") return el.innerText;
else if(el.childNodes){
for(var ii=0, res=""; ii<el.childNodes.length; ii++){
if(el.childNodes[ii].nodeType==3) //textNode
res+=el.childNodes[ii].nodeValue;
else if(el.childNodes[ii].nodeType==1) //nested element
res+=arguments.callee(el.childNodes[ii]);
}
return res;
}
return "";
}
</script>
ask...@gmx.net
first of all i would like to than you very much for the code you posted.
Unfortunately i was unable to translate the provided functions to my
needs and could not find anything in the mentioned faq at:
http://jibbering.com/faq/.
I just do not know how to assign the onClick event on a Link to change
the text that stands below / beneath the link. Let me try to explain it
again.
myLinkToThisPageWithID__12
Abstract for item 12 with a little intro
If anyone clicks on the link the abstract will be replaced by the whole
text that belongs to item 12. All that suppose to happen on the same page.
Yep
> Hello Yep,
>
> first of all i would like to than you very much for the code you posted.
>
> Unfortunately i was unable to translate the provided functions to my
> needs and could not find anything in the mentioned faq at:
> http://jibbering.com/faq/.
Search for dynWrite, it's at <URL:http://jibbering.com/faq/#FAQ4_15>
> I just do not know how to assign the onClick event on a Link to change
> the text that stands below / beneath the link. Let me try to explain it
> again.
>
> myLinkToThisPageWithID__12
>
> Abstract for item 12 with a little intro
>
> If anyone clicks on the link the abstract will be replaced by the whole
> text that belongs to item 12. All that suppose to happen on the same page.
>
Ah I see now; why not use simple layers? The following demonstrates
how, tested ie6 only. Note that "display change" is supported from
IE5+, Opera7+ and Mozilla, so this may not work in older browsers, you
may have to adapt to your target requirements (jut keep in mind
accessibility)...
HTH
Yep.
<a href="#" onclick="tog('L1');return false">Subject 1</a>
<div id="L1">
<div id="L1_abstract">
This is the abstract of the article...
</div>
<div id="L1_content">
This is the content of the article...
</div>
</div>
<a href="#" onclick="tog('L2');return false">Subject 2</a>
<div id="L2">
<div id="L2_abstract" class="abst">
This is the abstract of the article 2...
</div>
<div id="L2_content" class="cont">
This is the content of the article 2...
</div>
</div>
<script type="text/javascript">
function tog(layer_id){
var d=document;
if(d.getElementById){
var abst=d.getElementById(layer_id+"_abstract"),
cont=d.getElementById(layer_id+"_content");
if(abst && cont){
cont.style.display =
(cont.style.display=="block" ? "none" : "block");
abst.style.display =
(abst.style.display=="none" ? "block" : "none");
}
}
}
window.onload=function(){
var d=document;
if(d.getElementsByTagName){
var divs=d.getElementsByTagName("div");
for(var ii=0; ii<divs.length; ii++)
if(divs[ii].id.indexOf("_content")>0)
divs[ii].style.display="none";
}
}
</script>
Dr John Stockton
news:comp.lang.javascript, ask...@gmx.net <ask...@gmx.net> posted at
Sat, 23 Nov 2002 23:23:34 :-
>Hello Yep,
Do you really wish to exclude others? Ignored.
>Unfortunately i was unable to translate the provided functions to my
>needs and could not find anything in the mentioned faq at:
>http://jibbering.com/faq/.
Yep should have (IMHO) cited Sec 4.15.
>I just do not know how to assign the onClick event on a Link to change
>the text that stands below / beneath the link.
The onClick() calls javascript which performs the action. IIRC, if it
also returns false, the actual linking does not occur. But a link
should be a link, and it might be better to use a button.
The javascript needs to DynWrite to a DIV under the link, much as is
done in <URL:http://www.merlyn.demon.co.uk/js-tests.htm#DynTest>. Use
of javascript: in the second example is not really needed; one could use
an independent function.
<FAQENTRY> Now that NS4 is little used, would it be well to ADD to
section 4.15 an example omitting the NS4 provision? It should be
shorter & easier to understand, and so could help to explain the full
setup for DynWrite().
--
© John Stockton, Surrey, UK. j...@merlyn.demon.co.uk Turnpike v4.00 MSIE 4 ©
<URL:http://www.jibbering.com/faq/> FAQ for comp.lang.javascript by Jim Ley.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Yep
>
> >Unfortunately i was unable to translate the provided functions to my
> >needs and could not find anything in the mentioned faq at:
> >http://jibbering.com/faq/.
>
> Yep should have (IMHO) cited Sec 4.15.
>
Agreed, sorry for the confusion.
<snip />
>
> <FAQENTRY> Now that NS4 is little used, would it be well to ADD to
> section 4.15 an example omitting the NS4 provision? It should be
> shorter & easier to understand, and so could help to explain the full
> setup for DynWrite().
I think that a resquisit to this would be the FAQ mentioning some
accessibility/fallback explanations' resources, ISTM that this has
become a recurrent subject in the group and may be in the scope...
I'll take advantage of the post to also provide a slight improvement
to the getText method in the initial script, for the record.
Cheers,
Yep.
function getText(node){
if(typeof node.innerText!="undefined") return node.innerText;
else
return function(N){
for(var ii=0, s="", c=N.childNodes;ii<c.length;ii++)
if(c[ii].nodeType==3) s+=c[ii].nodeValue;
else if(c[ii].nodeType==1) s+=arguments.callee(c[ii]);
return s;
}(node);
}
Richard Cornford
<snip>
>I'll take advantage of the post to also provide a slight improvement
>to the getText method in the initial script, for the record.
>
>Cheers,
>Yep.
>
>function getText(node){
> if(typeof node.innerText!="undefined") return node.innerText;
> else
> return function(N){
> for(var ii=0, s="", c=N.childNodes;ii<c.length;ii++)
> if(c[ii].nodeType==3) s+=c[ii].nodeValue;
> else if(c[ii].nodeType==1) s+=arguments.callee(c[ii]);
> return s;
> }(node);
>}
I really like the recursive inner function call (collected! ;-) and
not having to re-test innerText on each call if recursively calling the
outer function (as in your first version). It is much more elegant than
assigning one of two possible getText versions (as I have been doing
lately).
I don't think that you should have drooped the - else
if(node.childNodes){ - test and the default return value, in favour
of - else - , especially as that test would also only need to be done
once in the call to the outer function. I am thinking of Opera 5 & 6
with no innerText and no childNodes (and no way of extracting this
information at all). I realise that you never claimed it would work with
O 5&6 but I think that it would still be worth avoiding the JavaScript
error on unsupportive platforms as the cost is so slight and it is such
a generally useful function otherwise.
Cheers,
Richard.
Yep
<snip />
>
> I really like the recursive inner function call (collected! ;-) and
> not having to re-test innerText on each call if recursively calling the
> outer function (as in your first version). It is much more elegant than
> assigning one of two possible getText versions (as I have been doing
> lately).
>
Thank you. I've just modified my own sortable script with the eval
technique (using the Function constructor), and I liked your two
functions approach presented there - was just a nice challlenge to
make it in one function. Still, it seems that even Opera7 has issues
with textNodes manipulation, trimming them while it should not :-(
> I don't think that you should have drooped the - else
> if(node.childNodes){ - test and the default return value, in favour
> of - else - , especially as that test would also only need to be done
> once in the call to the outer function. I am thinking of Opera 5 & 6
> with no innerText and no childNodes (and no way of extracting this
> information at all). I realise that you never claimed it would work with
> O 5&6 but I think that it would still be worth avoiding the JavaScript
> error on unsupportive platforms as the cost is so slight and it is such
> a generally useful function otherwise.
>
In the original sortable script the test was done in another _canRun
function, but I've got no excuse for posting it "as is", all the more
I've been answering to John talking about accessibility :-)
Cheers,
Yep.