javascripthtmlcss

Div ID and Class

I have a livechat script. The livechat on my sandbox site is fixed to the bottom right of the site and scrolls with the window, but on my live site (the one this specific code is from) it is attached to the footer.

The only code I'm using on my sandbox is the script and div ID (top and bottom, not middle).

Here is what I am using on my live site:

<script type="text/javascript">
  (function() {
    var c = document.createElement('script');
    c.type = 'text/javascript'; c.async = true;
    c.src = "http://northamericahvac.smartertrack.com/ChatLink.ashx?config=0&id=stlivechat0";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(c,s);
  })();
</script>
<style>
  div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
  }
</style>
<div class="fixed">
  <div id="stlivechat0"></div>
</div>​

The rest I have added to try to format the livechat button. I want it to be fixed to the bottom right so that it scrolls and isn't stuck in the bottom right.

I read that you can create a div class to format stuff included in the class, but it doesn't seem to extend to the div id. Does the div id already have formatting and is overriding div class?

I created the little #73AD21 bar to see if it would stay fixed, and not even that does.

Solution

  • I'd say your problem is not CSS related. The script errors because wrapping any JavaScript code into 

    <script>
  ( javascript code here )()
</script>

    means: "treat this code as a function and run it the very moment you process it!"

    Which means it is run before the <div> (placed below it) was added to the page. Which means it won't find a DOM element with id="stlivechat0" (it's inside the link).

    Most likely, you were advised to place this <script> tag just before the ending </body> tag (or at least after the <div> with id="stlivechat0"). But you don't really have to: its authors wanted to prevent this type of problems. In fact, you can always place the code in a named function and call this function by its name later.

    The typical time to run such a function is the window.onload event (when all resources loaded). Another good such moment is document.ready (when all the DOM was built - beware not all scripts can be run on document.ready - not all resources are loaded, including scripts, stylesheets, images or media.

    However, in your case, the simplest solution is just to place the <script> tag after the <div>:

    <style>
  div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
  }
</style>
<div class="fixed">
  <div id="stlivechat0"></div>
</div>
<script type="text/javascript">
  ({
    var c = document.createElement('script');
    c.type = 'text/javascript'; c.async = true;
    c.src = "http://northamericahvac.smartertrack.com/ChatLink.ashx?config=0&id=stlivechat0";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(c,s);
  })();
</script>

    Do note your script can't run on StackOverflow (it's blocked, as it's not served over https://).

    But, as you can see, the CSS applies.

    As Sebastian noted in the comment below, an equivalent of placing your script on window.onload event is adding the defer attribute to it: <script src="..." defer>. It's supported by above 95% of currently used browsers.