I'm doing all of this in a DotNetNuke module.
I have some images that I load from a database as byte data. Originally, I was converting the byte data to a Drawing.Image, resizing it, then converting it back to a byte before doing a Response.BinaryWrite. This was all taking a place in .aspx.
Meanwhile, in the View.ascx I create a div in the code as part of a jquery and had the background-image point to the url of previously mentioned .aspx. I had passed in a parameter within the url string to get different images and this all worked fine.
However, here's the problem; I learned that using a .aspx within a DNN module can create a security issue among other problems. Therefore, I'm now looking for alternatives for displaying the images as a background within the div tag.
Is there a way to load the image into memory and set the div's background to that memory image and will that work across the latest versions of IE7, IE8, IE9, Firefox, and Chrome? I'm open to other alternatives and suggestions
As long as you are validating the users access to the resource, there is no security risk with doing this.
Related
Using the Open Graph protocol, an image can be signaled to applications such as Facebook to associate with a site link. For example:
<meta property="og:image" content="https://mysite.any/images/thumbnail.jpg">
However, this has a disadvantage: the image is a fixed one, i.e., it is always that same image whatever is the page. Obviously, using PHP, I can also select different existing images depending on the page being called, but doing this for any page on a site with hundreds of constantly updating pages is a mission impossible.
Ideally, I would like to be able to generate that image automatically when the server receives the HTTP call from the agent and generates the page content.
But how? Is there a simple way to do this, taking into account that the page is actually rendered by the browser and so the server actually has no idea how it will be represented? Probably I cannot do that by PHP but I need some JavaScript to do that. Is that correct?
This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.
I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.
My question is one of two things:
a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.
or
b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.
Thank you and please reply if you would like more information!
Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.
If you are binding fancybox like
$(".fancybox").fancybox();
... you could force the type of content to image like
$(".fancybox").fancybox({
type : "image"
});
I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.
I'm using swfobject to load a flash object on my site and it's loading very slowly on pages with a lot of data...as if swfobject waits until the page loads before loading the swf.
Here's an example page with swfobject: http://www.tripline.net/trip?id=066434736132100383DB8A184B7D8D17
If I change out the swfobject code with an iframe (with the swf as the src) or just use object embed, the flash object loads much, much faster...before the rest of the page loads.
I know there are a ton of page load time improvements I could make to that page (I'm working on that as well), but I'm wondering if there are some specific changes I could make to the way I'm using swfobject to get the same loading speed as an iframe or object embed?
A couple of things to try:
Use static publishing.
embedSWF() waits until the HTML DOM is ready before replacing the content with the swf. With static publishing, browsers that support the standard way of embedding objects without using javascript will start loading the swf as soon as they get to the <object> element, and then swfobject will patch things up in javascript when the DOM is ready. That should give a slightly faster display of your swf.
Move even more javascript to the bottom of the page, if possible.
(I rarely do that, but) since any javascript will block the DOM parsing (in most browsers) until the script has been (loaded and) executed, that means it'll get to the swf later.
This would only make a real difference for static publishing, since dynamic publishing will still wait for DOM ready. DOM ready still won't occur until all scripts on the page have loaded and executed, which should take about the same time regardless of where they're placed (unless moving the scripts to the bottom gets rid of other blocking issues).
Play around with createSWF (not recommended)
createSWF() doesn't wait for the DOM to be ready. I have little idea of the internal workings of swfobject in terms of DOM manipulation these days, but - in the case of dynamic publishing - it may be possible to call it right after you've added the placeholder. The placeholder part of the DOM is (mostly) ready by that time (see e.g. here).
But that all depends on what other parts of the page swfobject wishes to address behind the scenes these days, and what it may do in future versions. Any DOM manipulation before DOM ready may also cause the browser to render parts twice in some cases, which obviously doesn't help performance. In short, not recommended.
I have a question that is similar to this question here:
Prevent scrolling on HTML5 <video> element on iOS
Basically, I've used document.ontouchmove & e.preventDefault() to disable the scrolling on a page destined for the ipad/iphone. No worries, that works great and there's a bunch of fixed elements that play nicely. One of the things that is embedded in the site is the iframe-embed code from Vimeo. My problem comes from the fact that, since the iframe content comes from a different domain and is in a different document, my document.ontouchmove & e.preventDefault() script is ignored within the iframe. The default page scrolling behaviour returns when the iframe is touched, and the page starts acting weird as elements that aren't supposed to move, do.
I don't think there's any way to apply javascript from the parent page through to the contents of the iframe, but does anyone know of a way to prevent all native scrolling as a general effect? (or maybe zero-out the scrolling as it happens?)
I might have to go to a more traditional, non-ajax-y view for this particular page in my site, but that ruins the overall look-and-feel.
The site hasn't gone live yet, so I can't post the address, but I can post code snippits on request.
TIA