Script making my page load at the bottom

JavaScript
1

For some reason, the following script is making my page load at the bottom of the page:

  <script>
            function init() {
                document.getElementById('start').click();
            }

            init();
        </script>

I’m not sure whats going on to make this do that. I need this script though because it turns on one of my text blocks when the page loads. I have multiple text blocks in the same location and they are switched out by pressing different buttons, but without this script the page loads with just a large empty area until a button is pressed. Below is all of the html and css:

HTML:

<!DOCTYPE Html>
@{
    ViewBag.Title = "OurCompany";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MyLink.Models
@model IEnumerable<OurCompany>



<div align="center">
    <div>
        <h1 >About Us</h1>
    </div>
    <div class="promovid">
        @foreach (var video in Model)
        {
            <video width="850" height="700" autoplay>
                <source src="@video.OurCompanyVideo.File.Url" type="video/mp4"/>
                Your browser does not support the video tag.
            </video>
        }
    </div>

    <div class="text">
        <div id="missionstatement">
            <div class="vision">
                <h3>Vision</h3>
            </div>
            <div class="missionP1">
                <p>
                    To lead the supply chain services industry through the delivery of high quality service and manufacturing solutions, <br/>while maximizing strategic value to our customers by exceeding expectations and facilitating growth.
                </p>
            </div>
            <div class="mission">
                <h3>Mission</h3>
            </div>
            <div class="missionP2 ">
                <p>
                    SC2, a 100% employee‐owned company, represents a promise to deliver high quality, on time, cost‐effective supply‐chain<br/> Solutions—offering customized services from a team that is committed to excellence.
                </p>
            </div>
        </div>
        <div id="esop">
            <div class="esoptitle">
                <h3>What is ESOP?</h3>
            </div>
            <div class="esopP1">
                <p>
                    Employee Stock Ownership Plan (ESOP) is a benefit program that provides company stock to its employees. <br/>

                    Several features make ESOPs unique:<br/>
                    <li>
                        An ESOP is required by law to invest primarily in the securities of the sponsoring employer.<br/>
                    </li>
                    <li>
                        An ESOP is unique among qualified employee benefit plans in its ability to borrow money.<br/>
                    </li>
                    <li>
                        As a result, "leveraged ESOPs" may be used as a value-added advantage to corporate finance.<br/>
                    </li>
                    <li>
                        All full-time employees participate, reaping the benefits of business success.<br/>
                    </li>
                </p>
            </div>
            <div class="esop1">
                <h3>Employee Ownership Makes a Difference</h3>
            </div>
            <div class="esopP2">
                <p>
                    There are approximately 11,000 employee-owned companies in the United States; only about 1,000 of those are 100% owned by employees.<br/><br/>

                    At SC2, the success and growth of our employee-owners is directly related to the success and growth of our company. Everyone at SC2 has a vested interest in the success of the company which prodcues a competitive advantage.<br/><br/>

                    Business ownership fills our employees with pride. Our talented and experienced employee owners take great pride in servicing our customers. Employees are rewarded through increased compensation and rising stock valuations.<br/><br/>

                    The commitment and dedication associated with employee ownersehip has continued to be the recipe for our Success.<br/>
                </p>
            </div>
        </div>
        <div id="sc2difference">
            <div class="sc2title1">
                <h3>The Difference</h3>
            </div>
            <div class="sc2P1">
                <p>
                    At SC2 Supply Chain Services & Solutions we do more than provide a service, we offer customized supply chain solutions which provide unmatched value in our industry. We offer:
                </p>
            </div>
            <div class="sc2title2">
                <h3>Expertise & Technology</h3>
            </div>
            <div class="sc2P2">
                <p>
                    For over 25 years, SC2 has provided supply chain services and solutions to Tier 1 & Tier 2 Manufacturers and OEMs. Throughout this time, we have invested in the technology and the techniques that ensure quality excellence and efficient delivery. SC2 combines our experience and industry leading systems (Warehouse Management System (WMS), Quality Management System (QMS) and Safety Management System (SMS)) with partners like the world’s largest construction equipment manufacturer to maximize total customer satisfaction.
                </p>
            </div>
            <div class="sc2title3">
                <h3>Variety & Flexibility</h3>
            </div>
            <div class="sc2P3">
                <p>Because all companies have unique needs, SC2 provides a one-stop shop for supply chain solutions. From finishing and fabrication to manufacturing support and asset recovery, we work closely with our partners to evaluate services that provide maximum value supply chain solutions.</p>
            </div>
            <div class="sc2title4">
                <h3>Precision & Efficiency</h3>
            </div>
            <div class="sc2P4">
                <p>Every part, every piece, every dollar and every minute counts in this industry. That’s why we’ve spent the last two decades developing and refining our systems to provide precise and efficient solutions for our partners. These superior systems ensure that we are always on time and always the best value.</p>
            </div>
            <div class="sc2title5">
                <h3>Quality & Continuous Improvement</h3>
            </div>
            <div class="sc2P5">
                <p>When you partner with SC2, you team with a company that will ensure quality excellence now and in the future. Our systems ensure real-time visibility of internal and external errors. Through Six Sigma and Lean we can guarantee action, elimination of waste and sustainability. We are not only dedicated to quality excellence today, but are devoted to solutions that will provide you with continued cost savings and maximum value.</p>
            </div>
            <div class="sc2title6">
                <h3>Ownership & Commitment</h3>
            </div>
            <div class="sc2P6">
                <p>Unlike any other in our industry, SC2 is proud to be 100% employee owned. Our partners benefit from a motivated and committed workforce that has a vested interest in achieving excellence. Workforce optimization has proven to be a strategic advantage.</p>
            </div>
        </div>
        <div id="ourhistory">
            <div class="historytitle">
                <h3>Our History</h3>
            </div>
            <div class="historyP">
                <p>
                    In 1983, Superior Blasting &amp; Painting Inc. opened in Tremont,IL. The business grew over the next five years and in 1987 the company became the supplier in world-wide product returns for a local fortune 500 company. In 1988, the employees purchased the company through an ESOP (Employee Stock Ownership Plan). In the early 1990's, we added many new services such as commercial packaging and sub-assembly.
                    The company was renamed Superior Consolidated Industries to reflect the new and diverse service offerings. In 1996, we relocated our headquarters to Peoria while expanding to include in-house services and warehouse management. In 2000, we opened two locations in East Peoria to facilitate growth and improve paint operations. By December 2002, we again changed our company name to SC2 Supply Chaing Services to realign with our updated corporate identity and image.
                    Within the last six years, SC2 has continued to grow in both size and services. In 2004, SC2 acquired NuAir Filter Corporation located in Bloomington/Normal, IL. The addition of NuAir provided many new service offerings such as air filteration, fabrication, kitting, sequencing and in-house maintenance. In the last 3 years, we have added logistics facilities in Mossville and Bartonville, IL. as well as Waco, TX.
                    Today, our thousands of dedicated employee-owners at our 11 facilities have a personal stake in SC2's success as our customers' satisfaction. We combine efforts to achieve the growth, expansion and diversification necessary to define our future. <br/><br/>
                    Our Corporate Operating System is outlined by the following principles: <br/>
                    <ul>
                        <li>Safety First</li>
                        <li>Continuous Improvement</li>
                        <li>Total Customer Satisfaction</li>
                        <li>Achieve Excellence</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
    <div id="container">
        <br>
        <ul id="nav">
            <li> <a href="#missionstatement">
                <div id="start">
                    <div id="oval"><br/> Mission Statement
                    </div>
                </div></a> </li>
            <li> <a href="#esop">
                <div id="oval"><br/> ESOP
                </div></a> </li>
            <li> <a href="#sc2difference">
                <div id="oval"><br/> SC2 Difference
                </div></a> </li>
            <li> <a href="#ourhistory">
                <div id="oval"><br/> Our History
                </div></a> </li>
        </ul>
        <script>
            function init() {
                document.getElementById('start').click();
            }

            init();
        </script>
        <br style="clear: both">
    </div>

    <p>&nbsp;</p>
</div>

CSS:

h1 {
    color: white;
    padding: 0;
}

.promovid {
    height: 42em;
    width: 100%;
    margin-top: 0%;
    padding-top: 0%;
}

.text {
    position: relative;
    color: white;
    width: 100%;
    height: 35em;
    text-align: left;
    padding: 10px;
}
/*Mission Statement Start*/
.vision {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-left: 12%;
}

.missionP1 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 8%;
    margin-left: 12%;
}

