• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 502
  • Last Modified:

How to select containing div in mouse handler in designmode iframe

If the user clicks with a given class, or within a child node of a div with that class, I need to be able to select the div (not the child, the div of the specified class). For example, given the following html:

<div class='itemsection' id='1001'>
      text 1
      <span class='b'  id='1002'>
            text 2
      </span>
      <span class='c'  id='1003'>
            text 3
      </span>
</div>

<div class='c'>
      other text
</div>er text
</div>

If the user clicks in div 1001, 1002, or 1003, then I want to select div 1001.

I can already determine if the click is with the itemsection class using the mouse event handler in the attached code. So my question is, how do I select the div of class 'itemsection'


function handleMouseClick(e) {
        if (isInItemSection(e.target)) {
		// click is within 'itemsection' div or its child, but how do I select the itemsection div ?
        }
    }

    function isInItemSection(c) {
        do {
            try {
                if (c.className.indexOf('itemsection') != -1) {
                    return true;
                }
            } catch (e) {}
            c = c.parentNode;
        } while (c && c != null);
        return false;
    }

Open in new window

0
emsttam
Asked:
emsttam
  • 3
  • 2
1 Solution
 
aboo_sCommented:
function findParentDiv(elem){
var parent = elem.parentNode;
if(parent && parent.tagName.toUpperCase()!="DIV"){
parent = findParentDiv(parent);
}
return parent;
}
0
 
emsttamAuthor Commented:
aboo_s,

I already have code to get the div (attached to the original question), what I need to know is how to select it.
0
 
Albert Van HalenAnalyst developerCommented:
What do you mean with 'select' it.
Change the look of the element?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
emsttamAuthor Commented:
This is in an iframe in designmode. Select means to emulate a user selection. It will involve setting the correct range :

http://www.quirksmode.org/dom/range_intro.html

But I don't know how to set the range for a given div.
0
 
Albert Van HalenAnalyst developerCommented:
Tested in FireFox.
Getting the parent div only returns true or false in your case...
Small modification is made to return the actual element...
function handleMouseClick(e) {
	var p = isInItemSection(e.target);
	if (p != null) {
		var userSelection = window.getSelection();
		var range = document.createRange();
		range.selectNode(p);
		userSelection.addRange(range);
	}
	e.cancelBubble = true;
}

function isInItemSection(c) {
	do {
		try {
			if (c.className.indexOf('itemsection') != -1) {
				return c;
			}
		} catch (e) {return null; }
		c = c.parentNode;
	} while (c && c != null);

	return null;
}

Open in new window

0
 
emsttamAuthor Commented:
Works for me, thanks.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now