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=".png" />
<script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src=".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=""><img src="images/fb.png" alt = "Contact us on Facebook" id = "fb"></a>
<a href=""><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 );
});
});
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/jtx29pdbf/bits.png" />
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery./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./bitsspree?fref=ts"><img src="images/fb.png" alt = "Contact us on Facebook" id = "fb"></a>
<a href="https://twitter./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 );
});
});
- i think the problem with your imports – PSR Commented Jul 18, 2013 at 11:45
- 2 Possibly, the urgent failure occurred not because of a small bug but because a lack of backups and/or version control is preventing an easy rollback. – Paul Commented Jul 18, 2013 at 11:56
- Do you still have the working version (ie the one that worked prior to your change)? If you have it, you could run a diff between the versions, and it might help you spot something else that's changed without you realising it. (if you haven't got it, maybe this experience will help you learn the value of proper version control, even on a small system with just one developer) – Spudley Commented Jul 18, 2013 at 11:58
- Also, "did not seem to work" is a very broad phrase; it might be helpful if you would say more precisely in what way it doesn't work. eg Is it doing nothing? Something different? What was it supposed to be doing in the first place, and what is it doing now? Are there any error messages in the browser console? Which browser(s) are you testing with? And which versions? Does it break in all browsers or just some specific ones? – Spudley Commented Jul 18, 2013 at 12:02
- Question title seems me "Breaking News" – Manoz Commented Jul 18, 2013 at 12:17
3 Answers
Reset to default 4Problems 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.
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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The code seems fine. Check your links properly; also if they are accessible from your browser.
<script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery./ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>