Question on addressing

  • Thread starter Dr J R Stockton
  • Start date
D

Dr J R Stockton

I have a page containing

<style type="text/css"><!--
.POP { display: none; background: cyan; }
--></style>

<BODY onLoad="ShowPup('pup')">

<script type="text/javascript">

function ShowPup(Cls) { var J=0, Elems, Elem
Elems = document.getElementsByTagName("*")
while (Elem=Elems[J++]) if (Elem.className==Cls) {
Elem.style.background = "#eea" } }

function Togl(X) { X = document.getElementById(X).style
X.display = X.display=='none' ? 'block' : 'none' }

</script>

<p class=pup onClick="Togl('ZZ000')">
Click toggles source view (may need second click).
<span ID=ZZ000 class=POP>Explanation.</span></p>


and a couple of dozen similar paragraphs and H5 headings with class=pup
and different ZZ numbers. There are paragraphs and headings which are
not class=pup.

In every case the span will (or can) come at the end of the p or H
element.

ShowPup('pup') automatically colours the pup items with #eea.


ISTM that it should be possible to eliminate the IDs, using TOGL(this)
and getting the span by DOM methods.

ISTM that it should then be possible for ShowPup to set each span to
hidden cyan (instead of using POP), and to set each pup to have
onClick="TOGL(this)" and onMouseOver="this.style.cursor='hand'".

But how?
 
M

Martin Honnen

Dr said:
<p class=pup onClick="Togl('ZZ000')">
Click toggles source view (may need second click).
<span ID=ZZ000 class=POP>Explanation.</span></p>

ISTM that it should be possible to eliminate the IDs, using TOGL(this)
and getting the span by DOM methods.
Click to expand...

function Togl (element)
{
var spans = element.getElementsByTagName('span');
var lastSpan = spans[spans.length - 1];
}

Or if you are sure the span is the last child node as in the markup
above (where there is no white space between the closing </span> and
</p>) then it suffice to use
function Togl (element)
{
var span = element.lastChild;
}
 
J

John G Harris

function ShowPup(Cls) { var J=0, Elems, Elem
Elems = document.getElementsByTagName("*")
while (Elem=Elems[J++]) if (Elem.className==Cls) {
Elem.style.background = "#eea" } }
Click to expand...
<snip>

Why the unnecessary curly brackets ?

John
 
D

Dr J R Stockton

   function Togl (element)
   {
     var spans = element.getElementsByTagName('span');
     var lastSpan = spans[spans.length - 1];
   }

Or if you are sure the span is the last child node as in the markup
above (where there is no white space between the closing </span> and
</p>) then it suffice to use
   function Togl (element)
   {
     var span = element.lastChild;
   }
Click to expand...

Thanks.

The first is OK; no doubt the second would be, but it seems unwise to
rely unnecessarily on </span></p> having nothing in between. That's
all installed and working. I now use
var View = Spans[Spans.length - 1]
View.className="pop"

ISTM that it should then be possible to use JavaScript to set each pup
to have
onClick="TOGL(this)" and maybe something like
onMouseOver="this.style.cursor='hand'".

But how?
 
D

Dr J R Stockton

  said:
         Elems = document.getElementsByTagName("*")
         while (Elem=Elems[J++]) if (Elem.className==Cls) {
           Elem.style.background = "#eea" } }
Click to expand...

  <snip>

Why the unnecessary curly brackets ?
Click to expand...

As a kindness to readers, I removed for posting from just before the
#eea line two commented-out statements of an aspirational nature. The
braces were worth having; they now accommodate two new statements,
thanks to MH. They are

var Spans = Elem.getElementsByTagName('span')
Spans[Spans.length - 1].className = "pop"

--
(c) John Stockton, near London, UK. Posting with Google.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <URL:http://www.merlyn.demon.co.uk/>
FAQish topics, acronyms, links, etc.; Date, Delphi,
JavaScript, ....|
 
D

David Mark

I have a page containing

        <style type="text/css"><!--
Click to expand...

You don't need those comments.
         .POP { display: none; background: cyan; }
Click to expand...

Don't used named colors. Always specify a foreground color with a
background.
         --></style>

        <BODY onLoad="ShowPup('pup')">

        <script type="text/javascript">

        function ShowPup(Cls) { var J=0, Elems, Elem
Click to expand...

Not a constructor. Use lowercase.
          Elems = document.getElementsByTagName("*")
          while (Elem=Elems[J++]) if (Elem.className==Cls) {
            Elem.style.background = "#eea" } }
Click to expand...

Better to changed the class.
        function Togl(X) { X = document.getElementById(X).style
          X.display = X.display=='none' ? 'block' : 'none' }

        </script>

        <p class=pup onClick="Togl('ZZ000')">
        Click toggles source view (may need second click).
        <span ID=ZZ000 class=POP>Explanation.</span></p>
Click to expand...

Always quote attributes.
and a couple of dozen similar paragraphs and H5 headings with class=pup
and different ZZ numbers.  There are paragraphs and headings which are
not class=pup.

In every case the span will (or can) come at the end of the p or H
element.

ShowPup('pup') automatically colours the pup items with #eea.

ISTM that it should be possible to eliminate the IDs, using   TOGL(this)
and getting the span by DOM methods.

