Solved

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

Posted on 2014-02-22
3
721 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
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 54

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

785 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