Suddenly JavaScript/jQuery stopped working
Question
My site was working extremely fine with jQuery Ui and all but suddenly I changed a color and it stopped! Any hints why this happened? I tried writing the JavaScript in the HTML file itself as well as linking as a separate .js file. Both did not seem to work.
MY HTML :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spree 2014 | BITS - Pilani, K. K. Birla Goa Campus Sports Festival</title>
<link rel="stylesheet" type="text/css" href="teaser.css" />
<LINK REL="SHORTCUT ICON" HREF="http://s9.postimg.org/jtx29pdbf/bits.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
</head>
<body>
<div id="sidebar">
<img src = "images/arrow.png" alt = "Click to open" id = "arrow">
</div>
<div id ="gallery" class = "hidden"><div class="text">Gallery</div></div>
<div id = "lookback" class = "hidden"><div class="text">Lookback</div></div>
<div id = "timer" class = "hidden"><div class="text">Timer</div></div>
<div id="social">
<a href="https://www.facebook.com/bitsspree?fref=ts"><img src="images/fb.png" alt = "Contact us on Facebook" id = "fb"></a>
<a href="https://twitter.com/bitsspree"><img src="images/twitter.png" alt = "Stay tuned on twitter" id = "twitter"></a>
</div>
<div id="tabs">
<ul>
<li><a href="">About</a></li>
<li><a href="">Sponsors</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Subscribe</a></li>
</ul>
</div>
<div>
<div id="logo">
<img src="images/spreelogo.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="bits">
<img src="images/bits.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="man">
<img src="images/runningman.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
</body>
MY JS FILE:
$(document).ready(function(){
$("#bits").hide();
$("#lookback").hide();
$("#timer").hide();
$("#arrow").click(function(){
$("#sidebar").hide();
$("#gallery").show( "fold", 2000 );
$("#lookback").show( "fold", 2000 );
$("#timer").show( "fold", 2000 );
});
});
3 answers
solution1
4 2013-07-18 12:11:44
Problems like this can generally be easily solved using developer tools in the browser. My favorite is Firebug in Firefox, but each of the modern browsers has the capabilities you need.
This is likely caused by either a file not being found, or a JavaScript error. Enable debugging and load your page. Look at the network record for a 404, and at the console for a JS error. You can also examine your HTML to see if the DOM model is as you expect it to be. You can set a break point in your script to see if the code is being reached -- if not work your way backwards up the call stack to see where the logic is wrong, and step through the code.
If you can practice these skills, you can solve the vast majority of your bugs without needing help from others.
solution2
1 ACCPTED 2013-07-18 11:53:22
Your script tag importing jquery is missing an "http:" before the URL. That would break your Jquery-ui.
Change it to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
solution3
0 2013-07-18 11:53:24
The code seems fine. Check your links properly; also if they are accessible from your browser.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.