Why doesn't this external JavaScript load? - javascript

I've been futzing with this for hours trying to figure out why codemirror.js won't load in any browser other than Firefox. Any ideas?
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script src="CodeMirror/js/codemirror.js"></script>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { $('#container-1').tabs(); });
</script>
<style type="text/css"> /* (some css) */ </style>
</head><body>
<!-- (some stuff) -->
</body></html>
CodeMirror/js/codemirror.js
alert("LOL");

I tried the code in Firefox 3.6.3, Internet Explorer 8, Opera 10.53 and Safari 4.0.5, and it works just fine.
Note that the address to the script is relative, so if your page is at www.mydomain.com/content/pages/page.html, it will load the script from www.mydomain.com/content/pages/CodeMirror/js/codemirror.js, not www.mydomain.com/CodeMirror/js/codemirror.js.
One thing that you can improve is to add the type attribute to the tag:
<script src="CodeMirror/js/codemirror.js" type="text/javascript"></script>

Related

Jquery jqte and document ready

I've tried many different places for the script with $('#editable').jqte(); inside.
Sometimes the editor shows up, sometime it does not, it seems non-deterministic.
It's like my document is not ready when I call the jqte() function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Parcours, technique, sujets, peinture figurative, couleurs, émotion." />
<title>Creating Page</title>
<link href="/bundles/usersite/css/homepage.css" type="text/css" rel="stylesheet" />
<script src="/bundles/usersite/js/jquery.js" type="text/javascript"></script>
<link href="/bundles/usersite/css/jquery-te.css" type="text/css" rel="stylesheet" />
<script>
$(document).ready
(
function()
{
$('#editable').jqte();
}
);
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="mainContent">
<div id="editable">
</div>
</div>
</div>
</body>
</html>
EDIT:
Due to my twig template the below is missing in some cases (like the above one):
<script src="{{ asset('bundles/usersite/js/jquery-te.js') }}" type="text/javascript"></script>
works better with javascript linked !!!!!!

jquery.min.js Failed to load resource

Why this link doesn`t work?
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Description" content=" [wstaw tu opis strony] ">
<meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
<meta name="Author" content=" [dane autora] ">
<title>[tytuł strony] </title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".animat_kon").click(function () {
$(".animat_text").slideToggle("slow");
});
});
</script>
</head>
error example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you did not included http://
whenever you are downloading from the server directly then usehttp://
Change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
into
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You missed the http:. You can skip the http: to let your browser automatically choose between HTTPS and HTTP. But in your case the debugging tool seems not to understand this syntax.
Find more information here: Can I change all my http:// links to just //?
The link must start with http://
Please change your script src to:
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
script src should start with http://

FancyBox Implementation Problems

I'm having some problems getting FancyBox to work...I figure its something pretty simple but I'm still a beginner with web design and the process is a little confusing to me right now. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- ******************* CSS ******************* -->
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- ******************* Javascript ******************* -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox();
});
</script>
</head>
<body>
<a class="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>
</body>
The error I'm getting is pretty popular on SO but I've looked for all the fixes mentioned and nothing has worked yet. This is what I'm getting:
Uncaught TypeError: Object #<Object> has no method 'fancybox'
Any help with this would be greatly appreciated! Thanks all!
You are loading fancybox twice (the normal source one and the packed one). Also remove the dot from your src attributes and make sure the file is where you say it is
So change this
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
To this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.js"></script>
or only this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
but not both
Try not including the fancybox js file twice on the same page.

Jquery Coin Slider - not working at all

I'm trying to integrate Coin Slider into my page, and I've downloaded and attached the latest Jquery to my header, along with all of the necessary Coin-slider files. However, the page simply stacks the images as if I had simply inserted tags.
The paths for all of the files are correct. I tried following his instructions to the letter on the "how to install" page, with no success. It won't work in IE8, or the latest versions of Chrome or Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/paradigm.css" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paradigm Solutions</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navbar"></div>
<div id="leftMenu"></div>
<div id="coin-slider">
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</body>
</html>
Change your script tags from
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
to
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
coin-slider depends on jQuery therefore it must be loaded before.... And I would suggest you remove js/coin-slider.js as js/coin-slider.min.js and js/coin-slider.js are the same thing ... the .min is just a minified version of the other
The order of your javascript file includes is very important. jQuery should always be first (as is evident in the production documentation). Also, you don't need BOTH coin-slider includes. The .min will be enough:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js">
This one may sound obvious but the coin-slider package doesn't always come packaged with jQuery, so make sure you have jQuery in your javascript folder before linking too it c(:
it works well
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
check this link for code

Javascript place problem or another thing?

<%# Page Language="C#" AutoEventWireup="true" CodeFile="Urunler.aspx.cs" Inherits="Urunler" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link href="rss/example_ticker.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script src="rss/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="rss/jquery.vticker.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
...
...
...
<td style="background-color: #808080">
<script type="text/javascript">
$(document).ready(function () {
$('#ticker1').rssfeed('http://www.xxxxxxx.com/map.asp').ajaxStop(function () {
$('#ticker1 div.rssBody').vTicker({ showItems: 3 });
});
});
</script>
<div id="ticker1" >
</div>
I have two scripts: lightbox and rss. Lightbox script works very well in mywebform1 but rss feed doesn't work. How can I solve that?
PS: on the other hand, my another webpage(mywebform2) in the same website has only rss feed and works very well.
You are likely experiencing conflict between the jQuery and Prototype frameworks you loaded.
Either choose which one you want to use (arguably the better solution), or consult this documentation for how to use both together.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
You're probably running into issues because you're using both Prototype and jQuery on the same page. It's highly unlikely that this is the best thing to do. I'd recommend just using jQuery and getting rid of Prototype and Scriptaculous ... there are plenty of ways to get what you need done in jQuery alone.

Categories