jQuery Thickbox with .ASHX image handler - shows garbage - asp.net

I am using an .ASHX handler to return images from my ASP.NET app. When I use the browser to hit the URL directly (example):
http://localhost/myapp/GetImage.ashx?key=12
it works fine... image shows up on the page. but when I use that same link as a target in Thickbox... I get this:
alt text http://franceschina.net/temp/thickbox.png
the distilled version of ASHX the code:
byte[] img = (byte[])pp.PRODUCT_PHOTO1.ToArray();
context.Response.ContentType = "image/JPEG";
context.Response.OutputStream.Write(img, 0, img.Length);
any idea what I'm missing?

http://drupal.org/node/140371:
In the Thickbox module, the main *.js file, thickbox.js does not account for image urls created in drupal, e.g. via /image/view/2321/preview instead of /image.jpg (or *gif or *png). If thickbox.js does not see the file name itself (gif, jpg, png, jpeg) in the link anchor tag (the [a href ...] tag), it will treat the image like another mime type that is not an image. This causes Thickbox to spit out God-awful garbage on top of your page instead of a cool shadowbox (lightbox) effect.
Looks like the same issue you're having.

well I ended up using the iframe option of ThickBox to load my image with another page. I don't love this solution (it requires a separate page and extra code to determine the optimal height/width of the iFrame)... but it works and I don't have any more time to mess with it

Related

Mendix iFrame - Page not found

I have created multiple custom .html pages and placed them in /themes in my project. To use these custom pages in my project, I am using iFrame widget, which is placed in a dataview and all the settings are done correctly as I have used this widget previously as well. When I navigate to this page with widget using iFrame, it works fine the first time and displays the page correctly. However, after first time, no link to any of the pages works and gives an error "Page Not Found". Can someone point out what I am doing wrong here or guide me to a different/better solution to achieve this?
Note: I have also tried the same with iFrame tag inside HTML Snippet, and the behaviour is exactly same.
A common mistake is that people use just the filename instead of complete url in iframe url property. Try changing the filename to complete url e.g. http://example.com/file.html instead of file.html.

Open PDF in browser instead of downloading it

After uploading a PDF to the Media Archive, I am trying to link to it from a page on a site.
While editing content, I use the hyperlink tool then select the PDF I want to link to via the URL input box.
After saving and publishing the content, clicking the link downloads the PDF and I don't see any apparent way to make this view-able in the browser by using the current Media ID Composite provides. When rendered, we get this:
pdf
Is there a way that I can reference a PDF without using the Media ID and simply use the file name instead?
Here is the Request/Response header info:
After reading what Pauli Østerø said, I understand the problem but am still not able to think of a solution.
I can get the PDF to view in the browser by adding ?download=false to the href URL via Developer Tools. But when I try to add ?download=false to the href through Composite, it doesn't take affect and I get the console output: "Resource interpreted as Document but transferred with MIME type application/pdf: "http://c1.wittenauers.com/media/4afb7bc8-f703-469d-a9b2-a524d8f93dcb/ryc7iw/CompositeDocumentation.PDF"."
Here is the network trace that was asked for by Pauli. In the image, I included the bit where I add ?download=false to the URL, in source view, just in case there could be another way to add it.
Edit: URL and headers for the page.
Here is the link to the page that contains the link:
http://c1.wittenauers.com/cafe/test
Here is the headers for the page containing the link:
From what you're experiencing, it seems to me that Composite have gotten the MIME type of your uploaded file wrong, and is therefor not correctly telling the browser that this file is a pdf, and the browser doesn't know what to do with it.
Try deleting the file and uploading it again.
Try add ?download=false and the end of the href to the file. You prob. need to go into source mode of the content editor.
This is the exact line in the Source Code which is responsible for this behavior, and the logic is as follows
If there is no Querystring named download, the attachment is determined by the Mime Type. Only png, gif and jpeg will be shown inline, the rest will be shown as attachment.
If there is a Querystring named download with a value of false, it will override the Mime Type check and always force the Content-Disposition to be inline.
I made a quick test here to show that the behaviour is a expected. At least in my Chrome browser in Windows 8
Force download: https://www.dokument24.dk/media/9fdd29da-dde8-41f7-ba4c-1117059fdf06/z8srMQ/test/Prisblad%202015%20inkl%20moms.pdf
Show in browser: https://www.dokument24.dk/media/9fdd29da-dde8-41f7-ba4c-1117059fdf06/z8srMQ/test/Prisblad%202015%20inkl%20moms.pdf?download=false
Expanding on Pauli's answer, you can add the following snippet to your page template to automatically add the '?download=false' to all pdf links.
$("a").each(function () {
if (this.href.includes(".pdf")) {
this.href = this.href + "?download=false";
}
})

Stop iframe autoplaying with mp4 files

I want to stop a .mp4 file in an iframe from autoplaying.
The code is simple:
var siteVidUrl = document.createElement("iframe"); // create iframe
siteVidUrl.src = Obj.URL + "?autoplay=0"; // create src attribute for iframe
link_col.appendChild(siteVidUrl); // append to DOM
An example of Obj.URL would be
media.website.com/theVideo.mp4
The video contines to autoplay, despite my best attempts. As you can see, I am appending "?autoplay=0", to the end of the src attribute URL, but no luck there. I have read a bit about the video HTML5 tag, but no luck there either...
The majority of the videos are .mp4 files.
Can anyone point me in the right direction?
Is it necessary to use an iframe for this? If not have look at the HTML5 video-tag: https://www.w3schools.com/htmL/html5_video.asp
If the iframe is needed (for any reason), you could set the src to a page which receives the URL of the video as a parameter and just produces the HTML containing a simple video-tag in it. This way you'll be able to control the video playback and disable autoplay.

How do I get a chrome extension to load an iframe containing a local page

I'm writing a chrome extension where the standard popup page is used as a menu and I add a iframe at the bottom of the page to display some output. the display.html page contains the output I intend to display in the iframe appended to the page. This code inside my content script appends the iframe but it searches for a display.html page on the webserver rather than in the code packaged with the extension. Is there some way for me to get it to load my display.html page rather than one that may or may not be there on whichever page the extension is used on.
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "display.html");
ifrm.style.width = "100%";
ifrm.style.height = "20%";
document.body.appendChild(ifrm);
Updated answer
Per #Cnly's comment, please use chrome.runtime.getURL to get the URL of the embedded resource. (The original answer is extremely old, predating even manifest v2).
Original answer
I think you may want chrome.extension.getURL to get the URL of the embedded resource.

Load aspx in div or adjust the size of an iframe

I have an htm file with an iframe and a menu structure. The menu can load an htm file in the iframe or an aspx file. No problem at all.
But... Now they want the iframe to get the size of its content. (So there will be no scrollbar in the iframe, but you have to scroll the whole htm file.)
I didn't get this to work so I thought I would use a div for this issue. But I can't get the aspx file to load in a div.
So I'm stuck. Either I have to find a way to let my iframe grow or I have to find a way to load an aspx file in a div.
Placing the remote content directly in a div will be the easiest here, otherwise you will have to try and automatically size the iframe after the page loads, and it might even change height after that too.
To load HTML content from a remote source into a div you will need to look at the XML HTTP Objects exposed to the browser via javascript.
It sounds like you are not familiar with the concept so I would advise using a Javascript library like jQuery to help you along.

Resources