JavaScript在Firefox中没有按预期工作

时间:2014-01-10 17:05:17

标签: javascript firefox

我有一个简单的JavaScript,可以在除Firefox(26)之外的所有主流浏览器中运行...我环顾四周,找不到它无法工作的原因

它打算更改一个元素的style.left,它将在Firefox中第一次运行但不会超过一次。它会在我尝试的所有其他浏览器中正常工作。这是脚本的精简版本,以防任何人发现未使用的变量等。

这里是不完整的JavaScript和html的副本

按要求工作的jsfiddle ... jsfiddle.net/zvSMa/1

JavaScript的:

var left;

function scroll_left(direction){
 left = parseInt(document.getElementById("body").offsetLeft,10);


if (left == -2868) {
return;
 }else{
      switch(left){
           case -1:                  
                stop = -955;
                smooth_scroll(left,stop);
               left=-955;
                break;
           case 0:                  
                stop = -955;
                smooth_scroll(left,stop);

                break;
           case -955:
                stop = -1910;
                smooth_scroll(left,stop);
                break;
           case -1910:
                stop = -2865;
                smooth_scroll(left,stop);


                break;
           case -2865:               
                break;
           }
      }
}


function smooth_scroll(current,stop){
 document.getElementById("body").style.left= stop+"px";
 left = parseInt(document.getElementById("body").offsetLeft,10);
 document.getElementById("dummy").innerHTML = current;
 document.getElementById("dummy2").innerHTML = stop;


}

function scroll_right(direction){
 left = parseInt(document.getElementById("body").offsetLeft,10);


if (left == 2868) {
      return;
 }else{
      switch(left){
           case -1:                  

                break;
           case 0:                  


                break;
           case -955:
                stop = -0;
                smooth_scroll(left,stop);
                break;
           case -1910:
                stop = -955;
                smooth_scroll(left,stop);


                break;
           case -2865:
                stop = -1910;
                smooth_scroll(left,stop);

                break;
           }
      }
}

HTML:

<!DOCTYPE HTML>   
<!--Advanced Design and Solutions-->
<html>
<head>
    <meta charset="utf-8">
    <title>
        Under Construction
    </title>
    <link rel="stylesheet" type="text/css" href="form.css">
    <meta name="author" content="Advanced Design And Solutions">
    <meta name="description" content="x">
    <meta name="keywords" content="x">
    <script type="text/javascript" src="script/script.js">
</script>

</head>
<body>
    <div id="container">
        <div id="banner">
            <a class="title_logo" href="index.php">
                Advanced Design and Solutions
            </a>
            <div id="links">
                <a class="banner_content" id="on" href="web%20design.php">Web Design</a><a class="banner_content" href="marketing%20material%20design.php">Marketing Material</a><a class="banner_content" href="logo%20design.php">Logo Design</a><a class="banner_content" href="business%20card%20design.php">Business Card Design</a>
            </div>

            <div id="email_panel">
                <form class="" action="MAILTO:contact@advanceddesignandsolutions.com" method="post" enctype="text/plain">
                    <fieldset class="contact">
                        <legend><span class="page_text text_spacing">Send us an Email at contact@AdvancedDesignandSolutions.com</span></legend>
                        <p class="page_text text_spacing">
                            Please fill out this short form and we will get back to you as soon as possible with a reply.
                        </p>

                            <input type="radio" name="product" value="Web Design">Web Design <input type="radio" name="product" value="Marketing Materials">Marketing Materials <input type="radio" name="product" value="Logos">Logos <input type="radio" name="product" value="Business Cards">Business Cards <input type="radio" name="product" value="Other">Other
                        <br>
                        <label class="page_text">Name: <input class="alignment" type="text" name="client" required="required" placeholder="FIRST AND LAST NAME"></label> <!--label with input-->
                        <br>
                        <br>
                        <label class="page_text">Email: <input class="alignment" type="email" name="email" required="required" placeholder="ADDRESS@EXAMPLE.COM"></label><br>
                        <br>
                        <label class="page_text">Tel: <input class="alignment" id="phoneinput" type="tel" required="required" name="Phone"></label><br>
                        <label class="page_text">Inquiry: 
                        <textarea class="" type="text" name="" required="required">
</textarea></label><br>
                            <br>
                            <br>
                            <input class="button" type="submit" value="Submit"> <input class="button" type="reset" value="Reset">
                        </fieldset>
                    </form>
                </div>
            </div>


            <div id="hider">
                <div id="l_arrow" onclick="scroll_left(-2);">
                    &laquo;
                </div>
                <div id="r_arrow" onclick="scroll_right(2);">
                    &raquo;
                </div>
                <div id="body">
                    <div id="content_pane_1">
                        <h2>
                            Web Design
                        </h2>
                        <p>
                            A website is an important marketing and informational tool for you and your business. Your website can be used for various purposes, to define your company's brand, to advertise promotional sales or discounts, to give an insight or introduction into your company. No matter what purpose you have in mind for your site, we would be glad to take the website journey with you!
                        </p>
                    </div>
                    <div id="content_pane_2">
                        <h2>
                            Marketing Materials
                        </h2>
                        <p>
                            We design marketing materials in any shape and size, such as promotional pamphlets, tri-fold brochures, door hangers, as well as anything else you can think up. We enjoy helping your business come up with creative, clever and professional marketing materials. We also provide competitively priced printing services for your designs.
                        </p>
                    </div>
                    <div id="content_pane_3">
                        <h2>
                            Logo Design
                        </h2>
                        <p>
                            A logo is an integral part of your company's brand or image. It serves to identify your company's product or service. Proper branding can result in higher sales for the products you sell because of brand loyalty. A well thought out branding with a quality logo can allow you to shape how your company is viewed i.e., youthfulness, fun or luxury. If you are looking to create an image for your company or re-branding your existing business, we look forward to putting our creativity to work for you!
                        </p>
                    </div>
                    <div id="content_pane_4">
                        <h2>
                            Business Card Design
                        </h2>
                        <p>
                            A business card is often part of the first contact that you will have with your potential client or customer. So it is invaluable that you make a good first impression. A quality designed and printed business card will help you establish your the image of quality and professionalism. When it come time to design you business card or reprint your existing design, we wont be beat on quality or service!
                        </p>
                    </div>
                </div>
                <div id="dummy"></div><div id="dummy2"></div>
            </div>          <div id="footer">
            <div id="footer_topline"></div>
            <a class="footer_links" href="index.php">Home</a><a class="footer_links" href="web%20design.php">Web Design</a><a class="footer_links" href="marketing%20material%20design.php">Marketing Material Design</a><a class="footer_links" href="logo%20design.php">Logo Design</a><a class="footer_links" href="business%20card%20design.php">Business Card Design</a><a class="footer_links" href="index.php">&#169; Copyright  <?php echo date("Y") ?></a>


        </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

通过深入研究firefox在响应javascript时所做的事情,我发现它的响应方式不同。所有其他浏览器都会更改style.left以匹配我指定的firefox,而不是从-1开始进行offsetleft,其他所有其他浏览器都从0开始,使所有开关案例都出错。