CODEWITHSUNDEEP
javascripthtmlcss
S R Maiti
S R Maiti

Reputation: 307

How to center an object generated by javascript?

I am new to HTML5, and I am trying to write a webpage with a jmol image.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JSmol.lite.js"></script>
<script type="text/javascript">
    var Info;;(
    function()
    {
    Info =
    {
    width: 500,
    height: 500,
    debug: false,
    color: "0xC0C0C0",
    addSelectionOptions: true,
    serverURL: "",
    use: "HTML5",
    readyFunction: null,
    defaultModel: ":serotonine",
    bondWidth: 4,
    zoomScaling: 1.5,
    pinchScaling: 2.0,
    mouseDragFactor: 0.5,
    touchDragFactor: 0.15,
    multipleBondSpacing: 4,
    spinRateX: 0.2,
    spinRateY: 0.5,
    spinFPS: 20,
    spin:false,
    }
    }
    )();
</script>

I am adding this code into the <head> of the HTML, and then adding the following code where I need to insert the image of the molecule.

<script id="java">
   Jmol.getTMApplet("jmol", Info)
</script>

However, no matter what I try, I cannot get the jmol picture to the center of the page. I have tried using a class or id in the <script> tags, and then adding display: block; and text-align: center; in CSS. I have also tried margin: auto;. But nothing seems to work, the jmol image keeps at the left end of the webpage.

Using the inspect element on the jmol image gives:

<div id="jmol_appletinfotablediv" style="width:500px;height:500px;position:relative;font-size:14px;text-align:left">
<div id="jmol_appletdiv" style="z-index: 9000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block;">
<canvas style="width: 100%; height: 100%;" width="500" height="500" id="jmol_canvas2d"></canvas></div>
<div id="jmol_2dappletdiv" style="position:absolute;width:100%;height:100%;overflow:hidden;display:none"></div>
<div id="jmol_infotablediv" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none;">
<div id="jmol_infoheaderdiv" style="height: 20px; width: 100%; background: yellow none repeat scroll 0% 0%; display: none;">
<span id="jmol_infoheaderspan">Jmol._Canvas2D (TwirlyMol) "jmol"</span>
<span id="jmol_infocheckboxspan" style="position:absolute;text-align:right;right:1px;">
<a href="javascript:Jmol.showInfo(jmol,false)">[x]</a>
</span></div>
<div id="jmol_infodiv" style="position:absolute;top:20px;bottom:0px;width:100%;height:100%;overflow:auto"></div></div></div>

I am using the lightweight jmol, if you didn't already notice. I am a chemist, and I don't have much experience with coding, so a simple solution would be better.

Upvotes: 0

Views: 744

Answers (2)

Anis R.
Anis R.

Reputation: 6922

Script tags in HTML are not rendered on the page, they just execute whatever javascript is inside them. Therefore, applying styles to the <script> element won't do anything.

You need to figure out where (i.e. in which div or element) the Jmol.getTMApplet("jmol", Info) renders the molecule.

How to know:

In your browser, right click on the molecule and select "Inspect element". You will then know in which div/element the molecule is rendered.

Once you find the right element, add to this element the id of "java" for example.

**Edit: ** Just noticed you edited your question, so the element we want to manipulate is the one with ID "jmol_appletinfotablediv"

Then using CSS, applying margin:auto and/or text-align:center to the span element with the correct ID.

Upvotes: 1

G.Dimov
G.Dimov

Reputation: 2393

If you want to center the element:

  • horizontally and vertically:
.parent {
  position: relative;
}
#jmol_appletinfotablediv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In your case it's not clear who the parent of the #jmol_appletinfotablediv div tag. See where is nested and replace .parent with the actual parent

  • Center horizontally
#jmol_appletinfotablediv {
  margin: 0 auto;
}
  • Vertically
.parent {
  position: relative;
}
#jmol_appletinfotablediv{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Same case with center horizontally and vertically, replace .parent with the actual parent.

  • If neither of this works for you, most probably the generated HTML has inlined CSS which overwrites your CSS rules. I haven't tried JMol before, if this doesn;t help you, I'll take another look.

Cheers

Upvotes: 3

Related Questions