[FIXED] Why is document.body == null in Firefox but not Safari

July 18, 2022 colorbox, document-body, drupal-6, firefox, jquery No comments

Issue

I have a problem with a page where I am trying to get colorbox (a kind of lightbox for jQuery) working. It doesn't work apparently due to the document.body being null in FireFox (3.5.3). This is not the case in Safari (4.0.3) where the colorbox works.

Something that jumps out at me is that (I'm using Drupal 6) drupal has appended a script tag to set some JavaScript variables at the very bottom of the page, below the closing body and html tags. Otherwise I don't see a problem. Unfortunately I'm having a lot of trouble getting it not to do that. Could it be this that's causing FF to have issues with the body?

Using colorbox's example files in Firefox does work (and the document.body is defined there).

Is there any way I could use jQuery to refill the document.body property with something from $() perhaps, or should I keep banging at drupal to not put a script tag outside the html tags (easier said than done)?

To clarify the document.body is null even after the page is done loading. Here's a Firebug console capture:

>>> document.body
null
>>> $().attr('body')
null

Solution

The usual reason document.body is null is because you're executing script before the <body> tag(*) has been encountered. Without seeing code I can't say for sure, but that'd be the usual reason. Move where you've put the scripts.

(*: or another element such as <p> that the browser knows can't occur outside of a body, in which case it silently adds a <body> to fix up your missing markup. A difference in parsing of certain usually-in-body-tags might explain why Safari allows you to get away with it.)

Could it be this that's causing FF to have issues with the body?

No. It's broken markup and Drupal shouldn't do it, but closing the </body> doesn't stop document.body referencing the proper DOM Node.

Is there any way I could use jQuery to refill the document.body

No, document.body is only reflecting basically the same as document.getElementsByTagName('body')[0], so trying to set it is not sensible, and if you can't find a body with document.body, jQuery won't be able to find it with $('body') either.

Answered By - bobince

Answer Checked By - Senaida (PHPFixing Volunteer)

[FIXED] Why scrollbars appear, when I resize the canvas?

July 18, 2022 canvas, document-body, javascript No comments

Issue

I made a page, where the canvas should fill the window. It works, but for some reason scrollbars appear. I don't know, what is the error.

<!doctype html>
<html>

  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style type="text/css">
      #canvas {
        background-color: #EEEEEE;
      }
      * {
        margin: 0px;
      }
    </style>
    <script type="text/javascript">
      function getSize() {
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth ||          document.body.clientHeight ) ) {
          //IE 4 compatible
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
        }
        return {x:myWidth,y:myHeight};
      }

      window.onload = function () {
        canvas = document.getElementById('canvas');
        var size = getSize();
        canvas.width = size.x;
        canvas.height = size.y;
      };
    </script>
  </head>

  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
  </body>

</html>

Solution

Switching #canvas to a block did the trick for me:

#canvas {
    display: block;
    background-color: #EEEEEE;
}

Answered By - fixlr

Answer Checked By - Katrina (PHPFixing Volunteer)

[FIXED] why does the top button still link to the top of the page?

July 18, 2022 document-body, html No comments

Issue

I have a button <a href="#top">Top</a> linking to the top of the page <body id="top"></body> but when removing the id of the body the button still works. I cant work this out, I put it down to the browser cacheing data although I have emptied the cache and re-tried and it still works. This is purely informative, its not causing me any issues.

Solution

I believe if the id does not exist, the browser will handle it the same as '#'. Which links to the start of the page.

Answered By - monokh

Answer Checked By - Marie Seifert (PHPFixing Admin)

[FIXED] How prevent inheriting "position: relative" CSS

July 18, 2022 asp.net, css, document-body, positioning No comments

Issue

my body style is like below :

*
{
    padding: 0px;
    margin: 0px;
}
html, body
{
    background-color: #006F92;
    position: relative;
    direction: rtl;
    font: 9pt Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
    color: #0061B7;
    height: 100%;
    top: 0px;
    right: 0px;
}

there is a fieldset in my body like below :

<fieldset id="fieldset_From">
    <legend>Web Site Names</legend>
    <asp:Label ID="lblFrom" runat="server" Text="Web Site Names" ForeColor="#00FF5A"></asp:Label>&nbsp;&nbsp;
    <telerik:RadComboBox ID="radcbFrom" runat="server" DataSourceID="sdsFrom_WebSites"
        DataTextField="From_WebSite" DataValueField="ID" EnableEmbeddedSkins="false" Skin="BlackByMe"
        ValidationGroup="A" Width="240px" LoadingMessage="Loading..." CausesValidation="False"
        MaxHeight="150px" AppendDataBoundItems="True">
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="All" Value="-1" />
        </Items>
    </telerik:RadComboBox>
</fieldset>

the slider of that Telerik RadComboBox has problem with position: relative; in my body.
i need that positioning in body.
how can i prevent RadComboBox Slider to inherit positioning from body?

