locked
Bootstrap scrollspy is Jumping second to last option RRS feed

  • Question

  • User-1571110992 posted

    Hi All,

    I used Bootstrap scrollspy in my Asp.net page.  When I am scrolling the page it is jumping from second option to last. Click on each option is not also going to specific section.

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <style>
            .my-content section {
                background-color: #f5f5f5;
                height: auto;
            }
        </style>
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     
        <div class="container-fluid" id="alldatacol3">
    
            <div class="row">
                <div class="col-lg-3 col-md-3">
                    <div id="my-nav" class="span3">
                        <ul class="nav nav-list affix">
                            <li class=""><a href="#About_Birth_Defects">About Birth Defects</a></li>
                            <li class=""><a href="#Birth_Defects_and_the_Environment">Birth Defects and the Environment</a></li>
                            <li class=""><a href="#About_the_Data_and_Indicators">About the Data and Indicators</a></li>
                            <li><a href="#Prevention">Prevention</a></li>
                            <li><a href="#Key_Messages">Key Messages</a></li>
                            <li class=""><a href="#FIND_OUT_MORE">FIND OUT MORE</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9">
                    <div class="span9 my-content" id="content">
                        <section id="About_Birth_Defects">
                            <h1>About Birth Defects</h1>
                            <p>Birth defects (also called congenital malformations) are conditions that happen when a baby does not develop normally during pregnancy. Structural defects may include missing limbs, malformed hearts, <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#spina_bifida" target="_blank">spina bifida </a>and genetic conditions like <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Down" target="_blank">Down syndrome</a>. Most birth defects happen during the first three months of pregnancy and are detected within the first year of life. Some birth defects (such as <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Cleft_Lip_with_or_without_Cleft_Palate" target="_blank">cleft lip</a> or clubfoot) are easy to see, but others (such as heart defects or hearing loss) are found using special tests (such as x-rays, CT scans, or hearing tests). Birth defects can vary from mild to severe.</p>
                            <p>This site provides data on NYC children born with one or more of 12 major birth defects. Each of the 12 birth defects is defined in the glossary on this site. The data comes from the <a href="http://www.health.state.ny.us/diseases/congenital_malformations/cmrhome.htm" target="_blank">NYS Department of Health Congenital Malformations Registry</a>.</p>
                        </section>
                        <section id="Birth_Defects_and_the_Environment">
                            <h1>Birth Defects and the Environment</h1>
                            <p>Scientists believe most birth defects are caused by a complex mix of factors including our genes, behaviors and environment. However, the causes of most birth defects are unknown. The fetus is more sensitive to exposures than an adult and if exposures happen during important periods of development, birth defects may result. Although there has been some research into how environmental exposures might cause birth defects, there is still much more work that needs to be done to understand the relationship of these exposures to birth defects.<br>
                               
                                Known and probable risk factors for birth defects include the following: smoking, use of alcohol and other drugs, poor nutrition and/or health (such as low levels of folic acid, obesity and poorly controlled diabetes), some medicines (prescription &amp; over-the-counter), toxic chemicals (such as lead, paint and paint thinner, gasoline, pesticides, and secondhand smoke), infectious agents (such as rubella and toxoplasmosis) and ionizing radiation (x-rays).
                               
                            </p>
                        </section>
                        <section id="About_the_Data_and_Indicators">
                            <h1>About the Data and Indicators</h1>
                            <p>Collecting and sharing good data about the occurrence of birth defects is a first step in understanding how they might be related to the environment. Looking at patterns of birth defect rates can help health officials plan services and create ideas for research into environmental causes of birth defects.<br>
                               
                                All birth defects in any child less than two years old are reportable under New York State law to the State Congenital Malformations Registry.
                                
                                Most birth defect reports are abstracted from inpatient hospital records, since birth defects diagnosed on an outpatient basis are not well reported.
                               
                                Accurate hospital clinical recognition of birth defects depends on clinical expertise and interest. This is particularly true of conditions more difficult to diagnose. As a result, identification of birth defects may vary by area and by time. Areas with hospitals that provide higher levels of care may have more thorough diagnoses and, thus, apparently higher rates. Similarly, areas with hospitals that report cases more completely will also appear to have higher rates.</p>
                        </section>
                        <section id="Prevention">
                            <h1>Prevention</h1>
                            <p>
                              
                                Not all birth defects can be prevented, but actions that increase the chance of having a healthy baby include:</p>
                            <ul>
                                <li>Have regular medical checkups and check with a provider before taking any medications.</li>
                                <li>Eat healthy foods and maintain a healthy weight; avoid alcohol and don't use street drugs.</li>
                                <li>Make sure that medical conditions like diabetes are under control.</li>
                                <li>Take a vitamin with folic acid before and during pregnancy.</li>
                                <li>Quit smoking and avoid exposure to secondhand smoke.</li>
                                <li>Damaged lead-containing paint in homes should be safely addressed by properly trained workers, ideally prior to pregnancy.&nbsp; Pregnant women and small children should stay out of the home until lead paint projects are completed.</li>
                                <li>Employers should provide workplaces free from unsafe chemical exposures and provide protective gear to workers when necessary. To learn more about the chemicals at work, employees can ask their employer for the <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Material_Safety_Data_Sheets" target="_blank">Material Safety Data Sheets</a> for the products used.</li>
                            </ul>
                        </section>
                        <section id="Key_Messages">
                            <h1>Key Messages</h1>
                            <p>About one out of every 33 babies is born with a birth defect. A birth defect can affect almost any part of the body. The well being of the child who is born with a birth defect depends mostly on which organ or body part is involved, how much it is affected and the quality of rehabilitative support received in early childhood.
                               
                                Heart defects make up about one-third to one-fourth of all birth defects, affecting about one in every 100 to 200 births. Some of these heart defects can be serious, and a few are very severe.
                                
                                Other common birth defects are "neural tube defects," which are defects of the spine (<a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Spina_Bifida" target="_blank">spina bifida</a>) and brain (<a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Anencephaly" target="_blank">anencephaly</a>). They affect about one of every 1,000 pregnancies. These defects can be serious and are often life threatening.
                             
                                Birth defects of the lip and roof of the mouth, known as "<a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Orofacial_clefts" target="_blank">orofacial clefts</a>," include <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Cleft_Lip_with_or_without_Cleft_Palate" target="_blank">cleft lip</a>, <a href="http://www.nyc.gov/html/doh/html/environmental/tracking-glossary.shtml#Cleft_Palate" target="_blank">cleft palate</a>, and combined cleft lip and cleft palate. These defects are also common and occur in about one in 700 to 1,000 babies.</p>
                        </section>
                        <section id="FIND_OUT_MORE">
                            <h1>FIND OUT MORE</h1>
                            <div class="message_urls" style="text-align: left;">
                                <ul>
                                    <li><a href="http://www.nyc.gov/html/doh/pregnancy/html/home/index.shtml" class="message_urls" target="_blank">NYC Healthy Mothers, Healthy Babies</a></li>
                                    <li><a href="http://www.cdc.gov/ncbddd/bd/research.htm#what" class="message_urls" target="_blank">CDC Birth Defects Research</a></li>
                                    <li><a href="http://www.cdc.gov/ncbddd/birthdefects/facts.html" class="message_urls" target="_blank">CDC Birth Defects Facts</a></li>
                                    <li><a href="http://www.marchofdimes.com" class="message_urls" target="_blank">March of Dimes</a></li>
                                    <li><a href="http://www.health.state.ny.us/diseases/congenital_malformations/cmrhome.htm" class="message_urls" target="_blank">NYS Congenital Malformations Registry</a></li>
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
      
    
        <script>
          $('body').scrollspy({ target: '#my-nav' });
        </script>
    
    </asp:Content>


     

    Thursday, October 20, 2016 11:15 PM

