Shadowbox troubleshooting - javascript

Hey guys, I'm trying to get Shadowbox to work. Whenever I click the link, it just opens the movie in a new page. Here's the code in the head tags:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript">
Shadowbox.init({
players: ["qt"];
});
</script>
And here's the code in the body section:
<div id="footer">
<a rel="shadowbox;width=640;height=360" href="Intro Movie.mov">Movie</a>
</div>
Does anyone see any problems?

It looks like you are missing the actual Shadowbox.js file. Try adding something like this below your shadowbox.css link def:
<script type="text/javascript" src="shadowbox.js"></script>

You shouldn't have a semicolon in your JSON settings object, like this:
Shadowbox.init({
players: ["qt"]
});

Related

Is my jQuery .load bloacked by the CMS?

I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>

How to load this JavaScript when page Loaded

I'm a newbie to programming and I want to ask something about Javascript.
How to make this script is displayed when the page is loaded?
I want to make "1 people online" with this jQuery pop up.
$(document).ready(function() {
$.sticky('1 user seen this hotel!');
});
Can you all tell me how to use it and how to modify it?
I get this function from http://www.jqueryrain.com/?uOBwr_rL
Please help me.
Thanks, gbu
Sample HTML Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.min.js"></script>
<link rel="stylesheet" href="sticky.min.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.sticky('The page has loaded!');
});
</script>
</body>
</html>
Please make sure you save this html content as HTML page in the same directory as your sticky.min.js & sticky.min.css files.
If you don't need the sticky functionality (i.e. if it's okay for a user to close the window), you can use an alert:
$(document).ready(function() {
alert('1 user seen this hotel!');
});
Or the jquery dialog: http://jqueryui.com/dialog/

External javascript not working

I have placed one javascript (hide.js) in my html Page ... Hide function is not working .My scripts are in right order
My code is as per tutorial
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<p id="paragraph ">
This is Paragraph</p>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>
hide.js
$('#paragraph').click(function () {
$('#paragraph').hide();
});
I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
still it is not working ..
i couldnt find any relevant link ..whats wrong ..Please Suggest
Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
In case you must include hide.js first before jquery.js. Change your code to
$( document ).ready(function() {
$('#paragraph').click(function () {
$('#paragraph').hide();
});
}
In this way, your script will work after whole page is loaded.
Or, similarly you can use.
$(function() {
// Your Code
});
order should be, include jquery main file all above.
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
core jQuery file must be include before any other plugin as they may use core jquery methods internally.
You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.
You need to remove the space from your id attribute.
Order of script - hide.js is using jQuery so it has to be included after jquery.js
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined
your id has space.remove it and try again
<p id="paragraph ">This is Paragraph</p>
it should be like this
<p id="paragraph">This is Paragraph</p>
I have discovered a very strange thing which probably could be the cause. It should certainly help you.
In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.
Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.
Environment: Chrome latest Version 44.0.2403.130 m

Noty (notifier) is not working inside a function

I have a misterious problem with the noty plugin click. When I create a notifier as explained on the site everything works fine, but when I put the same statement into a function which is called at the "onClick" event from a button, it doesn't work. There is no noty-notification coming, no errors, nothing happens if I press the button. When I remove the noty-thing and add a normal "alert" statement everything works fine. Is there something I have missed or is this a bug?
The original code looks like:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
<script>
var noty = noty({text: 'noty - a jquery notification library!'});
</script>
When I put the same statement into following function, noty don't works anymore.
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
klick
...
<script>
function test_function(){
var noty = noty({text: 'noty - a jquery notification library!'});
}
</script>
Even if I change the var noty to var n (or something else) nothing changes, as stated in one stackoverflow question before.
Thanks in advance.
Regards, john.
it would be better if you use something like this:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<script>
$("#element").click(function(){
var n = noty({text: 'noty - a jquery notification library!'});
});
</script>
<a id="element" href="#" onclick="return false;" class="btn">klick</a>
And of course use an "id" on the element you wish to bind to noty. It will work perfectly.
Check out working example here:
JSFiddle

Jquery and ShadowBox

I cant make the shadowbox work...I have a static html page which has an image that acts as a link to open a swf in the shadowbox.
however when I click on the image it opens the swf like any other image file in the browser.
The Shadow box doesn't seem to work at all.
This is my html page. I am using shadowbox-build-3.0b. Its strange that this editor doesnt allow new users to use image tag in the html code in the editor. So i have changed mine to image.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/adapters/shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<link type="text/css" href="shadowbox-build-3.0b/shadowbox.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="shadowbox-build-3.0b/languages/shadowbox-en.js"></script>
<!-- Begin Shadowbox JS -->
<script type="text/javascript">
jQuery(document).ready(function () {
Shadowbox.init({
language: "en",
players: ["image"]
});
});
</script>
<!-- End Shadowbox JS -->
</head>
<body>
<image src="imagewithplaybutton.jpg" >
</body>
</html>
Hmm. I have not used shadowbox myself, but if you look at the way how the page suggests you set shadowbox up, there seems to be things that are wrong.
As i understand you want swf file to open when clicking on image; Shouldn't you set players: to swf then?
Your code also does not show if your img has link around it and if that link has rel="shadowbox" attribute.
I guess it should be set up something like this:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["swf"]
});
</script>
<img alrt="click here to open swf file" src="imgofflash.jpg"/>
Shadowbox.init() shouldn't be in the document.ready(). It should execute as the page loads.

Categories

Resources