FancyBox Implementation Problems - javascript

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.

Related

JQuery twentytwenty Plugin

Pretty new to coding, can't get this plugin working. I know this will be a quick fix for more experienced peeps, but for me, it's driving me insane...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="event.move.jquery.json"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script src="jquery-3.0.0.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<link rel="stylesheet" type="text/css" href="twentytwenty.css">
<script>
$(window).load(function() {
$("#container1").twentytwenty();
});
</script>
<title>test</title>
</head>
<body>
<div id="container1" class="twentytwenty-container">
<img src="images/IMG001.jpg">
<img src="images/IMG001_alt.jpg">
</div>
</body>
</html>
I've downloaded and pasted the JS files exactly as they came online. The instructions at the plugin source page make it sound so simple, but I ain't got a clue what I'm doing wrong... All I have done is change the images. Any guidance would be much appreciated :)
Plugin Source: http://zurb.com/playground/twentytwenty
Use jquery 1.10.1 instead of 3.
Try commenting this line and try again
<script src="event.move.jquery.json"></script>

Why jQuery progress bar is not working?

This is a Google hosted jQuery script ..right?
So I do not need to download anything ..I guess.
but then when I load the page why do not it shows any thing
What is the trick am I missing here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script>
$(function () {
//call progress bar constructor
$("#container").progressbar({ value: 50 });
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
By any chance are you testing from your local machine with "file:" URLs?
If so, you can't use URLs in the form:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
because that is the equivalent of:
src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And thus your scripts won't be found.
During development, set them to http::
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And switch them back when you go to production (if you want).

Why won't my jQuery work at all?

I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>

alex gorbatchev's syntax highlighter not working for me

I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.

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