Need help badly, about div and overlapping issues

Dev Shed Forums Sponsor:

July 2nd, 2009, 12:13 AM

Kamen_Rider

Contributing User

Join Date: Jul 2009

Posts: 35

Time spent in forums: 21 m 18 sec
Reputation Power: 1

Need help badly, about div and overlapping issues

Hi guys, I am currently into a project of a web development. And I have some problems trying to advance into another stage, so I wanted to ask you guys for your opinion on how to solve these problems.

First of all, my webpage will generate a numbers of DIV tag which have a size of 100 width and height, but of cause I used 100 just for the bugging period.

The numbers of generated DIV tag will randomly appear on the screen, which I created a bigger DIV tag for them to be randomize and created. But when randomizing their position on the screen/big Div tag, I found out that there are chances which few DIV tag(the generated ones) will be overlapping each other.

So I wanted to ask if there is any solutions to overcome this problems?

I tried some logically if else and while loop to solve this, but still they are appearing when i run the page.

I wonder if there are any methods or function which will helps to check if any elements like div tags is placed on X and Y axis of the screen?

Thanks

July 2nd, 2009, 03:38 AM

Tukaro

Standing 3 feet to the left.

Join Date: Jan 2006

Location: USA

Posts: 1,285

Time spent in forums: 1 Week 4 Days 2 h 14 m 7 sec
Reputation Power: 119

You can use the offset properties. Basically, you want to find the X and Y co-ordinates inside of your new DIV and see if any one is between the two alternate corners of other boxes. In psuedocode:

Code:

isInside(newBox, oldBox)
{
   corners = new Array(); //starting top-left
   corners[TOPLEFT] = [newBox.offsetLeft, newBox.offsetTop];
   corners[TOPRIGHT] = [newBox.offsetLeft+newBox.offsetWidth, newBox.offsetTop];
   corners[BOTLEFT] = [newBox.offsetLeft, newBox.offsetTop+newBox.offsetHeight];
   corners[BOTRIGHT] = [corners[TOPRIGHT][0],corners[BOTLEFT][1]];

   for(i=0; i<4; i++)
   {
      if(oldBox.offsetLeft < corners[i][0] && corners[i][0] < oldBox.offsetLeft+oldBox.offsetWidth)
         return true;
      if(oldBox.offsetTop < corners[i][1] && corners[i][1] < oldBox.offsetTop+oldBox.offsetHeight)
         return true;
   }
   return false;
}

If you don't want them touching, you can use <=.

__________________
I'd rather teach you to fish than give you a fish. I reserve the right to also slap you with the fish.

July 2nd, 2009, 04:46 AM

Kamen_Rider

Contributing User

Join Date: Jul 2009

Posts: 35

Time spent in forums: 21 m 18 sec
Reputation Power: 1

Quote:

Originally Posted by Tukaro

You can use the offset properties. Basically, you want to find the X and Y co-ordinates inside of your new DIV and see if any one is between the two alternate corners of other boxes. In psuedocode:

Code:

isInside(newBox, oldBox)
{
   corners = new Array(); //starting top-left
   corners[TOPLEFT] = [newBox.offsetLeft, newBox.offsetTop];
   corners[TOPRIGHT] = [newBox.offsetLeft+newBox.offsetWidth, newBox.offsetTop];
   corners[BOTLEFT] = [newBox.offsetLeft, newBox.offsetTop+newBox.offsetHeight];
   corners[BOTRIGHT] = [corners[TOPRIGHT][0],corners[BOTLEFT][1]];

   for(i=0; i<4; i++)
   {
      if(oldBox.offsetLeft < corners[i][0] && corners[i][0] < oldBox.offsetLeft+oldBox.offsetWidth)
         return true;
      if(oldBox.offsetTop < corners[i][1] && corners[i][1] < oldBox.offsetTop+oldBox.offsetHeight)
         return true;
   }
   return false;
}

If you don't want them touching, you can use <=.

hello and thanks for ur help, however could u explain in a bit more detail how does this works? I had troubles understanding those codes, ty.

July 3rd, 2009, 01:07 AM

Tukaro

Standing 3 feet to the left.

Join Date: Jan 2006

Location: USA

Posts: 1,285

Time spent in forums: 1 Week 4 Days 2 h 14 m 7 sec
Reputation Power: 119

Not a whole lot more to explain than what I did: it takes an already-created div (oldBox) and checks if any corner of the newly-created div (newBox) is within that old div. If so, that means that one div will overlap the other, and so it returns true. The FOR statement compares each corner with the X and Y edges of the old div to see if a corner is between them. If no corner is within the old div, then it returns false.

Also, I realize now that I've made a mistake. Here is how the for statement should be:

Code:

   for(i=0; i<4; i++)
   {
      if(oldBox.offsetLeft < corners[i][0] && corners[i][0] < oldBox.offsetLeft+oldBox.offsetWidth
         && oldBox.offsetTop < corners[i][1] && corners[i][1] < oldBox.offsetTop+oldBox.offsetHeight)
         return true;
   }

I'm sure there's a better way to set this up, this is just something I put out quickly.

Read that link I posted to learn more about how offset parameters work. You will also need to modify it to work in some other browsers like IE.

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Need help badly, about div and overlapping issues

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.

Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.

Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.

Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.

Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.

More Free IT White Papers!