event handler in Firefox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

event handler in Firefox

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Moved to Client-side...
User avatar
SystemWisdom
Forum Commoner
Posts: 69
Joined: Sat Mar 26, 2005 5:54 pm
Location: A Canadian South of the 49th Parallel

Post 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!
magicrobotmonkey
Forum Regular
Posts: 888
Joined: Sun Mar 21, 2004 1:09 pm
Location: Cambridge, MA

Post by magicrobotmonkey »

<hijack>
How does that 'preloading images' thing work?

</hijack>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
Post Reply