Position a dynamically generated cell in the middle of the window

Question

Position a dynamically generated cell in the middle of the window

I am currently developing an employee directory that allows users to search for a specific employee and view their information in a tree or org-chart layout. To achieve this, I have implemented the Google Org Chart code for generating the chart. Each employee's contact card is displayed within a <td>, with managers and subordinates arranged above or below in separate <tr> elements.

https://i.sstatic.net/DZCed.png

While scrolling horizontally to view a small number of subordinates is not an issue, it becomes cumbersome when there are more than 10 employees as the searched employee may be out of sight:

https://i.sstatic.net/PKN9c.png

This situation can be frustrating for users. I attempted to solve this by placing an anchor (<a name="anchor">) within the card and jumping to it on page load. However, this only partially scrolls the page, making it less effective.

My goal is to have the employee's card centered on the screen so that it grabs immediate attention from the user.

Is there a method to directly jump to the searched employee when the page loads?

If needed, here is a sample code snippet representing an individual card:

<td>
    <h1>Mike</h1>
    <div class="cardBody">
        <img src="Images/stock1.jpg" style="float:left; margin-right:5px;" /> 
        <table class="data" cellpadding="0">
            <tr>
                <td><i class="fa fa-briefcase"></i></td>
                <td><span style="color:red;">President</span></td>
            </tr>
            <tr>
                <td><i class="fa fa-building"></i></td>
                <td>Administration</td>
            </tr>
            <tr>
                <td><i class="fa fa-globe"></i></td>
                <td>Home Office</td>
            </tr>
            <tr>
                <td><i class="fa fa-phone"></i></td>
                <td>Ext. 2402</td>
            </tr>
            <tr>
                <td><i class="fa fa-envelope"></i></td>
                <td><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6b636f67624e6f6a6a7c6b7d7d206d6163">[email protected]</a>">Send Email</a></td>
            </tr>
        </table>
    </div>
</td>

javascript html css asp.net vb.net

Answer 1

Answer №1

I'm a bit puzzled by what you have attempted so far. Are you able to use jQuery? If yes, you may find this solution straightforward.

$(container).scrollTo(target);

If you can pass your "target" through a URL query, then you should be able to parse and utilize it as shown below:

Note: This assumes you have a URL like www.website/searchpage.html?i=targetID

Also: This is set up to work with IDs, so adjust the code if you need it to work with classes.

var params;    
function parseURLParams(url) {
        var queryStart = url.indexOf("?") + 1,
            queryEnd = url.indexOf("#") + 1 || url.length + 1,
            query = url.slice(queryStart, queryEnd - 1),
            pairs = query.replace(/\+/g, " ").split("&"),
            parms = {}, i, n, v, nv;
    
        if (query === url || query === "") {
            return;
        }
    
        for (i = 0; i < pairs.length; i++) {
            nv = pairs[i].split("=");
            n = decodeURIComponent(nv[0]);
            v = decodeURIComponent(nv[1]);
    
            if (!parms.hasOwnProperty(n)) {
                parms[n] = [];
            }
    
            parms[n].push(nv.length === 2 ? v : null);
        }
        return parms;
    }

$(document).ready(function(){
   params = parseURLParams(window.location.href);
   $("#Container").scrollTo("#"+params.i);
});

I hope this explanation benefits someone.

Edit: I understand that you want it to be centered, which could be a bit tricky. Your container would need to be significantly larger (or maybe infinite?) than necessary to accommodate all the data. Then, scroll to the position of the desired element, plus an offset for half of the container's visible width and half of the element's width. You might consider creating an invisible element with absolute positioning when calculating this number. Move the element to this position and ultimately the screen to this element.

Answer 2

I'm a bit puzzled by what you have attempted so far. Are you able to use jQuery? If yes, you may find this solution straightforward.

$(container).scrollTo(target);

If you can pass your "target" through a URL query, then you should be able to parse and utilize it as shown below:

Note: This assumes you have a URL like www.website/searchpage.html?i=targetID

Also: This is set up to work with IDs, so adjust the code if you need it to work with classes.

var params;    
function parseURLParams(url) {
        var queryStart = url.indexOf("?") + 1,
            queryEnd = url.indexOf("#") + 1 || url.length + 1,
            query = url.slice(queryStart, queryEnd - 1),
            pairs = query.replace(/\+/g, " ").split("&"),
            parms = {}, i, n, v, nv;
    
        if (query === url || query === "") {
            return;
        }
    
        for (i = 0; i < pairs.length; i++) {
            nv = pairs[i].split("=");
            n = decodeURIComponent(nv[0]);
            v = decodeURIComponent(nv[1]);
    
            if (!parms.hasOwnProperty(n)) {
                parms[n] = [];
            }
    
            parms[n].push(nv.length === 2 ? v : null);
        }
        return parms;
    }

$(document).ready(function(){
   params = parseURLParams(window.location.href);
   $("#Container").scrollTo("#"+params.i);
});

I hope this explanation benefits someone.

Edit: I understand that you want it to be centered, which could be a bit tricky. Your container would need to be significantly larger (or maybe infinite?) than necessary to accommodate all the data. Then, scroll to the position of the desired element, plus an offset for half of the container's visible width and half of the element's width. You might consider creating an invisible element with absolute positioning when calculating this number. Move the element to this position and ultimately the screen to this element.

Answer 3

Answer №2

To direct the URL to a specific div ID, you can simply append it to the end of the URL. For instance, in the code snippet for the card you provided, you would modify the div as follows:

<div class="cardSection" id="saraCard">

Next, update the link to point to this section on the page:

<a href="employees.html#saraCard">Link to Sara's card</a>

Alternatively, if you want to create an internal link on the same page:

<a href="#saraCard">Go to Sara's card</a>

Answer 4

To direct the URL to a specific div ID, you can simply append it to the end of the URL. For instance, in the code snippet for the card you provided, you would modify the div as follows:

<div class="cardSection" id="saraCard">

Next, update the link to point to this section on the page:

<a href="employees.html#saraCard">Link to Sara's card</a>

Alternatively, if you want to create an internal link on the same page:

<a href="#saraCard">Go to Sara's card</a>

Position a dynamically generated cell in the middle of the window

Answer №1

Answer №2

Similar questions

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

Are you in need of an IDE for Javascript, CSS, HTML, or Java

Encountering difficulties resolving the dependency tree while trying to install @react-navigation/[email protected]

delete content of file in vue 3

The use of Physijs and implementing setLinearVelocity for object movement

Use a post request with the deleteOne function to remove an entry from a MongoDB collection

The website's content is displayed as a mobile-friendly menu

Resize Font Awesome icons dynamically based on screen size changes

KnockoutJS is not recognizing containerless if binding functionality

Tips on playing HTML video only when it is in the user's view

Resizable table example: Columns cannot be resized in fixed-data-table

Working with the Response Object in Django/JQuery and passing it to javascript using Urllib3

JQuery Datatables: Struggling to make JQuery function work following AJAX update

Experiencing difficulties in displaying a React element that is being passed as a prop

Feeling overwhelmed by JavaScript promises while working with forEach loops

Organizing JSON objects into groups of x items

Verify whether the headers in the CSV file correspond; if they do, proceed with parsing, otherwise halt

Checking the efficiency of Graphql API

What is the most efficient method for generating random dark colors using javascript code?

Ensure that you specify the scalar variable @TextBox1 in ASP.NET before proceeding