.mission {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 15%;
    margin-left: 12%;
}

.missionP2 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 21%;
    margin-left: 12%;
}
/*Mission Statement End*/
/*Our History Start*/
.historytitle {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto;
    margin-left: 10%;
}

.historyP {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
}
/*Our History End*/
/*ESOP Start*/
.esoptitle {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto;
    margin-left: 11%;
}

.esopP1 {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 4%;
    margin-left: 11%;
}

.esop1 {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 16%;
    margin-left: 11%;
}

.esopP2 {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 22%;
    margin-left: 11%;
}
/*ESOP End*/
/*SC2 Difference Start*/
.sc2title1 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    margin-left: 1%;
}

.sc2P1 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    width: 45%;
    margin-top: 4%;
    margin-left: 1%;
}

.sc2title2 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    margin-top: 10%;
    margin-left: 1%;
}

.sc2P2 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    width: 45%;
    margin-top: 15%;
    margin-left: 1%;
}

.sc2title3 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    margin-top: 24%;
    margin-left: 1%;
}

.sc2P3 {
    position: absolute;
    top: 0%;
    left: 0;
    margin: auto;
    width: 45%;
    margin-top: 29%;
    margin-left: 1%;
}

.sc2title4 {
    position: absolute;
    top: 0%;
    right: 24.5%;
    margin: auto;
    margin-right: 1%;
}

