I have a pdf inside an iframe and a description text beside it.
In the text, I have links which should scroll the pdf to the desired page.
$('a.pdf-page').click(function(){
var iframe = document.getElementById('#pdf-iframe');
var page_no = $(this).attr( 'data-page' );
iframe.contentWindow.location.hash = '#navpanes=0&toolbar=0&page=' + page_no;
iframe.contentWindow.location.reload( true );
});
This works great in chrome, but firefox (v 23) gives me this error: "Permission denied to access property 'hash'".
Does anybody know why?
Thanks.
Related
C# code:
public ActionResult GetDoucmentImage(long onBaseDocumentId)
{
onBaseDocumentId = 1111;
OnBaseDataAccess db = new OnBaseDataAccess();
OnBaseDocument document = db.GetDocument(onBaseDocumentId);
return View("GetDoucmentImage", document);
}
View Code:
#{
var base64 = Convert.ToBase64String(Model.Data);
var imgSrc = String.Format("data:image/png;base64,{0}", base64);}
<img src="#imgSrc" style="width:200px; height:400px;"/>
Trying to show an image in browser, it works in IE but not in chrome
using chromium, select your image element and right click and select the "Inspect Element" from the context menu....
the chromium Developer tool will open and highlight the client source of the image element....
compare the src value with that shown in the IE Developer tool (f12>Find tab)....
I think MSIE and Gecko browsers sanitise base64 encodings (toStaticHTML), to prevent malicious script injections...
Maybe your Model.Data is not actually a png image.
I am using a rails application, in which I am trying to open a new page, all the static page, https://www.mazzey.com/ is the link, if you click on the header buttons, it opens new page with fade in and fade out effect with the header and footer without refreshing in Mozilla Firefox but in Google Chrome the header also refreshes. I also found that that header and footer refreshes in Firefox as well but it does not that unlike Google Chrome. So can I use to Ajax or any plugin to do that to avoid refresh of header and footer ?
$(function(){
var newHash = '',
$mainContent = $("#main-content");
$(".nav").delegate("a","click",function(){
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
if(newHash){
$mainContent.find("#guts").fadeOut('slow',function(){
$mainContent.hide().load(newHash + " #guts",function(){
$mainContent.fadeIn('slow');
});
});
}
});
$(window).trigger("hashchange");
});
This what I am using with the ba-hashchange plugin
for more information check this
css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.
So for example in the HTML source view, you see this:
<img src="[image:abc123]" />
But when you view the WYSIWYG (live) mode, it shows this:
<img src="/file/image/abc123" />
This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.
http://img405.imageshack.us/img405/104/jzny.png
My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?
This code doesn't work but might make it a little clearer what I'm trying to achieve here.
CKEDITOR.on('dialogDefinition', function(evt) {
if (evt.data.name == 'image') {
var image_url = ???;
var preview_image = ???;
var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
if (file_id)
preview_image.src = '/file/image/' + file_id[1];
}
});
Thanks in advance!
I'm attempting to place an image map into a jQuery UI dialog. Initially, the and are hidden on the page so that I don't have to do any AJAX. When the dialog is triggered, the and are placed in the dialog and the hidden original content has its link to the image map removed.
There are a few links on the image map in tags and in Firefox, Chrome etc the links are positioned correctly and work.
However, in all versions of IE (the web site is SharePoint 2007 and compatibility mode is on), the links do not fire on the image map. You can hover over the rectangles and be shown the link, but the action never fires.
Code used to initialise below:
$(document).ready(function() {
$('.processDiagram').click(function() {
var phase = $(this).attr('title');
var text = $('#'+phase+' div').html();
var mapname = $('#'+phase+' map').attr('name');
$('#'+phase+' map').attr('name', ''); // null out the background map name so it doesn't get confused
var $dialog = $('<p></p>').html(text).dialog({modal:true, autoOpen:false, width:620, title:phase, beforeClose: function(event, ui) { $('#'+phase+' map').attr('name', mapname); }});
$dialog.dialog('open');
return false; // So firefox won't just follow the link
}
}
I could really do with some help here as I have no idea why the links aren't firing.
Thanks,
Steve
So, the reason is the layout being position:relative does a number on IE, moving all of the hotspots to be relative to the body and not to the image map itself.
Solution is to fix that layout issue.
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;