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

How do you move a DIV relative to where it is using JavaScript?

I have a DIV element and I'd like to move it up by 90 pixels relevant to where it is.  How can this be achieved?

Here's an example of what I want:
http://www.vizzed.com/videogames/
When you hover over the game systems area (above the search box), the game system area gets bigger but I'd like for it to also move up by 90 pixels so that when it does get bigger, it only blocks out the stuff above it rather than the stuff below it.

Here's the javascript code I'm currently working with
onmouseout=\"
						document.getElementById('allSystems').style.height='74px'; 
						document.getElementById('allSystems').style.backgroundColor='transparent';\" 
					onmouseover=\"
						document.getElementById('allSystems').style.height='164px'; 
						document.getElementById('allSystems').style.backgroundColor='#6d87ac';\" 

Open in new window

0
davideo7
Asked:
davideo7
1 Solution
 
Tom BeckCommented:
You can try this however there are numerous validation errors on the page and using inline javascript like this screams trouble to me.

Starting at line 381 of your markup, make the changes in bold.

<table cellspacing="0" cellpadding="0" style="text-align:left;position:relative">
<tbody><tr><td>
                        <div style="margin: 0px -487px 0px 0px; padding: 0px; border-bottom-style: solid; border-bottom-width: 1px; width: 974px; height: 74px; overflow-y: scroll; overflow-x: hidden; display: inline-block; position: absolute; right: 50%; top: 0; z-index: 2; background-color: transparent;"
onmouseover="
document.getElementById('allSystems').style.height='164px';
document.getElementById('allSystems').style.top='-90px';
document.getElementById('allSystems').style.backgroundColor='#6d87ac';"
onmouseout="
document.getElementById('allSystems').style.height='74px';
document.getElementById('allSystems').style.top='0';
document.getElementById('allSystems').style.backgroundColor='transparent';" id="allSystems">

...

B.T.W., it's not necessary to find the element by Id like document.getElementById('allSystems') when you are already inside the element you intend to modify with javascript. Just use "this".

onmouseover="
this.style.height='164px';
this.style.top='-90px';
this.style.backgroundColor='#6d87ac';"
onmouseout="
this.style.height='74px';
this.style.top='0';
this.style.backgroundColor='transparent';"
0
 
Julian HansenCommented:
Markup is in a bit of a mess. Using tables for layout is also adding to your problems.

If you did a standard <div> layout you could do everything you need with CSS.

First clear all the validation errors - and then consider moving away from your table layout.
0
 
davideo7Author Commented:
That worked perfectly!  And thanks for the tips.
0

Featured Post

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.

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