Solved

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

Posted on 2013-01-22
17
345 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 500 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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.
The viewer will learn how to dynamically set the form action using jQuery.
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)

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now