.sc2P4 {
    position: absolute;
    top: 0%;
    right: 0;
    margin: auto;
    width: 45%;
    margin-top: 4%;
    margin-right: 1%;
}

.sc2title5 {
    position: absolute;
    top: 0%;
    right: 12%;
    margin: auto;
    margin-top: 10%;
    margin-right: 1%;
}

.sc2P5 {
    position: absolute;
    top: 0%;
    right: 0;
    margin: auto;
    width: 45%;
    margin-top: 15%;
    margin-right: 1%;
}

.sc2title6 {
    position: absolute;
    top: 0%;
    right: 20%;
    margin: auto;
    margin-top: 24%;
    margin-right: 1%;
}

.sc2P6 {
    position: absolute;
    top: 0%;
    right: 0;
    margin: auto;
    width: 45%;
    margin-top: 29%;
    margin-right: 1%;
}


/*SC2 Difference End*/

#nav li {
    float: left;
    list-style: none;
    text-align: center;
    width: 18em;
    height: 10em;
    margin-left: 6%;
}

    #nav li a {
        text-decoration: none;
        font-size: 1.2em;
    }

        #nav li a div:hover {
            background-color: lightgrey;
        }

#missionstatement,
#ourhistory,
#esop,
#sc2difference {
    display: none;
}

    #ourhistory:target,
    #esop:target,
    #sc2difference:target,
    #missionstatement:target {
        display: block;
        animation: highlight 3s forwards;
    }


#oval {
    width: 240px;
    height: 120px;
    background: #9bb9d4;
    -moz-border-radius: 135px / 75px;
    -webkit-border-radius: 135px / 75px;
    border-radius: 135px / 75px;
    padding: 5px;
    margin: 8px 8px;
    font-size: 1.5em;
}

#start {
    -moz-border-radius: 135px/75px;
    -webkit-border-radius: 135px/75px;
    border-radius: 135px/75px;
    width: 240px;
    height: 120px;
}

#container {
    color: white;
    min-height: 200px;
    padding: 5px;
}
2

