Ok. Here's my code:
<script type="text/javascript" language="javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#try1").fancybox();
});
Firebug says "$("#try1").fancybox is not a function".
This is really frustrating!!
It's working fine in other pages. :(
Thanks in advance.
You may want to recheck the entire HTML page as there are times when certain js files are linked at the bottom of the page, just above the closing body tag.
Hope this helps.
Have you checked if it is properly including the "fancybox-1.3.4.pack.js" with firebug?
Related
Sorry if I am asking a silly question. I just now starting with TinyMCE. I googled it and found examples where they all say to include in tinymce.js. I did that but I am getting a wired screen (as shown below. can anyone please help me, what I am missing
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.2.4.js"></script>
<script src="tinymce.js"></script>
<script src="theme.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body>
<textarea>Your content here</textarea>
</body>
</html>
This structure is working for me with TiniMCE 4.5.1:
Head:
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/skin.min.css" />
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/content.min.css" />
<script type="application/javascript" src="lib/jquery/jquery-min.js"></script>
<script type="application/javascript" src="lib/tinymce/tinymce.min.js"></script>
Directories:
\lib
\jquery
jquery-min.js
\tinymce
tinymce.min.js
\plugins
\advlist
\anchor
\...a lot of plugins
\skins
\lightgray
content.min.css
skin.min.css
\fonts
tinymce.ttf + woff
tinymce-small.ttf + woff
\themes
\modern
theme.min.js
Hope this help!
I'm quite new to both html/css and jQuery. I'm trying to get a vimeo video to open with fancybox on my page. I've read a bunch of similar questions on stackoverflow and nothing has worked. I've even put my code into JSFiddle and it WORKS. (http://jsfiddle.net/8hMLb/1/)
Heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Fancybox Javascript -->
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox-media.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="http://vimeo.com/70926140">Vimeo.</a>
</body>
I've triple triple checked that source files are correct. It works for images, just not vimeo (or youtube, or any media). It works in JSFiddle. I'm totally stumped here. Any help would be greatly appreciated!
It turned out that the fact that I was working locally was the issue. When I uploaded a test version of the code to the actual site, it worked. I guess my local environment was having trouble getting to vimeo.com or something
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I am trying to use jScrollPane on my website.
After 4 hours of searching the bug I gave up.
I really hope someone of you got a clue of this.
This is my not working page: www.robert-richter.com
My code:
<link href="../css/jquery.jscrollpane.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.item').jScrollPane();
});
</script>
<article class="item"></article>
Any thought on the same will be appreciated.
Initialize your jQuery script
jquery(document).ready(function(){ your code here...});
Weired because it shouldn't matter how things done in Server side.
Master Page:
<head runat="server>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="PageHeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ContentPlaceHolderID="PageHeadPlaceHolder" Runat="Server">
<link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" />
<script src="prettyPhoto315/js/jquery.prettyPhoto.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
</script>
</asp:Content>
though client finds jquery-2.0.2.min.js it fails to execute $(document).ready...
saying '$ reference is not defined'.
I Tried:
when i move the <script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script> to the content page... everything works right.
using <script src="~/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
the script is not found at all.
same happens if i move a <link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" /> to the master page, the page does not show the specific style sheet.
when checking the output HTML, it all seem correct in the right order.
i uploaded the output HTML to http://pastebin.com/ULi228BF
please help asap. thanks.
Do it declaratively in the master page by dragging the jQuery files from Solution Explorer window to the code view of the mark-up. Then see if it works and compare the two versions of the paths.
GOT IT! OMG KNEW it is something that shouldn't matter
IrishChieftain post got me to test the pages again, and found the problem!
Apperantly the jquery.magnifier.js library i used is incompatible with jQuery 1.6+
are is breaking jQuery script for some reason overriding
therefore:
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script type="text/javascript"> $(document).ready(); </script>
wont work...
while:
<script src="jquery/jquery-1.3.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(); </script>
does!
hope someone can make use of this info.
and thanks for the help.