Seadragon deepzoom placement of files - javascript

I have created a deepzoom image, and when image files is placed locally I can display it with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
font-family: Verdana;
line-height: 1.25em;
background-color:#000000;
}
</style>
<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>
<script type="text/javascript">
var viewer;
function init() {
viewer = new Seadragon.Viewer("container");
viewer.openDzi("spider.xml");
viewer.setFullPage(true);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</head>
<body>
<div id="content">
<div id="container">
</div>
</div>
</body>
</html>
But when I then uploaded the images and the xml file to http://foto.qaz.dk
and changed the following code viewer.openDzi("spider.xml"); to viewer.openDzi("http://foto.qaz.dk/spider.xml");
I get an error message from seadragon "Hmm, this doesnt appear to a valied deep zoom image"
What am I doing wrong?

See this post:
http://dragonosticism.wordpress.com/2008/11/25/seadragon-ajax-and-cross-site-scripting/
You have hit a cross-scripting javascript problem thingy. You will need to move your script onto the remote host or think again.

do you control foto.qaz.dk ? if so, set the appropriate CORS headers, download the XML as a string and pass said string to you openDzi call as the second parameter. For more on CORS : http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
CORS is not supported in older browsers, but since you are writing a seadragon based app, assumption is you have an expectation of only working with modern browsers. see: http://caniuse.com/#feat=cors

Related

How to change DOM element in embedded iframe content?

I have a situation where I must embed a legacy form inside a styled page using an iframe.
We redesigned our website to be beautiful, but we have to embed this ugly form on one of the pages.
Our beautiful website page ( beautiful.mycompany.com ) , contains an iframe like this :
<iframe id="embedded-form" frameborder="0" height="240" scrolling="auto" src="http://ugly.mycompany.com/old/forms/hzxkardx.P_Select" width="320"></iframe>
The ugly form, on the same domain but a different subdomain ( ugly.mycompany.com ), looks like this, without any ID's in the elements. I don't have access to change anything on the ugly page.
<!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" lang="en">
<head>
<style type="text/css">
#import url(http://ugly.mycompany.com/css/web_defaultapp.css);
</style>
</head>
<body >
<H2>Legacy Form Title</H2>
<BR>
<BR>
I'm trying to access the H2 on the embedded page using javascript and the DOM.
I was hoping to use something like this, but I don't understand how to navigate into the page inside the iframe :
<script language="javascript" >
document.querySelector("iframe > html > body > h2").style.backgroundColor = "red";
</script>
Thanks for your help, I'm trying to use native javascript ( not jquery ).

why javascript works on my website, but not locally

I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom
This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.
change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"

How to change css background-color in iFrame

I am getting html code from iframe and want to set background-color to this class: class="body"
My HTML source looks like this:
<iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some-url" scrolling="no">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<body class="body">
....
</html>
I have tried with this jQuery code but not worked for me.
<script type='text/javascript'>
$('iframe').load(function() {
$("iframe").contents().find(".body").css('background-color', 'red');
});
</script>
First I have tried to check if color is working or not. If works I want to set background-color to none.
Is it possible?
Thanks.
No, it isn't possible. You aren't allowed to access the DOM of a page on a different origin.
If you have the cooperation of skycheck, you could post a message to the page in the frame and it could listen for that message and set the class based on it.

Unsecure content over https

I am getting the mixed content warning on a webapp I am working on when using the jsDatePick.
I have used fiddler and can confirm the problem is not caused by any image sources.
When a date is selected the following line is run:
window.location.href = "\something\something\day?=date" + this.getSelectedDateFormatted();
Would this be the cause of the problem?
The problem seems to be with a JsDatePick .js file. I have the same issue (mixed content). I'm unfortunately forced to use IE 8 for this project. The parent page is https, and I've minimalized the page to the following (this minimal page still gets the mixed content pop-up:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
window.onload = function()
{
new JsDatePick({
useMode:2,
target:"date_range1",
dateFormat:"%m/%d/%Y"
});
};
</script>
</head>
<body>
<h1> Hey</h1>
</body>
</html>
No, because the protocol is not specified it should inherit the protocol of the parent page. Look for anything calling "http://" instead of "https://" in your page source.

Why would javascript work on my Sony Ericsson C510 browser, but not javascript + jquery?

I'm able to copy the following .htm file to my sony ericsson C510 and the mouseover works:
<script type="text/javascript">
<!--
if (document.images) {
front = new Image
back = new Image
front.src = "front.png"
back.src = "back.png"
}
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src")
}
}
-->
</script>
<img onMouseOver="swapImage('test','back')"
onMouseOut="swapImage('test','front')"
src="front.png"
border="0"
name="test">
But I can't get any jquery to work, e.g. the following example does not respond when I click on the links. I know the jquery-1.4.2.min.js file exists in the right place because I copied all the files in the directory:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div > div.question").click(function() {
if($(this).next().is(':hidden')) {
$(this).next().show();
} else {
$(this).next().hide();
}
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
cursor: hand;
cursor: pointer;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="1" class="flashcard">
<div class="question">Who was Wagner?</div>
<div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
</div>
<div id="2" class="flashcard">
<div class="question">Who was Thalberg?</div>
<div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
</div>
</body>
</html>
How can I get jquery to work in my Sony Ericsson C510 browser as plain javascript does?
Added:
Based on rchern's suggestion, I tried this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').css("background-color","lightgreen");
alert("hi from jQuery");
});
</script>
</head>
<body>
<p>test from html</p>
<p id="test">jquery should turn this green</p>
</body>
</html>
In firefox on the desktop it shows the popup and turns the line green, but on the cell phone jquery seems to have no effect, only the text is shown.
The C510 browser is NetFront 3.4.
This is definitely from the old school of browsers, back before vendors considered it useful to provide documentation on what was supported, or debugging tools. With NetFront, like other older mobile browsers, you really have to work up incrementally testing features as you go, because some of what we would today consider basic JavaScript (never mind DOM) is broken, and when something goes wrong you have little affordance to work out what it was.
jQuery is a complex beast that takes a few liberties with what JS and DOM allow. I would not expect it to work on mobile browsers prior to the current crop of smartphones (WinMo 6.1.4+, iPhone, Android etc). Sorry.
jQuery isn't supported on all mobile devices. I've been able to get it working on iPhone, iPod Touch, most Android phones, Palm Pre and -i think- Blackberry.
John Resig is working on a mobile version though, check out
http://groups.google.com/group/jquery-dev/browse_thread/thread/6d0f9da66581d9ca/819ff599f546ec65?lnk=raot&pli=1

Categories