Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript height sums don't match

    I have a div, absolutely positioned, originally non-visible that is shown at the position of an element icon (in elements listing) being clicked rendering its preview (top position of the preview is lined to the top of the icon clicked).

    When the element being clicked is positioned low on the page, the preview is rendered somewhat below the original page border, and scrolling is necessary.
    I want to move the preview upward to have its bottom edge on the previous page bottom limit. The problem is the code I use doesn't return what is expected for the page height (it is greater than the sum of the preview height and the clicked-element top position).

    Here's the code: file 1:

    Code:
    jQuery('elementClicked').live('click',function(){
    ...
    jQuery("previewDiv").setTopAtClickedElement(jQuery(this));
    ...
    }
    file 2:

    Code:
    jQuery.fn.setTopAtClickedElement = function (element) {
    //original positioning    
    this.css('top', element.offset().top + 'px');
     
    // the troublesome part where the eventual correction should be done
    if (element.offset().top + this.height() > jQuery(document).height())
    {
        this.css('top', jQuery(document).height() - this.height() + 'px');
    }
    }
    Similar happens when I use Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) for the measure of the document height as suggested on a link .

    Here is the visual look of what I am trying to explain, and here's the jsfiddle.

    Do you have any suggestions on how I should implement this troublesome part of the code?

    Please tell if I wasn't clear enough.
    Thank you very much for the time.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    You do not want to have your low PREVIEW's bottom edge on the previous page bottom limit. If user looks at element 1 and the bottom element The popup will look stupid. The following code puts the bottom of the popup on the bottom of the page. This works out OK until we use more viewing elements and extend the page.

    To see this simple use enough anchors to fill a page; things will work good. Than add a couple and see the difference. What I would do and didn't (because I thought it would complicate the coding too much) Is to force the hidden elements to show. I used document.getElementById("previewPopup").innerHTML = "To Low To Show";
    to prove I was manipulating the correct popups. Just take both of those out to use this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New document</title>
    <script type='text/javascript' src='javascript/jquery.js'></script> //Mine; USE YOURS HERE
    <script type="text/javascript">
    $(document).ready(function(){
    	jQuery.fn.setTopAtClickedElement = function (element) {
    	    if (element.offset().top + this.height() > jQuery(document).height())
    	    {
    	        this.css('top', jQuery(document).height() - this.height() + 'px');
    			document.getElementById("previewPopup").innerHTML = "To Low To Show";
    	    }else{
    	    	this.css('top', element.offset().top + 'px');
    			document.getElementById("previewPopup").innerHTML = "PREVIEW";
    	    }
    	};
    	jQuery('a.elementClicked').live('click',function(){
    		jQuery("#previewPopup").setTopAtClickedElement(jQuery(this));
    		jQuery('#previewPopup').css('display', 'block');
       });
    
    });
    </script>
    <style type="text/css">
    #previewPopup  {display: none; height: 200px; width: 100px; left: 100px; position: absolute ; background-color: red;}
    #elementsTable tr { height: 50px; }
    </style>
    </head>
    
    <body>
    <div id="previewPopup">PREVIEW</div>
    <table id="elementsTable">
    <tr><td><a href="#" class="elementClicked">element 1</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 2</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 3</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 4</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 5</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 6</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 7</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 8</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 9</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 10</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 11</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 12</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 13</a></td></tr>
    <tr><td><a href="#" class="elementClicked">element 14</a></td></tr>
    </table>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •