Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1067
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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