EDIT :
rendered HTML :

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
    <link type="text/css" rel="stylesheet" href="Styles/FromDBTotxt.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadInput_Black/Input.BlackByMe.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadButton_Black/Button.BlackByMe.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadComboBox_Black/ComboBox.BlackByMe.css">
    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=1uAw9jPTc2xXMWXZnwFR0WHd9WYjFZAUCOAtuqocex__v5L75EC9QiX_sCH45VnopNjopRnq8rc8IEBb3KEXdWBHUZf74tOouskOPfCOXucUYuXc1IfLchqzXDq1K-fmB_9PfPUmfdjW8QIXDn5ivw2&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=13iOD6Zoftm8nqRaawCSklC8y9V9g87Y0kr5Ei4P5EElO9xRCq8xhXuPJ30Iwbwg9kiOCjehP62W8g2RapUnp9ZBxIOX0hzU9SVgbYeN9G8djxjjKGLG6WMwLTPG7F3J8Nh0QK_NxEIB1g4ijjLujSVvq2XEv0hC84UsTw08oIA1&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=gLb4irI44ajzCsQ4ReOSJ8ZiF9XR9XzxjpiDIqOJXuhuP0sPMfnjAXjgO-VY4QblDmgpJh-_WxKIQiMZaQROEdEvLAiN2FXshWze-IJ9IgagNyNeDwXhyzF40PDKNRQGdHL4sKP3uvxWW5RW0EAJDg2&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=F2aSoEO9Kst6ePwRmXcY64NfoYAv2uqdm1Rp5bXsLh47toZzK4udXXoUY7k8r2SQSP_Sak2wVUyqGRGFlqokdI7N0ryqScecklidHHWXBA2pio3xJ0yNVAArZyR1DmIlXzTPVjUNjsccsZ6LsfyQRQ2&amp;t=634696541680000000">
</head>
<body>
    <form id="form1" action="FromDBTotxt.aspx" method="post">
    <div style="z-index: 6000; visibility: visible; display: none; overflow: hidden;
        margin-left: 0pt; position: absolute; top: 81px; left: 482.5px; height: 121px;
        width: 240px;" class="rcbSlide">
        <div style="display: block; visibility: visible; top: -121px; left: 0px; width: 238px;"
            class="RadComboBoxDropDown RadComboBoxDropDown_BlackByMe  RadComboBoxDropDown_rtl RadComboBoxDropDown_BlackByMe_rtl"
            id="radcbFrom_DropDown" dir="rtl">
            <div style="height: 119px; width: 100%; overflow: auto;" class="rcbScroll rcbWidth">
                <ul style="list-style: none outside none; margin: 0pt; padding: 0pt;" class="rcbList">
                    <li class="rcbHovered ">All</li><li class="rcbItem ">11</li><li class="rcbItem ">aa</li><li
                        class="rcbItem ">bb</li><li class="rcbItem ">bbb</li><li class="rcbItem ">cc</li><li
                            class="rcbItem ">ccc</li></ul>
            </div>
        </div>
    </div>
    <div class="aspNetHidden">
        <input type="hidden" value=";;System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35:en-US:e71d0a15-7471-4384-9905-78bdf2047cba:ea597d4b:b25378d2;Telerik.Web.UI, Version=2012.1.411.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:ebfa5361-1bb0-4d72-bf6d-db0befdf104a:16e4e7cd:ed16cbdc:f7645509:24ee1bba:f46195d3:2003d0b8:1e771326:aa288e2d:7165f74"
            id="RadScriptManager1_TSM" name="RadScriptManager1_TSM">
        <input type="hidden" value="" id="__EVENTTARGET" name="__EVENTTARGET">
        <input type="hidden" value="" id="__EVENTARGUMENT" name="__EVENTARGUMENT">
        <input type="hidden" value="" id="__LASTFOCUS" name="__LASTFOCUS">
        <input type="hidden" value="/wEPDwUJMjE1MTIwNjQ4D2QWAgIDD2QWDAIFDw9kDxAWAmYCARYCFgIeDlBhcmFtZXRlclZhbHVlBQItMRYCHwAFB0FsbF9MYW4WAmZmZGQCCQ8PFgIeF0VuYWJsZUFqYXhTa2luUmVuZGVyaW5naGRkAg0PEGRkFgFmZAIPDxAPFgIeC18hRGF0YUJvdW5kZ2QPFgMCAQICAgMWAxAFStin24zZhiDYp9uM2YXbjNmEINmH2Kcg2qnYp9mF2YTYp9mLINmB2LnZkdin2YQg2Ygg2KrYs9iqINi02K/ZhyDZh9iz2KrZhtivBQExZxAFcNin24zZhiDYp9uM2YXbjNmEINmH2Kcg2KrZiNiz2Lcg2KfYs9m+2KfbjNiv2LHZh9inINin2LIg2YjYqCDYs9in24zYqiDZhdix2KjZiNi32Ycg2KzZhdi5INii2YjYsduMINi02K/ZhyDYp9mG2K8FATJnEAVR2KfbjNmGINin24zZhduM2YQg2YfYpyDYqtiz2Kog2LTYr9mHINmG24zYs9iq2YbYryDZiCDYqNin24zYryDYqNix2LHYs9uMINi02YjZhtivBQEzZxYBZmQCEw8UKwACDxYIHhNjYWNoZWRTZWxlY3RlZFZhbHVlZB4EVGV4dAUG2YfZhdmHHwFoHwJnZA8UKwAHFCsAAg8WBh8EBQbZh9mF2YceBVZhbHVlBQItMR4IU2VsZWN0ZWRnZGQUKwACDxYGHwQFAjExHwUFAjExHwZoZGQUKwACDxYGHwQFAmFhHwUFAmFhHwZoZGQUKwACDxYGHwQFAmJiHwUFAmJiHwZoZGQUKwACDxYGHwQFA2JiYh8FBQNiYmIfBmhkZBQrAAIPFgYfBAUCY2MfBQUCY2MfBmhkZBQrAAIPFgYfBAUDY2NjHwUFA2NjYx8GaGRkDxQrAQdmZmZmZmZmFgEFd1RlbGVyaWsuV2ViLlVJLlJhZENvbWJvQm94SXRlbSwgVGVsZXJpay5XZWIuVUksIFZlcnNpb249MjAxMi4xLjQxMS40MCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0Fg4CAg8PFgYfBAUG2YfZhdmHHwUFAi0xHwZnZGQCAw8PFgYfBAUCMTEfBQUCMTEfBmhkZAIEDw8WBh8EBQJhYR8FBQJhYR8GaGRkAgUPDxYGHwQFAmJiHwUFAmJiHwZoZGQCBg8PFgYfBAUDYmJiHwUFA2JiYh8GaGRkAgcPDxYGHwQFAmNjHwUFAmNjHwZoZGQCCA8PFgYfBAUDY2NjHwUFA2NjYx8GaGRkAhUPPCsABAEADxYCHwFoZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFCXJhZGNiRnJvbQUNUmFkYnRuR2V0RmlsZQUJcmFkY2JGcm9tDxQrAAIFBtmH2YXZhwUCLTFkfb9wwPpbUuCpYxSZLLpIHeyHbDPMJzu+qYSO8AdXVyE="
            id="__VIEWSTATE" name="__VIEWSTATE">
    </div>
    <script type="text/javascript">
        //&lt;![CDATA[
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }
        function __doPostBack(eventTarget, eventArgument) {
            if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                theForm.__EVENTTARGET.value = eventTarget;
                theForm.__EVENTARGUMENT.value = eventArgument;
                theForm.submit();
            }
        }
        //]]&gt;