ISTM that it should then be possible for ShowPup to set each span to
hidden cyan (instead of using POP), and to set each pup to have
onClick="TOGL(this)"   and    onMouseOver="this.style.cursor='hand'".
Click to expand...

The "hand" cursor style is MS for "pointer." You don't need to
include "hand" unless you need to support IE < 6.
But how?
Click to expand...

Don't attach listeners to all of them. Attach a listener to the body
and delegate based on tagName and/or className of the target.

Or if you must:

function togl() {
var s = this.style;
s.display = s.display == 'none' ? 'block' : 'none';
}

function over() {
this.style.cursor = 'pointer';
}

el.onclick = togl;
el.onmouseover = over;

It is a good idea to read the newsgroup and its FAQ.

[snip]
 
A

Andrew Poulos

David said:
Or if you must:

function togl() {
var s = this.style;
s.display = s.display == 'none' ? 'block' : 'none';
}

function over() {
this.style.cursor = 'pointer';
}

el.onclick = togl;
el.onmouseover = over;
Click to expand...

Wouldn't you also need to add

function out() {
this.style.cursor = 'default';
}

el.onmouseout = out;

otherwise the cursor will stay as a hand?

Andrew Poulos
 
D

dhtml

Dr said:
I have a page containing


ISTM that it should be possible to eliminate the IDs, using TOGL(this)
and getting the span by DOM methods.
Click to expand...

A loop is not needed in most cases.

css:
.expanded .pup {
color: cyan;
}

script:
document.body.className = "expanded";

Also use a bubbling approach that was suggested.

function bodyClickHandler(ev) {
ev = ev || event;
var target = ev.target || ev.srcElement;
if(target.className == "pup")
alert(target.innerHTML);
}


Garrett
 
M

Martin Honnen

Dr said:
ISTM that it should then be possible to use JavaScript to set each pup
to have
onClick="TOGL(this)" and maybe something like
onMouseOver="this.style.cursor='hand'".
Click to expand...

Well if you want to set the onclick handler with script then simply as

Elem.onclick = function ()
{
Togl(this);
};

'hand' is a CSS value used by MS IE 5 and 5.5 while IE 6 and 7 (and the
upcoming 8) support the value 'pointer' defined by the W3C CSS
recommendation, as do Opera, Mozilla, Safari. So I would use 'pointer'
not 'hand' nowadays.
And I don't think you need to set style.cursor onmouseover, the cursor
of an element does only change when the mouse is over the element, even
if you set it statically in a CSS stylesheet e.g.

<style type="text/css">
p.pup { cursor: pointer; }
</style>

If you only want to have that cursor if script is enabled then integrate
it in your ShowPup function to set
Elem.style.cursor = 'pointer';
on the Elem elements you check the className for.
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
rlyn.invalid>, Mon, 8 Dec 2008 16:47:43, Dr J R Stockton
I have a page containing

But how?
Click to expand...


This is a general response to all the responses posted today (GMT), for
which thanks; they have been seen on Google but not yet delivered here,
so I'm nominally responding to the OP's article.

The "demo" paragraph is now just
<p class=pup>
Click toggles source view (may need second click).
<span>The Latin.</span></p>
so that only the class and the span need be provided each time, which is
the logical minimum.


The page is so utterly dependent on JavaScript that it now has, between
the usual top and tail, just two DIVs. The second is initially hidden,
and contains the entire "useful" content; the first glaringly demands
JavaScript, and is immediately converted to peaceful by script, which
also un-hides the rest. The comment about mouseover without script
support is this rendered insignificant.

There is page-specific CSS including
.pop { background: cyan; display: none }
.pup { background: #eea; cursor: pointer }

There is one strangeness; after page load, just the FIRST click on EACH
pup has no visible effect.


While, as the above implies, the extra material for those paragraphs is
in Latin, it's not complete of itself; it indicates the place in the
prime source (for those with broadband + good eyesight + fluent Latin)
and in the secondary source (for those with adequate Latin or French).
The unhidden, English, part is not a translation but a condensation (CC
was a windbag). Those matching said conditions may care to look at the
accuracy of the condensations!

<URL:http://www.merlyn.demon.co.uk/estr-xpl.htm>.



FYI :
Opera :
"abcdefghijkl".lastIndexOf("f", Infinity) // fails
"abcdefghijkl".lastIndexOf("f", 9999) // works

Opera 9.27 :
Contents of my "Pop Code Up" windows are usually corrupt in the first
few characters (which used to '<pre>'; spaces now prepended).
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
rlyn.invalid>, Tue, 9 Dec 2008 18:09:15, Dr J R Stockton
There is one strangeness; after page load, just the FIRST click on EACH
pup has no visible effect.
Click to expand...

That was due to

display = display=='none' ? 'block' : 'none'

fixed by

display = display!='block' ? 'block' : 'none'
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to make an audio player, how do I get the selected file to be playable? 5
Help with code 0
Sort by number of characters 1
Gallery - mosiac/grid layout with filtering and information page popup 1
Working on mobile css menu with plenty of frustration! 2
Closing an overlay outside the overlay as well 1
How to position the *tooltip* comment on these buttons? 9
I need help making a zooming function 11

Members online

Total: 1,013 (members: 2, guests: 1,011)
Robots: 469

Forum statistics

Threads
474,007
Messages
2,570,266
Members
46,865
Latest member
AveryHamme

Latest Threads

Top