Answers

  • User283571144 posted

    Hi vishabedre,

    hank You for replay. I used big and medium size monitor with full screen. It does not work for me but If I open debugger window along with page it works fine. Please share your code.

    I didn't change any codes, just test it.

    As my previous codes says, I think your codes working well.

    The reason why causes this error is your browser's height is too large. 

    The bootstraps scrollspy's rule is if last node totally show in the page with other nodes, it will highlight the last node in the page.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:50 AM

All replies

  • User283571144 posted

    Hi vishabedre,

    I used Bootstrap scrollspy in my Asp.net page.  When I am scrolling the page it is jumping from second option to last. Click on each option is not also going to specific section.

    According to your description, I had written a demo on my computer, it works well.

    I guess the reason why you click on each option is not also going to specific section is if all sections are shown in the page , the scrolling will be the end of page, it will just highlight the last section.

    So you will feel it is not worked well.

    More details, you could refer to follow image:

    Image(I reduce the height of browser window):

    Best Regards,

    Brando

    Friday, October 21, 2016 7:11 AM
  • User-1571110992 posted

    Brando,

    Thank You for replay. I used big and medium size monitor with full screen. It does not work for me but If I open debugger window along with page it works fine. Please share your code.

    Problem is page scroll is reaching bottom early 

    Friday, October 21, 2016 2:16 PM
  • User283571144 posted

    Hi vishabedre,

    hank You for replay. I used big and medium size monitor with full screen. It does not work for me but If I open debugger window along with page it works fine. Please share your code.

    I didn't change any codes, just test it.

    As my previous codes says, I think your codes working well.

    The reason why causes this error is your browser's height is too large. 

    The bootstraps scrollspy's rule is if last node totally show in the page with other nodes, it will highlight the last node in the page.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:50 AM