Javascript Not Working in Chrome or Firefox

Question

I am a newbie, and I don't know a whole lot about javascript. All I know is the following page/code loads in Safari and Explorer but not in Chrome or Firefox. Can anyone point to any missing code or specific errors? Much appreciated. Here is the actual page: https://dl.dropboxusercontent.com/u/9832487/Timeline/timeline2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link REL="SHORTCUT ICON" HREF="UVALogo.ico">
            <title>SS Timeline Tool</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <style type="text/css">
            body { font-family:Verdana,Geneva,sans-serif; font-size:xx-small; }
            .rounded-corners { -moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;}
            .shadedback { background-color:#eee;border-radius:8px;
                background:-moz-linear-gradient(top,#f0f0f0,#dfdfdf);
                background:-webkit-linear-gradient(top, #f0f0f0 0%, #dfdfdf 100%);
                border-collapse: collapse;
                }
            </style>
</head>

        <body>
            <div id="surfaceDiv" style="position:absolute;left:29%;width:68%;padding:1%" class="rounded-corners"></div>
            <div id="picBinDiv" style="position:absolute;left:1%;width:25%;padding:1%" class="shadedback"></div>              

        </body>
    </html>

    <script>

    // SETUP

    var picWidth=0;                                                 // Width of pics (use 0 to disable)
    var picHeight=96;                                               // Height of pics(use 0 to disable)
    var backPic="background.jpg";                                                   // URL to back surface picture (if any)
            var pics=["https://dl.dropboxusercontent.com/u/9832487/Timeline/Images/cch.jpg",            // Each entry in array is a pic
    ];





    // ON LOAD

    $(document).ready(function() {                                  // When document is loaded
        var height=$(window).height();                              // Get height of window
        height=height*.9;                                           // Fill only 90% of window
        height=height+"px";                                         // Add pixel suffix
        $("#picBinDiv").css("height",height);                       // Set picBin height
        $("#surfaceDiv").css("height",height);                      // Set surface height
        AddPics(pics);                                              // Add pics to pic bin
        if (backPic)                                                // If a background pic spec'd
        {$("#surfaceDiv").append("<img src='"+backPic+"' height='"+height+"'/>");} // Add pic to div
        else                                                        // No back
        {$("#surfaceDiv").css("border","1px solid #999");}      // Add border
        });

    // ADD PICS

    function AddPics(picArray)                                  // ADD PICS TO PIC BIN
{
    var i,picHtml;
    var n=picArray.length;                                      // Number of pics to load
    for (var i=0;i<n;++i) {                                     // For each pic to load
    picHtml="<img src='"+picArray[i]+"' ";                  // Add tag and url
    picHtml+="id='pic"+i+"' ";                              // Add id
    if (picHeight)                                          // If height spec'd
    picHtml+="height='"+picHeight+"px'";                // Scale by height
    else if (picWidth)                                      // If a width spec'd
    picHtml+="width='"+picWidth+"px'";                  // Scale by width
    picHtml+="> ";                                          // Add close tag and space
    $("#picBinDiv").append(picHtml);                        // Add pic to div
    $("#pic"+i).draggable();                                // Make it draggable
    }

    }

    </script>

J Max · Accepted Answer · 2014-01-29 14:38:40Z

1

You're site is secured (https) but is scripted is being called unsecured (http):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

So Chrome and FF are blocking the script's from running because they are considered mixed content. If you provide the secured version of those script files it should work:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

edited Jan 29, 2014 at 14:38

answered Jan 29, 2014 at 14:30

J Max

2,3712 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Susheel Singh · Accepted Answer · 2014-01-29 14:55:21Z

1

You are using http on javascripts but your site is on https(mixed content). so by default chrome and firefox blocks it. you need to unblock it in the way which i displayed in the image else change the urls of the jquery as below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

one more solution is to put the jquery and jqueryui file in dropbox itself and provide the relative link.

check the below image if you want to unblock it with the existing code

enter image description here

edited Jan 29, 2014 at 14:55

answered Jan 29, 2014 at 14:30

Susheel Singh

3,8546 gold badges34 silver badges69 bronze badges

Comments

Hishekha · Accepted Answer · 2014-01-29 14:36:01Z

0

Have not yet checked your code in browser but from first look I think the tag in head must be closed. Also you should move the JavaScript part tag currently outside of inside .I think this will fix. Also you should use chrome console to check whether it's throwing any error. You should use console.log() or alert() statement to check if chrome is able to parse your javascript content.

answered Jan 29, 2014 at 14:36

Hishekha

636 bronze badges

Collectives™ on Stack Overflow

Javascript Not Working in Chrome or Firefox

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related