I am trying to implement a fancybox. http://fancybox.net/howto
I want to call this function on an an element. Full JS file. http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js
$.fn.fancybox = function(settings) {
I have done this:
$(document).ready(function() {
$("a#inline").fn.fancybox();
});
However, I keep getting this error (through firebug):
$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();
What does this mean? I am basically having instantiating problems.
Please help.
EDIT
The HTML file:
<!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" />
<title>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script>
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#inline").fancybox();
});
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>
$('#inline').fancybox();
.fn refers to the prototype.
Di you find the error? Had the same problem. Solution was that i had included twice a javascript file, rather i included the jquery.js file twice.
I was also having this problem and found that I had included jquery.js twice. Removing the second reference fixed the error I was getting from the fancybox call
$("a#inline").fn.fancybox(); should be $("a#inline").fancybox();
You have to make sure to load fancybox AFTER jquery, otherwise you will get a "fancybox is not a function" error and your other javascript will break as well:
BROKEN:
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
GOOD:
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
I have copied a fragment of your HTML and JS inside jsfiddle.
When I downgraded to jquery 1.3.2, [see left sidebar under framework in JSFiddle example] your code won't work.
When I upgrade to 1.4.4 or later versions, it worked.
Solution
Try upgrading your jquery to 1.4.4 or later versions and test again.
Also I noticed you are including an external header.php, so make sure there are no other jquery scripts being included in this file or your js codes will break.
See this link for the working example of your own code using jquery version 1.4.4: http://jsfiddle.net/Ca6N5/
I think you forgot to also include jquery itself. Fancybox depends on jquery.
<script type="text/javascript" src="path-to-file/jquery.js"></script>
As Ben said, make sure jQuery is not being included twice by accident.
$("a#inline").fn.fancybox();
use newest jquery & fancybox
$("a#inline").fancybox(); -> this is correct
Here is examples: http://softm.org.ua/google-map-jquery-plugins/
Related
Ok, guys. I am new to js and I have a problem, it seems that my html does not call my js. I dont know if I´ve place it on a wrong line or what causes that, but I´ve all ready checked my code on http://validator.w3.org/nu and it seems right. My html is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>hola</title>
<script type="text/javascript" src="menuscrollfixed.js"></script>
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="nav-container">
<div class="nav">
<ul>
<li>NOSOTROS</li>
<li>VISIÓN</li>
<li>MISIÓN</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Here is my Js:
jQuery("document").ready(function($) {
var nav = $(".nav container");
$(window).scroll(function () {
if ($(this).scrolltop() > 400) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
I know it´s a bit long, but I really hope someone can help me =)
You need to rearrange the order of script references. Refer jquery before your custom js file.
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="menuscrollfixed.js"></script>
Because, you are using jquery functions inside your custom js file. At the time of executing those codes, the jquery file will not be loaded, which will cause the error.
Some of the things i noticed in your page:
Re-arrange the stack order of your scripts. add jQ lib before your script file.
use only one jQ lib instead of two diff versions.
type="texte/javascript" is not a valid type.
Better to use jQuery(document) instead of jQuery("document").
$(".nav container"); there is no element of named container in .nav and i don't think it's a valid html element container.
First thing is you are using multiple versions of Jquery Library files. This we create conflicts while using the features. Use the latest version.
And keep an eye on the wrong spelling for scripts and calling class names.
I have added jQuery Library 2.1 as javascriptResource in the project. As shown in the picture.
In the index.html, the autocomplete for ready works but, ready function is not called.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello");
});
</script>
</head>
<body>
What could I be missing?
Having it available under JavaScript Resources makes it known to the tools, and available for Content Assist at edit-time. It doesn't change the behavior at runtime in the browser--something still has to reference the jQuery file from your web page, like a script tag.
Try to include the jquery script. Example:
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Source : http://www.w3schools.com/jquery/jquery_get_started.asp
Hope it helps.
I am trying to get the buttons in my code (the only two buttons) with the class names "play" and "credits" to fade out when they are clicked using JQuery but it is not working. Please tell me what is wrong.
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="startMen">
<div class="playDiv">
<button class='play'>Play</button>
</div>
<br>
<div class="creditsDiv">
<button class='credits'>Credits</button>
</div>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
$('.play, .credits').click(function(){
$('.play, .credits').fadeTo('slow',0);
});
});
Add this to the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JQuery hasn't been linked to you HTML. Add it to the head somewhere before your link to your script.js so the rest of your Javascript can use the JQuery library as well.
Should be:
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
You need to include the JQuery library in your script. It's hosted on the Google CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
As a side note, while you can use .fadeTo();
.fadeTo()
requires duration and opacity as arguments. a.e:
.fadeTo("slow", .5);
If you're looking for it to fade into displaying nothing you could use the method .fadeOut(); and pass a duration argument. a.e. :
.fadeOut("slow");
Edit: When I first read the script my eyes skipped over the 0 in the fadeTo method. I assumed that was the issue. After throwing it through jsfiddle, it seems like the problem was the library missing.
You didn't link jQuery. This means the browser has no idea what jQuery is. You have to add the <script> tag.
Use the following in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Fiddle
Your code actually works, just a simple mistake :)
You can also use .fadeOut() instead of .fadeTo(). It's more simple. Take a look at that here
'Cause I'm posting an answer, you can use $(function () { as short for $(document).ready(function(){. I know it's not related but just mentioning ¯\_(ツ)_/¯
So this is a weird problem. I have a very simple Jquery code in JavaScript file and a very basic HTML file in dreamweaver. I have linked the .js with html as usual but nothing is taking any effect at all both in dreamweaver and in browser as well.
HTML Code for HEAD
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>College ink.</title>
<link rel="stylesheet" href="homeCSS.css"/>
<script type="text/javascript" src="JQuery-Home.js"></script>
</head>
HTML CODE FOR SPECIFIC ELEMENT IN BODY
<section>
<div class="mainBox" id="designBox">
<div class="mainSubBox">
<p class="subBoxText">
Design
</p>
</div>
</div>
</section>
THIS IS THE JQUERY CODE (There is nothing above or below this code in .js file)
$(document).ready(function() {
$('.mainBox').mouseenter(function() {
$(this).fadeOut('slow');
});
});
Can you find out the actual problem? Has it got anything to with CSS?
Thank You
It doesn't look like you included the jQuery library. Add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
in the head beside your other script.
jQuery install link:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Add this above where your javascript file is linked in the document.
I have some basic jquery code sitting in the header of the header file for Wordpress. It was working until the client I handed it to added several plugins which I would prefer not to turn off yet if possible as that may cause issues within itself.
I am trying to determine if there is an easy way to work out what could possibly be interfering with the code (as a relatively new javascript developer I am still getting used to the console). A solution that works not just for this case, but for any other similar situations as well would be great!
When I say it doens't work, it just displays all the divs that should be hidden (as per the code). No errors appear in the console.
The code from the site is the following:
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabs").tabs("div.panes", {tabs:'li'});
});
</script>
I tested this in a basic HTML file earlier and it works fine;
<!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" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabs").tabs("div.panes", {tabs:'li'});
});
</script>
</head>
<body>
<div class="tab_nav">
<ul class="tabs">
<li>Most Recent</li>
<li>Most Viewed</li>
<li>Most Comments</li>
</ul>
<div class="clear"></div>
</div>
<div class="tab_content panes">
CONTENT ONE
</div>
<div class="tab_content panes">
CONTENT TWO
</div>
<div class="tab_content panes">
CONTENT THREE
</div>
</body>
</html>
First try JQuery in the no-conflict mode.
http://api.jquery.com/jQuery.noConflict/
(you'll have to use jQuery instead of $)
and see if it works.
Remove the plugins, and re-add them one at a time until the problem re-appears.
Some Jquery files(possibly from the plugins that were added) might be conflicting with your code. Try to comment out some of the jquery files that were included by the WP plugins. It usually helps to start with a clean slate, and then add in the files one by one, this way you will find out which one is causing the problem.