</script>
    <script type="text/javascript" src="/WebResource.axd?d=cqUgLmRt1PDc02tdUmiePGftPICf3D-48hjRGcwL5K3eLKNuAYv8U2uk3XygxG-ztdx_jATxom9V7sPijlN-xLrorIsalg6DX1qib_8o31o1&amp;t=634602272469974565"></script>
    <script type="text/javascript" src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&amp;compress=1&amp;_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3ae71d0a15-7471-4384-9905-78bdf2047cba%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2012.1.411.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3aebfa5361-1bb0-4d72-bf6d-db0befdf104a%3a16e4e7cd%3aed16cbdc%3af7645509%3a24ee1bba%3af46195d3%3a2003d0b8%3a1e771326%3aaa288e2d%3a7165f74"></script>
    <script type="text/javascript">
        //&lt;![CDATA[
        if (typeof (Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
        //]]&gt;
</script>
    <div class="aspNetHidden">
        <input type="hidden" value="/wEWDgLqwvGUDQKX9+fxBwKZstXTDgLY3rqSDQLZ3q6SDQLisZz9AQLGn4b/DgLKn8r8DgLLn8r8DgLIn8r8DgLF8OCSAgLO85mIDQLjnNj8AwLO85mIDb7HcTY/Qfm98Hx8Gq9vgGyvxXOrQPxE9OVxUkyuieEt"
            id="__EVENTVALIDATION" name="__EVENTVALIDATION">
    </div>
    <script type="text/javascript">
        //&lt;![CDATA[
        Sys.WebForms.PageRequestManager._initialize('RadScriptManager1', 'form1', ['tsdsFrom_WebSitesPanel', '', 'tRBL_PriorityPanel', '', 'tradcbFromPanel', '', 'tRBL_LanguagePanel', '', 'tRadAjaxManager1SU', 'RadAjaxManager1SU'], ['RBL_Priority', 'RBL_Priority', 'RBL_Language', 'RBL_Language'], [], 90, '');
        //]]&gt;
</script>
    <div id="sdsFrom_WebSitesPanel" style="display: block;">
    </div>
    <!-- 2012.1.411.40 -->
    <div id="RadAjaxManager1SU" style="display: none;">
        <span style="display: none;" id="RadAjaxManager1"></span>
    </div>
    <div style="display: none;" class="RadAjax RadAjax_Black" id="RadAjaxLoadingPanel1">
        <div class="raDiv">
        </div>
        <div class="raColor raTransp">
        </div>
    </div>
    <div id="OuterDiv">
        <a href="javascript:__doPostBack('lbHome','')" class="Link" id="lbHome">خانه</a>
        <fieldset id="fieldset_From">
            <legend>Wes Site Names</legend><span style="color: rgb(0, 255, 90);" id="lblFrom">
                Wes Site Names</span>&nbsp;&nbsp;
            <div id="radcbFromPanel" style="display: block;">
                <div style="width: 240px;" class="RadComboBox RadComboBox_BlackByMe RadComboBox_rtl RadComboBox_BlackByMe_rtl"
                    id="radcbFrom">
                    <table style="border-width: 0pt; border-collapse: collapse;" summary="combobox" class="">
                        <tbody>
                            <tr class="rcbReadOnly">
                                <td class="rcbInputCell rcbInputCellRight" style="width: 100%;">
                                    <input type="text" readonly="readonly" value="All" id="radcbFrom_Input" class="rcbInput"
                                        name="radcbFrom" autocomplete="off">
                                </td>
                                <td class="rcbArrowCell rcbArrowCellLeft">
                                    <a style="overflow: hidden; display: block; position: relative; outline: medium none;"
                                        id="radcbFrom_Arrow">select</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="hidden" name="radcbFrom_ClientState" id="radcbFrom_ClientState" autocomplete="off">
                </div>
            </div>
        </fieldset>
    </div>
    <script type="text/javascript" language="javascript">
        function pageLoad() {

        }

        //&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;

        $(document).ready(function () {

        });

        //&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
        </script>
    <script type="text/javascript">
        //&lt;![CDATA[
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadAjaxManager, { "_updatePanels": "", "ajaxSettings": [{ InitControlID: "RBL_Priority", UpdatedControls: [{ ControlID: "sdsFrom_WebSites", PanelID: "" }, { ControlID: "RBL_Priority", PanelID: "" }, { ControlID: "radcbFrom", PanelID: ""}] }, { InitControlID: "RBL_Language", UpdatedControls: [{ ControlID: "sdsFrom_WebSites", PanelID: "" }, { ControlID: "radcbFrom", PanelID: "" }, { ControlID: "RBL_Language", PanelID: ""}]}], "clientEvents": { OnRequestStart: "", OnResponseEnd: "" }, "defaultLoadingPanelID": "", "enableAJAX": true, "enableHistory": false, "links": [], "styles": [], "uniqueID": "RadAjaxManager1", "updatePanelsRenderMode": 0 }, null, null, $get("RadAjaxManager1"));
        });
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadAjaxLoadingPanel, { "initialDelayTime": 0, "isSticky": false, "minDisplayTime": 0, "skin": "Black", "transparency": 0, "uniqueID": "RadAjaxLoadingPanel1", "zIndex": 90000 }, null, null, $get("RadAjaxLoadingPanel1"));
        });

        WebForm_InitCallback(); Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadComboBox, { "_dropDownWidth": 0, "_maxHeight": 150, "_skin": "BlackByMe", "_text": "همه", "_uniqueId": "radcbFrom", "_value": "-1", "clientStateFieldID": "radcbFrom_ClientState", "collapseAnimation": "{\"duration\":450}", "expandAnimation": "{\"duration\":450}", "itemData": [{ "value": "-1", "selected": true }, { "value": "11" }, { "value": "aa" }, { "value": "bb" }, { "value": "bbb" }, { "value": "cc" }, { "value": "ccc"}], "loadingMessage": "در حال لود شدن ...", "localization": "{\"AllItemsCheckedString\":\"All items checked\",\"ItemsCheckedString\":\"items checked\",\"CheckAllString\":\"Check All\"}", "selectedIndex": 0 }, null, null, $get("radcbFrom"));
        });
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadButton, { "_postBackReference": "", "clientStateFieldID": "RadbtnGetFile_ClientState", "iconData": {}, "imageData": {}, "text": "دریافت فایل", "toggleStatesData": [], "uniqueGroupName": "", "uniqueID": "RadbtnGetFile", "width": "150px" }, null, null, $get("RadbtnGetFile"));
        });
        //]]&gt;
