click-through to underlying element

**nutso fasst** · Jul 23 '05, 07:05 PM

Re: click-through to underlying element

"RobB" <ferndoc9@hotma il.com> wrote in message
news:1112925560 .682317.191500@ o13g2000cwo.goo glegroups.com.. .[color=blue]
> Uses the regular expression /\bscroll\b/, which will match the string
> 'scroll' (could have used /^scroll$/ or simply /scroll/ also); if it
> matches, RegExp.test returns true which assigns 'hidden' to the
> overflowX property, otherwise assigning 'scroll'. A toggle, in other
> words.[/color]

Ah, yes. I understand the toggle, I wasn't clear on the use of the regex.
Isn't
obj.style.overf low = (obj.style.over flow=='auto') ? 'hidden' : 'auto';
more efficient, and testing on the numeric value of zIndex more efficient
still? Having determined the zIndex, other tests are unnecessary, and one
'if()' is more efficient than multiple toggles.
[color=blue]
> Same for the overflow property. Setting both is required to suppress
> the vertical scrollbar cross-browser.[/color]

I was under the impression overflowX was a subset of overflow, setting
overflow sets both overflowX and overflowY.
[color=blue]
> if ('undefined' != typeof obj.scrollLeft)
> obj.scrollLeft = 0;
>
> Returns image to flush left if 'unexpanded'. Seemed logical.[/color]

Good idea! Thanks.

Your 2nd solution looks good, tho it seems to me either an empty div or a
1-pixel-high totally-transparent gif sized with CSS to the overlapping area
would work better than a clipped duplicate of the overlapped image. On the
off chance of no stylesheet support, it wouldn't significantly affect
appearance. I put " " in my overlapping div out of fear that some
browser might ignore a click on an empty element, but perhaps that isn't
necessary. It works without it in IE and FF.

nf

**RobB** · Jul 23 '05, 07:05 PM

Re: click-through to underlying element

nutso fasst wrote:[color=blue]
> "RobG" <rgqld@iinet.ne t.auau> wrote in message
> news:aok5e.797$ Zn.40727@news.o ptus.net.au...[color=green]
> > Clean, tidy, exactly as specified and no posX/Y - congratulations[/color][/color]
:-)[color=blue]
>
> Thanks. Most folks would consider it time badly spent, but sometimes[/color]
the[color=blue]
> solving of the problem is more important than the usefulness of the
> solution.
>
> nutso "the joy is in the journey" fasst[/color]

As they say on that *Millionaire* show..."yes, final answer".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background:
url(http://www.light-speed-web-graphics....st_00008.GIF);
}
#container {
position: relative;
width: 95%;
margin: 20px auto;
background: #000;
z-index: 2;
}
#xpander {
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 4px #eef outset;
overflow: hidden;
cursor: e-resize;
}
#xpander img {
display: block;
border: none;
}
#cthru {
position: absolute;
left: 422px;
top: 386px;
width: 140px;
height: 140px;
z-index: 3;
}
#cthru #trigger {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
cursor: e-resize;
z-index: 2;
}
#cthru img {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
z-index: 1;
}

</style>
<script type="text/javascript">

function expcon(obj)
{
if (document.getEl ementById)
{
obj.style.overf lowX = /scroll/.test(obj.style .overflowX) ?
'hidden' : 'scroll';
obj.style.overf low = /auto/.test(obj.style .overflow) ?
'hidden' : 'auto';
if ('undefined' != typeof obj.scrollLeft)
obj.scrollLeft = 0;
obj.title = /version/.test(obj.title ) ?
' ~ click to reset ~ ' : ' ~ click for full-size version ~ ';
if (obj = document.getEle mentById('cthru '))
obj.style.zInde x = /((^$)|0|3)/.test(obj.style .zIndex) ?
'1' : '3';
}
}

function routeclick(id)
{
var el;
if (document.getEl ementById
&& (el = document.getEle mentById(id))
&& 'undefined' != typeof el.onclick)
el.onclick();
}

function getTopBottom(id )
{
var obj = document.getEle mentById(id),
ht = obj.offsetHeigh t,
y = obj.offsetTop;
while ((obj = obj.offsetParen t) != null)
y += obj.offsetTop;
return {top: y, bottom: y + ht};
}

function init()
{
if (document.getEl ementById)
{
var xb, ct, tg, bclip, adj = 4,
cp = 'rect(auto auto 0px auto)';
if ((xb = getTopBottom('x pander').bottom )
&& (ct = getTopBottom('c thru').top)
&& (tg = document.getEle mentById('trigg er'))
&& !isNaN(bclip = (xb - ct - adj)))
{
tg.style.clip = cp.replace(/0/, bclip);
}
}
}

