Dynimically changing a CSS variable

[j3ff86]

I have this web page that I was given at work that displays a modal (a pop up basically) when you click a link(s). Here's the CSS snippet for that:
.modal
{

background-color: white;
border: solid 4px black;
position: relative;
top: 150;
left: 25;
width: 300px;
height: 300px;
padding: 0px;
}

The top & left control the pop up's position on the page. So basically they want the pop up to display wherever the mouse is. I've figured out how to capture the mouse X &Y coordinates in javascript but don't know how to transfer the values to the CSS section of the code. Is there another way I can do this?

 

[Mabrito]

I dont think you can change the values like that in CSS, though I may be wrong. Couldnt you just make another CSS class and just call that class in the code?

 

[tim_m]

document.getElementById("someId").style.top = newTopCoord + "px";
document.getElementById("someId").style.left = newLeftCoord + "px";

however, you are almost certain to encounter cross-browser issues. i would recommend using a library like prototype or jquery that makes getting the mouse coords and changing css stuff pretty easy.

 

[maw]

document.getElementById("someId").style.top = newTopCoord + "px";
document.getElementById("someId").style.left = newLeftCoord + "px";

however, you are almost certain to encounter cross-browser issues. i would recommend using a library like prototype or jquery that makes getting the mouse coords and changing css stuff pretty easy.

i second this idea.. no use re-inventing the wheel when such elegant solutions already exist.

 

[tim_m]

once you use a library you'll wonder how you ever lived without them

 

[j3ff86]

Thank you tim_m!! It works great.

 

[j3ff86]

I just found out that this only works for CSS classes declared with an ID (a #), and not with a selector (a period).

This is the heirarchy:

#modalPage{
blah
}

.modal {
blah
}

.modalTop{
blah
}

document.getElementByID works for modalPage, but not for modal & modalTop. Anyone know how to control the last two?

 

[tim_m]

your element in the page still needs an id, call it whatever you want. you don't necessarily have to use the id for css purposes as well but you need it in order to identify a specific element quickly.

so your element might look like
<div class="modal" id="ModalDiv1">...</div>
where ModalDiv1 is simply for id purposes and not used when specifying the css.