</script>
    </form>
</body>
</html>

AND ALL CSS:

*
{
    padding: 0px;
    margin: 0px;
}
html, body
{
    background-color: #006F92;
    position: relative;
    direction: rtl;
    font: 9pt Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
    color: #0061B7;
    height: 100%;
    top: 0px;
    right: 0px;
}
input, select, option
{
    font-family: Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
}
#OuterDiv
{
    width: 650px;
    height: 100%;
    margin: 0 auto;
}
#OuterDiv .Link:link, #OuterDiv .Link:visited
{
    color: #00FF12;
}
#OuterDiv .Link:hover, #OuterDiv .Link:active
{
    color: #F0FF00;
}
#lbHome
{
    font: bold 15px tahoma;
    position: absolute;
    top: -15px;
    right: 20px;
    text-decoration: none;
}
fieldset
{
    width: 550px;
    margin: 30px;
    padding: 15px;
}
fieldset legend
{
    color: #00eaff;
    font-weight: bold;
    font-size: 12px;
}
fieldset table label
{
    position: relative;
    top: -2px;
    right: 5px;
}
#radcbFromPanel
{
    display: inline !important;
}
#fieldset_From
{

}

that div under form element is the slider of that RadComboBox.

thanks in advance

Solution

You can explicitly add a CSS class to custom controls using the CssClass property:

.static-position {
    position: static;
}

<telerik:RadComboBox ID="radcbFrom" CssClass="static-position" ...>
    ....
</telerik:RadComboBox>

Update: We found the solution to the specific problem in the comments. The problem has been solved by putting another <div style="position:relative;">...</div> around the lbHome, which required the relaitve positioning, and remove the position from the body tag's style.

Answered By - Dennis Traub

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

[FIXED] How to find page width in Opera 12 (for Desktop Windows)?

July 18, 2022 browser-detection, cross-browser, document-body, javascript, opera No comments

Issue

I want to access full page width & height in Opera. Note I am not asking about Viewport's height or width, I want page's/document's width & height. I am using Opera 12.12

I have tried the following:

document.body.scrollWidth/Height
document.body.offsetWidth/Height
window.innerWidth/Height
document.body.clientWidth/Height

And all of them gives viewport's width/height.

Please use the following link: http://jsfiddle.net/RQhYR/

Or use the following HTML Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <div style="width:2000px;height:2000px;background-color: blue;"></div>
</body>
<script type="text/javascript">
    alert(window.outerWidth + "," + window.outerHeight);
</script>
</html>

Solution

I'm getting the correct values from body.offsetWidth/Height, body.scrollWidth/Height and body.clientWidth/Height (using the same build as you). Only window.innerWidth/Height is supposed to return browser window viewport.

Maybe you've got some odd CSS that sets the dimensions of the body to the viewport and puts the scrollbar on an element somewhere inside. In your case, I'm getting the expected values of 2000 x 2000 px from the scrollWidth/Height of the <html>, see demo.

Answered By - Bergi

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

[FIXED] When do you put Javascript in body, when in head and when use doc.load?

July 18, 2022 document-body, head, javascript, jquery, location No comments

Issue

Possible Duplicate:
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?

I've always wondered, mainly because when creating pages I always run into trouble, based on the following thing:

When do you write your javascript

In the <head>
In the <body>
with a $(document).ready()

I could be stupid, but I've had a few times when my JavaScript (/jQuery) wasn't executed because of the wrong place or yes or no doc.ready() command. So I'm really wondering so.