window.onload = init;

</script>
</head>
<body>
<div id="container" >
<div id="xpander"
title=" ~ click for full-size version ~ "
onclick="return expcon(this)">
<img src="http://www.leaney.org/walks/photos/20040430jp.jpg" >
</div></div>
<div id="cthru">
<img id="trigger"
title=" ~ click for full-size version ~ "
onclick="routec lick('xpander') "
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif">
<img
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif">
</div>
</body>
</html>

If you need to see the efficacy of this, add 'background: red;' to the
CSS for #cthru #trigger. 'adj' trims the clip to deactivate the border
area.

Again, googlegroups will probably mangle this, so, repaste any
truncated urls as needed, close tags, open in Notepad and look for any
control characters (dashes) inserted. Been haranguing those pinheads
for a week...

**RobB** · Jul 23 '05, 07:05 PM

Re: click-through to underlying element

nutso fasst wrote:[color=blue]
> "RobB" <ferndoc9@hotma il.com> wrote in message
> news:1112925560 .682317.191500@ o13g2000cwo.goo glegroups.com.. .[color=green]
> > Uses the regular expression /\bscroll\b/, which will match the[/color][/color]
string[color=blue][color=green]
> > 'scroll' (could have used /^scroll$/ or simply /scroll/ also); if[/color][/color]
it[color=blue][color=green]
> > matches, RegExp.test returns true which assigns 'hidden' to the
> > overflowX property, otherwise assigning 'scroll'. A toggle, in[/color][/color]
other[color=blue][color=green]
> > words.[/color]
>
> Ah, yes. I understand the toggle, I wasn't clear on the use of the[/color]
regex.[color=blue]
> Isn't
> obj.style.overf low = (obj.style.over flow=='auto') ? 'hidden' :[/color]
'auto';[color=blue]
> more efficient, and testing on the numeric value of zIndex more[/color]
efficient[color=blue]
> still? Having determined the zIndex, other tests are unnecessary, and[/color]
one[color=blue]
> 'if()' is more efficient than multiple toggles.[/color]

Suit yourself, it's not a repetitive/recursive routine. Go ahead and
fine-tune if you like, the gains will likely be minimal. It's also not
necessarily turn-key, this is a free forum !

z-index is a string, btw.
[color=blue][color=green]
> > Same for the overflow property. Setting both is required to[/color][/color]
suppress[color=blue][color=green]
> > the vertical scrollbar cross-browser.[/color]
>
> I was under the impression overflowX was a subset of overflow,[/color]
setting[color=blue]
> overflow sets both overflowX and overflowY.[/color]

I used to be under a lot of impressions, too, until I started playing
around with CSS in different browsers. One ends up using what works. If
you can find another approach, more power to you. Read some CSS
ngs/forums/blogs to see how unstraightforwa rd presentational coding can
get. #;=)

(snip)
[color=blue]
> Your 2nd solution looks good, tho it seems to me either an empty div[/color]
or a[color=blue]
> 1-pixel-high totally-transparent gif sized with CSS to the[/color]
overlapping area[color=blue]
> would work better than a clipped duplicate of the overlapped image.[/color]

No (see below). Why download that old 1-pixel-transparency when you
have the perfect item at hand: the very *same* transparency, ready for
'layering'.
[color=blue]
> On the off chance of no stylesheet support [ .. ][/color]

F-them.
[color=blue]
> I put " " in my overlapping div out of fear that some
> browser might ignore a click on an empty element, but perhaps that[/color]
isn't[color=blue]
> necessary. It works without it in IE and FF.[/color]

It does? Not here (ie6win2k)...

**nutso fasst** · Jul 23 '05, 07:06 PM

Re: click-through to underlying element

"RobB" <ferndoc9@hotma il.com> wrote in message
news:1112978784 .279472.228810@ z14g2000cwz.goo glegroups.com.. .
[color=blue]
> It does? Not here (ie6win2k)...[/color]

True on ie6winXP as well. Sheee-it. Earlier IE do work OK. Well, this has
definitely been interesting. I dumped the overlapping div and put a
fully-transparent gif over the other image overlap and pointed its onclick
to togglescroll. AFICT this does work on IE4-6, FF and Opera. As for
overhead in getting the gif...it's 46 bytes, and I'm more concerned about
the possibility of misalignment.

Thanks much for all your input.

This is gratis work for a local library support group, BTW. Prob'ly only one
fellow (besides me) at the far right of the wide image who'll use the
scroll.

nf

click-through to underlying element

Comment

Comment

Comment

Comment