3 Replies - 2736 Views - Last Post: 06 August 2010 - 03:27 AM

#1 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

load different data in same div based on the events

Posted 05 August 2010 - 11:52 PM

Hi,there.I just want to know,is it possible to load a div but the content loaded is based on what event triggered?

For example,when I mouseover a <tr>,it loads details of product inside a <div>.But when I click a 'View Image' link (which is placed inside the same <tr>),it will load the image inside the same <div>.

I was thinking to use if..else statement.But I don't know how to do it.

Guys,any ideas? :)

TIA

Is This A Good Question/Topic? 0
  • +

Replies To: load different data in same div based on the events

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: load different data in same div based on the events

Posted 06 August 2010 - 02:32 AM

there is no need for an if … else. you have two different events, which have a handler function each, so the mouseover handler will trigger the text content and the click handler will trigger the image content. however, your have to cancel the mouseover event after the click, otherwise the image will be replaced by text on the next mouse movement. (and of course you have to re-enable the mouseover event again at some point)

This post has been edited by Dormilich: 06 August 2010 - 02:33 AM

Was This Post Helpful? 0
  • +
  • -

#3 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

Re: load different data in same div based on the events

Posted 06 August 2010 - 02:39 AM

View PostDormilich, on 06 August 2010 - 01:32 AM, said:

there is no need for an if else. you have two different events, which have a handler function each, so the mouseover handler will trigger the text content and the click handler will trigger the image content. however, your have to cancel the mouseover event after the click, otherwise the image will be replaced by text on the next mouse movement. (and of course you have to re-enable the mouseover event again at some point)


Ok..so,how should I do it?Can you give me an example on how to cancel the mouseover after the click event?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: load different data in same div based on the events

Posted 06 August 2010 - 03:27 AM

View Postbabysitter, on 06 August 2010 - 09:39 AM, said:

Can you give me an example on how to cancel the mouseover after the click event?


that can reach different levels of complexity …

DOM 0 (IE compatible)
function setText()
{
	//# set text in div
}
function setImage()
{
	//# set image in div
}
function cancelMouse(evt)
{
	evt = evt || window.event; // IE fix
	evt.stopPropagation();     // W3C
	evt.cancelBubble = true;   // IE
}
td.onmouseover = setText;
a.onclick      = setImage;
a.onmouseover  = cancelMouse;


drawback: the image will be replaced by the text, when you move away from the link. (but currently I have no idea how to fix that sensibly).

I probably could create some code, that uses global variables though …

This post has been edited by Dormilich: 06 August 2010 - 03:28 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1