Same goes for jQuery and 'var' command

Solution

$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.

When it doesn't matter

Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.

When it does matter

However, if you are loading your scripts in the <head> element, most of your DOM has not loaded. This example will not work:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

will not, since the map div has not been loaded.

A safe solution

You can avoid this by simply wait until the entire DOM has loaded:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

There are plenty of articles that explain this, as well as the jQuery documentation itself.

Answered By - Kyle

Answer Checked By - Marilyn (PHPFixing Volunteer)

[FIXED] How to stop animation after one body click with jQuery

July 18, 2022 animation, click, document-body, javascript, jquery No comments

Issue

So, i have some animation actions, this is for my login panel box:

$('.top_menu_login_button').live('click', function(){
    $('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
    $('#login_box').animate({"margin-top": "-=320px"}, "slow");
});

now i need to add some hiding action after click on body so i do this:

var mouse_is_inside = false;
$('#login_box').hover(function () {
   mouse_is_inside = true;
}, function () {
   mouse_is_inside = false;
});

for stop hiding this element on body click, and this for body click outside by login-box

$("body").mouseup(function () {
    if (!mouse_is_inside) {
        var login_box = $('#login_box');
        if (login_box.css('margin-top','0')){
            login_box.stop().animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?

Solution

You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :

$(document).on('click', function(e) {
    if ( !$(e.target).closest('#login_box').length ) { //not inside
        var login_box = $('#login_box');
        if ( parseInt(login_box.css('margin-top'),10) === 0){
            login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

And live() is deprecated, you should be using on().

Answered By - adeneo

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

[FIXED] What component to use to send mail with any kind of body?

July 18, 2022 c#, document-body, email, sendmail No comments

Issue

I made a mail sender in C# but I'm having trouble with the body of the mail. It only sends the texts without pictures, links and other elements. Not to mention, I used RichTextBox for that purpose.

So now my question is: what component to use to send mail with pictures, links and else?

I also enabled IsBodyHtml to true.

What I want to do is to copy the pictures, links and texts (with different colors and size) from Microsoft Word and paste it to control, and when user gets mail he gets the exact same body and layout as I send them.

Solution

You'll need to send it as html. Save your word doc as html and use that. For the images in your document you can either point to them via their absolute urls (publicly available via the internet).

Or you could use the LinkedResource class.

With the LinkedResource class your images have to specify a cid in the source.

var inlineLogo = new LinkedResource("path/myfile.png");
                                inlineLogo.ContentId = Guid.NewGuid().ToString(); 

var imageHtmlFragment = string.Format("<img alt='My Logo'  src='cid:{0}' style='width: 250px;height: 60px;'/>",inlineLogo.ContentId);

var newMail = new MailMessage();

var view = AlternateView.CreateAlternateViewFromString(imageHtmlFragment, null, "text/html");
                        view.LinkedResources.Add(inlineLogo);
                        newMail.AlternateViews.Add(view);

Answered By - scartag

Answer Checked By - David Marino (PHPFixing Volunteer)

[FIXED] How to set style with LESS according to body id

July 18, 2022 css, document-body, Less No comments

Issue

Is there any option to set style for some element according to body id with LESS?

I need to do something like this:

@body_about = #about_page;

img when (isclass(@body_about)){
   // some style
}

this img defintion is deeply buried and I do not want to draw it to the top of... Is there any option to do this? Thx for help.

Solution

This is a conjecture of what you need based off your comment about the "definition is deeply buried" and your first comment to MarmiK's answer. If I am way off what you need here, let me know and I'll remove my answer.

LESS

.someClass1 {
  .someClass2 {
    .someClass3 {
      img {
        /* normal code */
        #about_page & {
          /* about page code */
        }  
      }     
    }
  }
}

CSS Output

.someClass1 .someClass2 .someClass3 img {
  /* normal code */

}
#about_page .someClass1 .someClass2 .someClass3 img {
  /* about page code */

}

Answered By - ScottS

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

[FIXED] why do browsers style a predefined margin into all webpages?

July 18, 2022 css, document-body, html No comments

Issue

Why do all browsers style an arbitrarily sized margin on the <body> element of all webpages?* I'm not surprised by this, as I've been making webpages for years now, but I just assumed it was part of the spec, in the same way text inside <strong> should be bold. But, as seen in HTML5, HTML 4.01, HTML 4.0, HTML 3.2, and even HTML 2.0 and the RFC Definition, default styles are never even mentioned!

I can't find any definitions of HTML before 2.0, which was released upon the world in 1995, so why would all browsers insert the very specific 8px margin on all webpages*, especially in these days where every website removes it in the first few lines of CSS (even the HTML 4.01 spec's stylesheet does this) or a normalize/reset stylesheet? Sure, one could argue that ancient websites like the above listed HTML 3.2 spec rely on this, but they really don't look bad without the margin (try removing it with your browser inspector).

*** by "all browsers", I mean all versions of Chrome, Firefox, IE, Opera, and Safari, including all related obsolete versions, betas, alphas, and nightlies, as of this question.

Solution

Browsers have to have a default rendering of some kind (author stylesheets didn't exist when HTML was first introduced and are still an optional extra today).

If there was no margin/padding on the body/html then the text would run up against the window border and toolbar where it would be very hard to read (which would be a poor choice for a default rendering).

why would all browsers insert the very specific 8px margin on all webpages

"But it looks different in Netscape" was a common complaint. Browsers copied the default rendering from each other to compensate for authors writing pages and only thinking about one browser.

where every website removes it in the first few lines of CSS

Not every website does. It's a common (but not universal) practise for sites which are going to include a stylesheet, but not all sites do.

Answered By - Quentin

Answer Checked By - Terry (PHPFixing Volunteer)

[FIXED] How can I fetch req.param and get body in Node.js?

July 18, 2022 document-body, express, node.js, parsing No comments

Issue

I found this example to get body, but how can I retrive the req.param variable? I do not have req in this case?!

app.post('/:tableName', function(res){

    var data = '';

    res.on('data', function (chunk){
        data += chunk;
    });

    res.on('end',function(){

        var obj = JSON.parse(data);

        var schema = require('./schema/' + req.param('tableName'));
        var record = new schema(obj);

        record.save(function(err) {
        if (err) {
            console.log(err);
            res.status(500).json({status: 'failure'});
        } else {
            res.json({status: 'success'});
        }
    });
    })

});

UPDATE

I modified the method signature like this, but then first res.on will not get called.

app.post('/:tableName', function(req, res) {

Solution

Your callback should take in req and res, but is currently only taking in req as res.

app.post('/:tableName', function(req, res){ should give the function what it expects.

Answered By - max

Answer Checked By - David Goodson (PHPFixing Volunteer)

[FIXED] How to randomize the value of class on body tag?

July 18, 2022 document-body, html, javascript No comments

Issue

I have an array with some strings and I choose a random one. I need this value on <body class="MY_STRING">. How can I do this?

I tried something like:

document.write('<body class="' + my_string + '">')

but didn't work.

Update: The question is misconceived. My doubt was not about random elements. This question explains better (and contais the answer that i need):

Setting document.body.className as a variable

I did not knew how to explain the problem. Ty for answers.

Solution

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var classes = ['green', 'red', 'blue', 'black', 'purple'],
    randomClass = classes[getRandomInt(0, classes.length - 1)];

document.body.className = randomClass;

Fiddle: http://jsfiddle.net/PQ9J3/2/

Answered By - Dominic

Answer Checked By - Katrina (PHPFixing Volunteer)

[FIXED] How do I get my body to the bottom of my page OR further if necessary?

July 18, 2022 css, document-body, html No comments

Issue

html, body {cursor:url(files/cursor.cur),progress;min-height:100%;}
html{background-color:#6666FF;;background-attachment:fixed;background-position:center;background-size:cover;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;} 
#menu1 a:hover{background-color:#00AAFF;} 
#menu1 li{display:inline-block;} 
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;} 
#menu2 a:hover{background-color:#00AAFF;} 
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}

<!DOCTYPE html>
<html>
    <head>
        <title>De Geoclub</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <br>
        <div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
        <p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
        <p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
        <p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
    </body>
</html>

(Please run the snippet in full page mode for the best results.)

I'm trying to get the white-backgrounded body to the bottom of the page but it should go further if the text, due page resizement, exceeds the body. I've tried the CSS property height-min:100%; on the body, the html and both but it didn't work. Does anyone know how to get the body right?

Solution

min-height cannot be inherited, you need to set at least height:100% to html in order to use min-height on body

html {height:100%;}
html, body {cursor:url(files/cursor.cur),progress;min-height:100%;}
html{background-color:#6666FF;;background-attachment:fixed;background-position:center;background-size:cover;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;} 
#menu1 a:hover{background-color:#00AAFF;} 
#menu1 li{display:inline-block;} 
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;} 
#menu2 a:hover{background-color:#00AAFF;} 
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}

<!DOCTYPE html>
<html>
    <head>
        <title>De Geoclub</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <br>
        <div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
        <p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
        <p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
        <p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
    </body>
</html>

Answered By - G-Cyrillus

Answer Checked By - Willingham (PHPFixing Volunteer)

[FIXED] Why is all content on my home page overflowing the body border?

July 18, 2022 css, document-body, html No comments

Issue

On my home page Kendall_Gregory.html, my body border is ignoring the contents in the body and setting an arbitrary border around the page. It ignores every image that is on the page and the divs around them. The same code works on other pages and i can't figure out why this is the exception.

https://jsfiddle.net/hgaLsaz6/3/

HTML

<div>
    <a href="Html/MenuPage.html">
        <img id="topMenu" src="http://s4.postimg.org/7636jv04p/menu_Top.png">
    </a>
</div>

<img id="headerImage" src="http://s16.postimg.org/uqbzk51yd/Header.png">

<div class ="card">
    <div class="no-hover"> 
        <!-- <span class = "caption"> Fade </span> -->
        <img class="left Fade" src="http://s16.postimg.org/monr28j6t/Fade_Mag.png">
        <!-- hover image -->
    </div>
    <div class="on-hover">
        <a href="Html/Fade.html">
            <img class="left Fade" src="http://s21.postimg.org/o0f1chw13/Xenia_Lally_Hover.png">
        </a>
    </div>
</div>


<!-- GE -->

<div class ="card">
    <div class="no-hover"> 

        <!-- <span class = "caption"> GE </span> -->
        <img class="whiteOverlay right GE" src="http://s16.postimg.org/6vislrw9x/image.png">
    </div>
    <div class="on-hover">
        <a href="Html/GE.html">
            <img class="whiteOverlay right GE" src="http://s21.postimg.org/6yhlwnrs7/GE_hover.png">
        </a>
    </div>
</div>


<!-- Kaleidoscope -->
<div class ="card">
    <div class="no-hover"> 
        <img class="left KALEIDOSCOPE " src="http://s16.postimg.org/5fcc0qzol/KALEIDOSCOPE_Thumb.png">

    </div>
    <div class="on-hover mt100">
        <a href="Html/Pantene.html">
            <img class="left KALEIDOSCOPE" src="http://s16.postimg.org/7q5c7t44l/KALEIDOSCOPE_Thumb_hover.png">
        </a>
    </div>
</div>

<!-- AOHH -->

<div class ="card">
    <div class="no-hover"> 
        <img class="right ArtofHealthyHair" src="http://postimg.org/image/n7subiald/">

    </div>
    <div class="on-hover">
        <a href="Html/AOHH.html">
            <img class=" right ArtofHealthyHair" src="http://s21.postimg.org/u56jpto4n/Artof_Healthy_Hair_Hover.png">
        </a>
    </div>
</div>  

<!-- Nexxus  -->
<div class ="card mt100">
    <div class="no-hover mt100"> 
        <img class=" left Nexxus" src="http://s16.postimg.org/e05nrx9ut/Nexxus.png">

    </div>
    <div class="on-hover mt100">
        <a href="Nexxus.html">
            <img class="left Nexxus" src="http://s21.postimg.org/g00qo0f3b/Nexxus_Hover.png">
        </a>
    </div>
</div>  


<!-- Covergirl -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right CoverGirl" src="http://s16.postimg.org/lh9ta0t2d/Cover_Girl.png">

    </div>
    <div class="on-hover">
        <a href="Html/CoverGirlByKendallG.html">
            <img class="whiteOverlay right CoverGirl" src="http://s21.postimg.org/6n05jwbc7/Cover_Girl_Hover.png">
        </a>
    </div>
</div>  

<!-- PRTR -->

<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay left PRTR" src="http://s16.postimg.org/ee6zrityd/PRTR.png">
    </div>
    <div class="on-hover">
        <a href="Html/RTR.html">
            <img class="whiteOverlay left PRTR" src="http://s21.postimg.org/edbj2s31j/RTR_Hover.png">
        </a>
    </div>
</div>

<!-- Pantene -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/3xqvp6uxx/Pantnene.png">
    </div>
    <div class="on-hover">
        <a href="Html/Pantene.html">
            <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/wia0c5rmt/WIOL_Hover.png">
        </a>
    </div>
</div>

CSS

body{
    margin: 0px;
    border: black 10px solid;
    font-family: 'brandon_grotesque_regularRg', Arial, sans-serif;
    line-height: normal;
}


a{
    text-decoration: none;
    color: black;
}

#topMenu{
    right: 20px;
    position: fixed;
    letter-spacing: 4px;
    z-index: 24;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";

}

.MenuBar{
    text-align: center;
    width: 65%;
    margin:17 auto;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";


}
.consocials{
    bottom: 40;
    margin-left: 70px;
    margin-right: 70px;
    width: 80%;
    text-decoration: none;
}

.consocials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 20px;
    text-decoration: none;
    color: black;   
}

.socials{
    margin-right: 20px;
    margin-left: 20px;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}
.socials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 15px;
    text-decoration: none;
    color: black;

}

.socials:active{
    text-decoration: none;
    color: black;
}

.center{
    text-align: center;
    margin: 0 auto;
}

.left{
    float: left;
    margin-left: 70px;
}

.right{
    float: right;
    margin-right: 70px;
}
.rightNoMargin{
    float: right;   
}

.bottom{
    bottom: 30px;
}

.hide{
    display: none;
}

.m0a{
    margin: 0 auto;
}
.m10a{
    margin: 10 auto;
}
.h100{
    height: 100%;
}

.w100{
    width: 100%;
}
.w85{
    width: 85%;
}

.w50{
    width: 50%;
}
.w49{
    width: 49%;
}

.w40{
    width: 40%;
}
.mb200{
    margin-bottom: 200px;
}

.mb100{
    margin-bottom: 100px;
}

.pb30{
    padding-bottom: 30px;
}

.FloatL{
    float: left; 
}

.FloatR{
    float: right; 
}

.tAc{
    text-align: center;
}

.iLb{
    display: inline-block;
}

.m3{
    margin-top: 3px;
}

.h90{
    height: 90%;
}
.h850p{
    height: 850px;
}


.vA{
    vertical-align: center;
    height: 100%;
}

.h75{
    height: 60%
}

.pl20p{
    padding-left: 19%;
}

.pR100px{
    padding-right: 75px;
}

.w450{
    width: 450px;
}

.absolute{
    position: absolute;
}
.relative{
    position: relative;
}

.mnh100{
    min-height: 100px;

}

.mt100px{
    margin-top: 100px;
}

.mt200px{
    margin-top: 200px;
}
.h700{
    height: 700px;
}

.h800{
    height: 800px;
}

.w89{
    width: 89%;
}

.mT20{
    margin-top: 20%;
}

.mt50p{
    margin-top: 50%;
}

Solution

The reason your border isn't wrapping the image elements is because the image elements are floated and the container hasn't been cleared.

Anytime you float an image or any other object you take it out of the normal flow. This means that the parent container doesn't even know it exists.

There are several ways to address this issue – known as clearfix methods. In this case I've used the overflow property. Add overflow: auto to the container divs.

.no-hover {overflow: auto;}
.on-hover {overflow: auto;}

I tested this code and it solves the problem.

DEMO

Just keep in mind that when using the overflow property you can have different values (auto, hidden, scroll) each of which will have a different effect when content overflows the container. To understand what each value does you can refer to this article: MDN - CSS Overflow Property

Hope this helps. Good luck!

Answered By - Michael Benjamin

Answer Checked By - David Marino (PHPFixing Volunteer)

[FIXED] Why doesn't the z-index style apply to the <body> element?

July 18, 2022 css, document-body, html, z-index No comments

Issue

The z-index style allows you to control what order boxes are painted in. For example, you can make a child element be painted below its parent element:

#parent {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}

<div id="parent"><div id="child"></div></div>

However, when the parent element is the <body> tag, this no longer behaves as expected:

body {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}

<body>
  <div id="child"></div>
</body>

The CSS specification §9.9.1 states (emphasis mine):

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].

Within each stacking context, the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

the in-flow, non-inline-level, non-positioned descendants.

the non-positioned floats.

the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

If <body> were the root element, then this behavior would make sense, since that would mean that the <body> element is always painted first no matter what.

However, in an HTML document, <html> is the root element. Given that, why can't we place an element under <body> with the z-index style?

(This question was motivated by a similar question on the Russian Stack Overflow site.)

Solution

The issue here is that if the html element doesn't have a background specified, the canvas adopts the background of the body element, and that gets painted first. CSS 2.1 says:

For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element.

See what happens when the html element is given a background:

html { 
  background-color: white;
}

body {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}

<body>
  <div id="child"></div>
</body>

Answered By - Alohci

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

[FIXED] How do I disable body.blur() in IE8?

July 18, 2022 document-body, internet-explorer-8, javascript, onblur No comments

Issue

I work on an enterprise web application that runs in IE8. It appears blur() is being called on the body causing the IE window to be sent to the background. Unfortunately this code is in a portion of the application that is controlled by the vendor.

Is there any possible way to prevent blur() from being called on the body without modifying the code that is actually calling body.blur()?

Since this is an enterprise application, solutions outside of changes in the application itself are acceptable; Such as changes to IE8 settings, registry, etc.

Solution

You should be able to hard code blur to a dummy method. If you can get in before it is called, just call body.blur = function() {}; (assuming body is pointing to your DOM body element).

Answered By - Ishmael

Answer Checked By - Cary Denson (PHPFixing Admin)

[FIXED] Why doesn't HTML body background-color obey margin?

July 18, 2022 css, document-body, html, margin No comments

Issue

According to w3, the margin of an element is transparent:

I've built a very basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>
<body></body>
</html>

In Chrome, the inspector reports that "body" has an 8px margin:

But on the page, the margin is full of the background color! (Notice that there's no space between my bookmarks bar and the red background - I promise I haven't scrolled.

What's up with that?

Solution

The CSS specification special cases it.

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

… presumably because people were too used to <body background="#ff0000"> from the bad old days.

Answered By - Quentin

Answer Checked By - Timothy Miller (PHPFixing Admin)

[FIXED] How to set body inside a Promise?

July 18, 2022 document-body, koa, koa-router, node.js, promise No comments

Issue

In code bellow, I would like that somehow changed commented part should be able to set document's body instead of "this.body = 'test';" (it still should be Promise solution).

'use strict'

var app = require('koa')(),
    router = require('koa-router')();

router.get('/', function *(next) {
    this.body = 'test';
    // var promise = new Promise(function(resolve, reject) {
    //   resolve("test");
    // });
    // promise.then(function(res){
    //   this.body = res;
    // })
});

app
  .use(router.routes())

app.listen(8000);

The problem is that "this" inside a Promise is not referred to "the right one".

Solution

This sounds quite like a duplicate of How to access the correct `this` context inside a callback? (with the solution being using an arrow function for the callback), but actually you don't need those callbacks at all with koa (and co). You can just yield the promise!

router.get('/', function*(next) {
    this.body = 'test';
    var promise = Promise.resolve("test");
    var res = yield promise;
    this.body = res;
});

Answered By - Bergi

Answer Checked By - Marilyn (PHPFixing Volunteer)

[FIXED] Why is the body background image not contained inside the body when the html tag has no background color set?

July 18, 2022 alignment, css, document-body, html, image No comments

Issue

Google's 404 page uses margins and padding to center the content inside the body tag like this:

body {
    margin: 7% auto 0;
    max-width: 390px;
    min-height: 180px;
    padding: 30px 0 15px;
}

The image of the broken robot is then set as a background image on the body tag and positioned to the top right so that it appears just to the right of the main content.

* > body {
    background: url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;
    padding-right: 205px;
}

The html styles look like this:

html {
    background: #fff;
    color: #222;
    padding: 15px;
}

Why does the image appear in the top right hand corner of the page when the background color of the html tag is removed?

html {
    //background: #fff;
    color: #222;
    padding: 15px;
}

Broken plunkr example

Solution

The technical reason is "because the specification says so":

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

This is likely because in the bad old days, the background of the page was determined by the bgcolor and background attributes on the body element, so CSS was made "compatible" with existing practises.

Answered By - Quentin

Answer Checked By - David Goodson (PHPFixing Volunteer)

[FIXED] How to override the opacity of document.body?

July 18, 2022 css, document-body, html, javascript No comments

Issue

I want to make the body of my website have a low opacity but keep a popup at the default opacity of 1 so that it stands out.

How can I do this? I've tried specifying that the popup has opacity: 1 !important; but it doesn't take effect.

Here is a jsfiddle with my attempt: https://jsfiddle.net/80351/0xo10tjc/

Please note that I know how to achieve this by setting the opacity of an outer div instead of body at 0.2 but I really want to know if this is possible to do when changing body.

Solution

You can set html and body to have 100% height and apply background-color to a div

html, 
body {
   height: 100%;
}

body{
  margin: 0;
  padding: 0;
}

.overlay {
  background-color: yellow;
  opacity: 0.2;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/0xo10tjc/4/

Answered By - marcelo2605

Answer Checked By - Marilyn (PHPFixing Volunteer)

Monday, July 18, 2022

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Issue

Solution

Total Pageviews

Featured Post

Subscribe To