?
Solved

Jquery or Javascript - Get the name of the DIV looking for element properties

Posted on 2013-01-22
17
Medium Priority
?
356 Views
Last Modified: 2013-01-23
Hi E's, I have this code that show five boxes. Every one with different positions:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get the element with....</title>
<style>
#q1{position: absolute; width: 100px; height: 100px; left: 50px; top: 150px; background-color: black;}
#q2{position: absolute; width: 100px; height: 100px; left: 150px; top: 150px; background-color: green;}
#q3{position: absolute; width: 100px; height: 100px; left: 250px; top: 550px; background-color: yellow;}
#q4{position: absolute; width: 100px; height: 100px; left: 350px; top: 650px; background-color: red;}
#q5{position: absolute; width: 100px; height: 100px; left: 450px; top: 750px; background-color: blue;}
</style>
</head>
<body>
<div id="q1">a</div>
<div id="q2">b</div>
<div id="q3">c</div>
<div id="q4">d</div>
<div id="q5">e</div>
</body>
</html> 

Open in new window

I need to identify the name of the div that have position left: ??? and top: ???.
In practice, for example, how I identify in my code the div that have this position: "left: 250px; top: 550px;". The return in this case is "q3".
The solution can be in jQuery (priority) or in Javascript.

The best regards, JC
0
Comment
Question by:Pedro Chagas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 2
17 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 38806134
try something like

var div_name=$('div[left=250px]').id;

Open in new window


or

var div_name=$('div[left=250px && top=550px]').id;

Open in new window

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806220
Hi, thanks for the answer. I try your code, but not work.
This is the new code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get the element with....</title>
<style>
#q1{position: absolute; width: 100px; height: 100px; left: 50px; top: 150px; background-color: black;}
#q2{position: absolute; width: 100px; height: 100px; left: 150px; top: 150px; background-color: green;}
#q3{position: absolute; width: 100px; height: 100px; left: 250px; top: 550px; background-color: yellow;}
#q4{position: absolute; width: 100px; height: 100px; left: 350px; top: 650px; background-color: red;}
#q5{position: absolute; width: 100px; height: 100px; left: 450px; top: 750px; background-color: blue;}
</style>
</head>
<body>
<div id="q1">a</div>
<div id="q2">b</div>
<div id="q3">c</div>
<div id="q4">d</div>
<div id="q5">e</div>

<script>
var div_name = $('div[left=250px && top=550px]').id;
alert(div_name);
</script>
</body>
</html> 

Open in new window

What is wrong?

~JC
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38806238
try this:

    var elements=getElementsByPos({top:150,tag:'div'});
    function getElementsByPos(obj)
    {
        var selector='';
        var elements=[];
        
        if(obj.tag)
            selector=obj.tag;
        if(obj.className)
            selector+="."+obj.className;            
        
        $(selector).each(function(i,e){
            $this=$(this);
            var position=$this.position();
            if(obj.left&&obj.top)
            {
                if(position.left==obj.left&&position.top==obj.top)
                    elements.push($this);
            }
            else if(obj.left)
            {
                if(position.left==obj.left)
                    elements.push($this);
            }
            else if(obj.top)
            {
                if(position.top==obj.top)
                    elements.push($this); 
            }
        });
        return elements;    
    }

Open in new window

0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 35

Expert Comment

by:YZlat
ID: 38806245
wrong question
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806275
wrong question?
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38806298
You could always use:

function getElementByPosition(left,top)
{
 var element = document.elementFromPoint(left,top);
 return element;
}
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806350
Hi @ludwigDiehl, I need identify the "div" that have the position left and top, not just top, and in your solution, I think, just give me the "div's" that have position 'top' and not 'left' position. The solution have to give me the div that have in simultaneous 'top' and 'left'.

~JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806370
Hi again @ludwigDiehl.
I use your last code in this way: (My knowledge in js are very poor)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get the element with....</title>
<style>
#q1{position: absolute; width: 100px; height: 100px; left: 50px; top: 150px; background-color: black;}
#q2{position: absolute; width: 100px; height: 100px; left: 150px; top: 150px; background-color: green;}
#q3{position: absolute; width: 100px; height: 100px; left: 250px; top: 550px; background-color: yellow;}
#q4{position: absolute; width: 100px; height: 100px; left: 350px; top: 650px; background-color: red;}
#q5{position: absolute; width: 100px; height: 100px; left: 450px; top: 750px; background-color: blue;}
</style>
</head>
<body>
<div id="q1">a</div>
<div id="q2">b</div>
<div id="q3">c</div>
<div id="q4">d</div>
<div id="q5">e</div>

