Page 1 of 1

event handler in Firefox

Posted: Wed Mar 30, 2005 1:10 pm
by Burrito
I've been banging my head on my desk all morning and bugging the he|| out of Feyd to help me with this, but I just can't seem to find a solution:

I have some js that works fine in IE to create a growing div when I click on an element on my page. It grows right where the mouse was clicked as you can see with this:

Code: Select all

(horz == &quote;left&quote; ? th.left=event.clientX  - 50 : th.left=event.clientX - 100);	  
(horz == &quote;left&quote; ? th.top=event.clientY  - 60 : th.top=event.clientY);
that *obviously* doesnt' work in FF as event.clientX nor any "event" stuff works.

I found this:

Code: Select all

function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent(&quote;on&quote;+evType, fn);
    return r;
  } else {
    alert(&quote;Handler could not be attached&quote;);
  }
}
after some arduous searching but I'm not sure how to implement that into my model.

basically I just need to detect whether it's ff or not (can alraedy to that on my own) and then provide the appropriate code to determine where on the page the mouse was clicked to start growing my div.

this is only my first hurdle but I wanna do this in baby-steps.

THANKS! :D

Burr

...yes aware I am it's yoda-speak day, but too lazy I was to write all of this up in yoda-speak and make sure you understood it all I did. 8O

Posted: Wed Mar 30, 2005 1:20 pm
by feyd
Moved to Client-side...

Posted: Wed Mar 30, 2005 1:22 pm
by SystemWisdom
I think I understand what you want, but I may be wrong..

Anyway, check my website System Wisdom and at the very top is a button called "Member Section", click it (the page wont change) and a new section (within a div tag) appears instantly.. This works perfectly in every browser I have seen it in (IE, FF, Opera, NN) and is very simple.. (with no specific cross-browser code, all code is compliant in all browsers, afaik)

Make a div around the content you want hidden like:

Code: Select all

<div id=&quote;myHiddenArea&quote; style=&quote;display:none;&quote;>
blah blah blah...
</div>
Then make a button to show/hide the area like:

Code: Select all

<a href=&quote;javascript:AdjustDisplay('myHiddenArea');&quote;>Click me</a>
And then make the JS script:

Code: Select all

function AdjustDisplay( szElement )
{   var oSection = document.getElementById( szElement );
    if( oSection.style.display == 'none' )
    {   oSection.style.display = '';
    }else
    {   oSection.style.display = 'none'
    }
    return;
}
So all together, it could look like:

Code: Select all

<html>
<head><title></title>
<script language=&quote;javascript&quote;><!--
function AdjustDisplay( szElement )
{   var oSection = document.getElementById( szElement );
    if( oSection.style.display == 'none' )
    {   oSection.style.display = '';
    }else
    {   oSection.style.display = 'none'
    }
    return;
}
//--></script>
</head>
<body>

Blah blah blah 

<br><br>

<div id=&quote;myHiddenArea&quote; style=&quote;display:none;&quote;>
<br><br><br>
Secret blah blah blah...
<br><br><br>
</div>

<br><br><br>

Blah blah blah..

<br><br><br>

<a href=&quote;javascript:AdjustDisplay('myHiddenArea');&quote;>Secret Area!</a>

<br><br><br>

</body>
</html>
I hope that helps!

Posted: Wed Mar 30, 2005 1:45 pm
by magicrobotmonkey
<hijack>
How does that 'preloading images' thing work?

</hijack>

Posted: Wed Mar 30, 2005 1:53 pm
by feyd
magicrobotmonkey wrote:<hijack>
How does that 'preloading images' thing work?

</hijack>
quick basics:

Javascript creates a new internal image object, which in turn prompts the browser to request and cache the image. When the same source is referenced again, the cache is used. Pretty simple actually.

Posted: Wed Mar 30, 2005 2:23 pm
by Burrito
system, thx for the reply, but it's not what I'm after. I don't just need to show or hide a div but rather I need to make the div appear where I click (absolutely positioned div). This could be at the top of the page, or at the bottom.

I need to determine where the mouse was clicked on the page and then make a div appear there. Basically the same thing that stuff like overlib does.

does that make more sense?

Posted: Wed Mar 30, 2005 2:34 pm
by Burrito
finally found one I did that works

Code: Select all

<script>
function findPosX(obj)
{
   var curleft = 0;
   if (obj.offsetParent)
   {
          while (obj.offsetParent)
          {
                  curleft += obj.offsetLeft
                  obj = obj.offsetParent;
          }
   }
   else if (obj.x)
          curleft += obj.x;
   alert(curleft);

}

function findPosY(obj)
{
   var curtop = 0;
   if (obj.offsetParent)
   {
          while (obj.offsetParent)
          {
                  curtop += obj.offsetTop
                  obj = obj.offsetParent;
          }
   }
   else if (obj.y)
          curtop += obj.y;
   alert(curtop);
}

</script>