I don’t recognize the template syntax so that might have something to do with the issue.

<li> <a href="#missionstatement">
   <div id="start">
       <div id="oval"><br/> Mission Statement
       </div>
   </div></a> </li>

My guess is firing a click on the div is giving it focus but not causing a click event for the link.

Personally I have a feeling it might be better to simply have the missionstatement div come first instead of having script cause a move to it. In any case, try giving the link an id and give that a click instead of the div

3

But how can I have the missionstatement div come first? That was the whole reason for the script was because I couldn’t find another way to get the missionstatement to show up without the script. And if I did, I couldn’t get it to go away when something else was clicked. It would just be overlapping other text then.

4

Any ideas on this? I’m still trying to figure out a way to do this without a click function. Nothing I do seems to work.

5

would simply removing/moving the

    <div>
        <h1 >About Us</h1>
    </div>
    <div class="promovid">
        @foreach (var video in Model)
        {
            <video width="850" height="700" autoplay>
                <source src="@video.OurCompanyVideo.File.Url" type="video/mp4"/>
                Your browser does not support the video tag.
            </video>
        }
    </div>

so that

    <div class="text">
        <div id="missionstatement">
            <div class="vision">
                <h3>Vision</h3>
            </div>
.....

comes first after <div align="center"> negate the need for the click?

6

Is the problem that when the page loads your JS clicks the element and then because of the fragment identifier (i.e. href=“#missionstatement”) the page automatically scrolls to that element which is half way down the page?

If so you can negate the scroll to the element using the fixed position target hack. This requires a slight change to the html and css. You will need to change the section of html to this:

<div class="text">
    <div id="missionstatement"></div>
    <div id="missionstatement2">
      <div class="vision">

etc…

The missionstatement target element is now an empty div and the original renamed to missionstatement2.

Then change the relevant css to this:

#missionstatement2, #ourhistory, #esop, #sc2difference {
	display: none;
}
#ourhistory:target, #esop:target, #sc2difference:target {
	display: block;
	animation: highlight 3s forwards;
}
#missionstatement {
	position :fixed;
	height:0;
	width:0;
}
#missionstatement:target + #missionstatement2 {
	display: block;
	animation: highlight 3s forwards;
}

The above replaces your original target rules completely.

It works by making the target a fixed positioned element which does not cause a scroll. You then use the adjacent selector (+) to select the missionstatement2 div and turn it on.

This means when you load the page the missionstatement will be visible but the document will not have scrolled all the way down to it.

That should fix your immediate problem (if i;ve understood correctly) but unfortunately your css is another matter and could take a lot to fix.:slight_smile: You have used absolute elements and fixed heights for everything and that is never going to fly I’m afraid. If you want to address the problems then its a question for the CSS forum once you are satisfied that the target problem is solved.

As an aside, hiding and showing things is usually best controlled with js anyway although the target and checkbox hacks can be pushed to achieve those effects their are limitations and maybe better used as fallbacks rather than the main mechanism.

1 Like
7

No, the click has to happen (right now at least) because it activates a text block. If I can find a better way to activate that text block without a click event that would be great. But everything that I have tried that does that causes it to force that text block to stay on when the other buttons are clicked, making 2 text blocks overlap.

8

How can I make things overlap without using absolute positioning? That was the problem I was having and that is why I went with using the absolute positioning. I know the CSS is a mess but I was just starting to learn when I did this page and I’m still pretty green with it, so I’m not entirely sure what to do to fix it.

9

I gave you a solution for that in my post.

What needs to overlap exactly? You are just hiding and showing text blocks of various size. The one thing you don’t want to do is try and guess how long the text is and then absolutely place something beyond it. Absolute positioning is best used in small doses in controlled situations but never for structural layout.

However once you are happy that your click problem is solved then post another question in the CSS forum asking how to achieve the effect you want. Remember to post full css and html and not html mixed width a coding language. We want the html that you can see from ‘view source’ once your program has run as we obviously cannot run your language on our machines to test.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.