<script>
function getElementByPosition(left,top)
{
 var element = document.elementFromPoint(left,top);
 return element;
}
getElementByPosition("150","150");
alert(element);

</script>
</body>
</html> 

Open in new window

What is wrong in my update?

~JC
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38806411
My first solution actually includes both positions:

This is my example:
var elements=getElementsByPos({top:150,tag:'div'});

Open in new window

You could use it this way:
var elements=getElementsByPos({left:50,top:150,tag:'div'});

Open in new window


I was working on another way:
var elements=getElementsByPos('div',{left:50,top:150});
function getElementsByPos(selector,position)
    {
        var type;
        if(position.top&&position.left)
            type=1;
        else if(position.top)
            type=2;
        else if(position.left)
            type=3;     
        return $(selector).filter(function(){
            var pos=$(this).position();
            var ok=true;
            switch(type)
            {
                case 1:
                    ok=pos.top==position.top&&pos.left==position.left;    
                break;
                case 2:
                    ok=pos.top==position.top;
                break;
                case 3:
                    ok=pos.left==position.left;
                break;
            }
            return ok;
        });
    };

Open in new window

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806439
Ok, but how I see the var elements, I try put in "alert" but the output is "object Object"?

~JC
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38806482
try this:

<div id="results"></div>
<script type="text/javascript">
$results=$('#results');
   $.each(elements,function(i,e){
        $results.append($(e).attr('id')+'<br/>');
   });
</script>

Open in new window

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806521
Work, thanks.
I do not want to abuse the goodwill, but I need a little help for finish.
I have certain that don't have divs with the same left and top, all elements have different positions, so the result is always 1.
In this case if I want put the result in a normal variable, how I do?

~JC
0
 
LVL 6

Accepted Solution

by:
Ludwig Diehl earned 2000 total points
ID: 38806558
I suggest you extend this as a jquery method like this:


Put this on a file jquery.ext.js
(function($,undefined) {
    $.fn.extend({    
        getByPosition:function(position)
        {
            var type;
            if(position.top&&position.left)
                type=1;
            else if(position.top)
                type=2;
            else if(position.left)
                type=3;     
            return this.filter(function(){
                var pos=$(this).position();
                var ok=true;
                switch(type)
                {
                    case 1:
                        ok=pos.top==position.top&&pos.left==position.left;    
                    break;
                    case 2:
                        ok=pos.top==position.top;
                    break;
                    case 3:
                        ok=pos.left==position.left;
                    break;
                }
                return ok;
            });          
        }
    })
})(jQuery);

Open in new window



Your html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src="jquery.ext.js" type="text/javascript"></script>
<title>Get the element with....</title>
<style>
#q1{position: absolute; width: 100px; height: 100px; left: 50px; top: 150px; background-color: black;}
#q2{position: absolute; width: 100px; height: 100px; left: 150px; top: 150px; background-color: green;}
#q3{position: absolute; width: 100px; height: 100px; left: 250px; top: 550px; background-color: yellow;}
#q4{position: absolute; width: 100px; height: 100px; left: 350px; top: 650px; background-color: red;}
#q5{position: absolute; width: 100px; height: 100px; left: 450px; top: 750px; background-color: blue;}
</style>
</head>
<body>
<div style="position: absolute; left: 250px">
<div id="q1">a</div>
<div id="q2">b</div>
<div id="q3">c</div>
<div id="q4">d</div>
<div id="q5">e</div>
</div>
<div id="results"></div>
</body>
</html> 
<script type="text/javascript">
$(document).ready(function(){   
   elements=$('div').getByPosition({top:150,left:50});
   $results=$('#results');
   $.each(elements,function(i,e){
        $results.append($(e).attr('id')+'<br/>');
   }); 
})	
</script>  

Open in new window



You only need to change the selector so instead of div put anything you want.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38806733
Hi, I don't understand how I put the first result in a normal variable. Please show me.

~JC
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38810183
What do you mean by "normal variable"?.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38810484
Hi. Normal variable is the variable with one value, like var somevar = "a value".
Your solution returns an array, and I want to put a variable the first result of this array, this is the reason for saying normal variable.
After searching I found this solution: "var somevariable = $(e).attr('id');". This solution works. If you were as you were doing?

~JC
0
 
LVL 6

Expert Comment

by:Ludwig Diehl
ID: 38811176
Yeah of course you can do that. Just remember that in that case it returns a single value as you are passing a dom object as a selector $(element) or in case only one element matches.
However if u use for instance

va somevariable=$('div').attr('id');

Open in new window


It may give you no result as there might be several divs on your page


$('selector') will return a single value as it is indeed an array returned thats why you can loop through it using each
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question