Having problems with Fancybox (P - javascript

I'm trying to add Fancybox to my ASP.NET MVC application but I'm having some troubles.
As you can see, I added references to jQuery and Fancybox. The css is incapsulated inside of my style.css. And all the pictures are in the right place.
<link rel="stylesheet" href="/Content/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.fancybox-1.2.6.pack.js"></script>
Well, I added this lines to fire up the Fancybox plugin:
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox(); // The a with zoom class
});
</script>
Then I have the link:
<a class="zoom" href="http://www.nytimes.com">This goes to iframe</a>
But when I click on the link I get a: Microsoft JScript runtime error: Permission denied
alt text http://img265.imageshack.us/img265/7738/screenshot20091123at352.png
And this is my screen after that:
alt text http://img14.imageshack.us/img14/7738/screenshot20091123at352.png
I don't know what to do. I'm desperate because I've spent all my day trying to figuring out what's happening. Please, help! :)

You need to add the class 'iframe' to the link to tell fancybox to use an iframe to load the content to avoid a conflict with the same origin policy. The same origin policy prevents the browser from downloading external content via AJAX. Alternatively it appears you can add a ?iframe parameter to the URL and achieve the same effect.

Related

Javascript not showing up

I'm working on a index.html file that was previously created by DNN (Dot Net Nuke).
I've put a Javascript Slideshow Banner in where there was previously an SWF Slideshow banner. The problem is the javascript is not showing up.
Here's what the problem (i.e. banner not showing) looks like: http://www.drkachooie.ca/index.html
Note: When I upload an html with just the flash banner it shows up (http://www.drkachooie.ca/rice.html), so something must be overlapping it, right?
My question is: How can I adjust my code to make my javascript show up? If someone can check the code out, and see what's wrong, I would greatly appreciate it.
Here's the javascript (Correction: HTML & CSS) in the body tags of the index.html document:
<div id="mhrotator">
<style type="text/css"> #mhrotator img { display:none; } </style>
<img src="images/Bitmap1.jpg" title="Bitmap1" />
<img src="images/Bitmap2.jpg" title="Bitmap2" />
<img src="images/Bitmap3.jpg" title="Bitmap3" />
<img src="images/Bitmap4.jpg" title="Bitmap4" />
<img src="images/Bitmap5.jpg" title="Bitmap5" />
</div>
Here's the javascript in the head tags of my index.html document:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhrotator.js"></script>
<script type="text/javascript" src="js/initrotator.js"></script>
<link rel="stylesheet" href="js/mhrotator.css" type="text/css" />
Currently all the other pages of the website are using the old swf file as my banner. but the index.html file is currently using the javascript (which is not showing up)
Note: If you need any other information, feel free to ask!
The version that is working has the banner inside of a div element that is not being affected by <style type="text/css"> #mhrotator img { display:none; } </style> which is preventing the version that isn't working from showing the images.
I see this error in console :-
Uncaught TypeError: Cannot read property 'mhrotator' of null
at HTMLDocument.<anonymous> (initrotator.js:1)
at Function.ready (jquery.js:26)
at HTMLDocument.L (jquery.js:33)
Javascript is getting executed before div element mhrotator gets loaded.
Try placing below script tag after </body> tag.
<script type="text/javascript" src="js/mhrotator.js">

Jquery-ui dialog box 'x' button image is not visible

I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.

Problems with jMyCarousel

I'm completely stuck as to how to fix this. When I test it offline it works great. When I upload it and run it live none the images on my site load unless you click on the link for the page a second time. And on the press page it loads for a second and then its the same as the other pages but a second click on the link doesn't fix it. I've checked out this problem in firefox and safari.
P.S. I know my Menu's still are having issues if anyone has any suggestions for that I'd be super thankful. Mainly how can I get the hidden menu to stay centered.
Thanks!!!!!
http://www.tracyashaw.com/e2studio/index.html
http://www.tracyashaw.com/e2studio/press.hmtl
This on on the top of each page
<link rel="stylesheet" href="e2studio.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '100%'
});
});
</script>
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("images/home_1.jpg","images/newport.jpg","images/newport_life.jpg","images/RI_monthly.jpg","images/unique_homes.jpg","images/ri_monthly_cover.jpg","images/so_ri_press_cover.jpg","images/grace_ormonde_cover.jpg")
</script>
The jQuery mousewheel plug-in you are using clearly states in the header comments that jQuery 1.2.2+ is required, likely due to the dependency on the special property of jQuery's event object. You have linked to jQuery 1.2.1. Also some image requests are coming back with a 404 response code. You'll have to address these two items.

initialise play requests from within IFRAME pages

I am no web designer pro so please be gentle
Situation:
I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .
The site is composed of:
index.html
-> contains:
1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth...-plugin/841563)
3- An IFRAME where the other pages are loaded into
tracks.html
-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page
facebook.html
-> contains FB comments box
background.html
Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.
Question:
Are there any ways the audio-player .js code (I'll post the code in next) can be modified so that it handles play requests initialised from pages within the iframe?
Any other suggestions come to minds? (remote window? other?)
Thank you!
this what I've got on the index.html page head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
});
function changeContent() {
document.getElementById('tracks').innerHTML="";
}
</script>
</head>
where, from the same page, links like this one play correctly in the player:
<ul class="fap-my-playlist">
<li>Lounge session - Bar</li>
The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?
You can indeed make something happen in one frame when something happens in another frame using JavaScript. Use the parent object from within the frame. Look here for some examples: http://www.pageresource.com/jscript/jframe1.htm
Also, you mentioned in passing that you might want to do it from another window, as well. This can be accomplished using window.opener.

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