Solved

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

Posted on 2014-02-22
3
750 Views
Last Modified: 2014-02-22
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
Comment
Question by:davideo7
[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
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39879195
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39879749
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
 

Author Closing Comment

by:davideo7
ID: 39879794
That worked perfectly!  And thanks for the tips.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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…

734 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