I have a large (700kb) Flex .swf file representing the main file of a site.
For performance testing I wanted to try and move it off to Amazon S3 hosting (which i have already done with certain videos and large files).
I went ahead and did that, and updated the html page to reference the remote .swf.
It turns out that Flash will load any resources relative to the .swf file accessing the resource - no matter what the root of the html page is. So my resources are now being loaded from the remote site (where they don't exist).
There are two obvious things I could do :
* copy all my resources remotely (not ready for this since i'm just testing now)
* add in some layer of abstraction to every URL that the .swf accesses to derive a new path.
I really want to flick a switch and say 'load everything relative to [original server]'.
Does such a thing exist or am I stuck loading everythin from the remote machine unless I fully qualify every path?
i want to avoid anything 'hacky' like : subclass Image and hack the path there
Append a slash before your urls, this should load relative to the domain instead of the current folder:
foo.load('/like/this/image.jpg')
This is a bit quick and dirty, feeding a "relative" url via a querystring (or the base parameter) would be way more flexible.
You could try specifying the base parameter of your SWF's embed/object tags. In theory it defines the base path that will be used to resolve relative paths for loading, but I don't know if it will work if the base value points to a different server from where the SWF is.
See the docs on embed/object params here. Scroll down to "base" at the middle.
If that doesn't work, another thing I've seen people do is to pass in a custom base path via flashvars. Then inside your SWF, you check if that base path is defined, and if so prepend it to relative URLs before loading.
Related
So I code in Sublime Text 2 combining HTML, CSS, and jQuery to make web designs.
For some reason, when I am trying to specify a location of a file, say Pic01.jpg in the folder images, you would suspect typing in /images/Pic01.jpg should be enough to tell the browser where the picture is located.
But this is not the case. I find myself needing to specify the exact location of the file before the browser will render it. Like; User/Desktop/siteOne/images/Pic01.jpg
This path system is very inconvenient, as I would like to say - export my sites to different computers, but now the code is bound to that specific location on that specific computer.
How can I set it up to make /images/Pic01.jpg sufficient coding for the browser (or Sublime?) to understand what needs to be rendered?
Prepending the path by / means that it will start it search at the root, which can change depending on your server configuration.
With WAMP/MAMP, I have to prepend my URLs by / and then the name of the folder they are in, if they are not at the absolute root of the server. It depends on your setup.
If you want paths that will work regardless of the server root, it's best to use a relative path or use a constant that can easily be changed depending on the configuration.
Example :
define("PATH", "/");
Link that always work
You will only have one line to change to make your paths work all the time with a different configuration - relative paths can be tricky to deal with when working in deep sub-folders.
Furthermore, if you want to see where it's actually looking for the file, open the Console in your web browser of choice, they should display the error (404 most likely) and the path it's looking at.
I know there are lots of similar questions like this in the web, but I haven't got to one working solution after searching for these last 2 days. Some threads are outdated, others solutions don't work, others are too complicated to manage, so... Yes, another question about resources.axd files in asp.net projects.
I'm starting to build a set of server controls and embedding some resources. After building my controls and dragging them into pages, each individual resource is requested by the browser in the form of an .axd script. I understand the part where the ScriptManager manages these scripts and they're not ready to use, for instance, in Bundles in some sort of .Include("*.axd").
I tried some of the combine/minify/compress/gzip/icecreamOnTop packages out there but couldn't manage none of them to work.
I tried the StriptManager CompositeScript approach and the ScriptResources.axd are indeed combined, the response is successful (code 200), but in the end the scripts don't work. Example: I included the jQuery lib in that composite script and then tried to use it in the page - didn't work. I must say I didn't reference () the composite script anywhere because I didn't understand how to do it. If I set the path, then a 404 was returned (found the 1024 byte limit threads, etc...) and all the requests to the WebResources.axd would still remain.
I would prefer not to write an HttpHandler myself.
Also tried to download the AjaxToolkit and tried the ToolkitScriptManager which combines scripts, but that added ~4seconds to my page load. No, thanks.
My question is: what is the current approach regarding this matter in .net 4.5?
I will have lots of resources and would like to combine them. All js and css files in the final website project are bundled, but how to 'bundle' the axd files?
Here's a little example which will make the following requests:
Click here to view image
I know I can set the AjaxFrameworkMode to Disabled and will only have the 2 first WebResources.axd requests in this example, but what about when I have 10 css files embedded in my controls?
Any working solution would be much appreciated.
Many thanks
I managed to implement something that suits my case. More of a work around than a proper combining solution, but works and that's good enough for now.
All my controls extend a base class which has a property called ProcessResources. By default this property is set to true. That means that JS and CSS resources will be registered and each control has everything to work as standalone (axd resources will be generated). When set to false, no resource is registered and no axd files are generated.
The base class also has a static method that receives a destination path as a parameter and copies all the JS and CSS resources to that folder (if they don't exist or have been modified). This method returns a collection of all the needed resources for the control to work.
This way, on Application_Start, I can do something like:
myJsBundle.Inlude(ServerControlA.GetResources("~/ExternalResources", RESOURCES.JAVASCRIPT));
Then just need to set the ProcessResources flag to false (each control or web.config). All resources are now bundled and no axd files are generated.
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
background-image: url('images/ClanSpider.png');
In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.
I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.
Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.
Try putting a leading slash on those paths to represent the root.
ie use:
url('/images/ClanSpider.png')
instead of
url('images/ClanSpider.png')
From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.
Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
http://localhost:8000/images/ClanSpider.png
All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
If the number of possible background images is finite, you could define every one in a class of its own:
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass() to set the correct image.
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.
As this is CSS embedded in the document, all URIs are relative to the document.
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
Try adding a / at the start of the URL?
I'm trying to move all the images stored in web application folder to a database. And calling them with a servlet. Is it possible to call a servlet from my css ?? or is there any way to call a remotely stored image file from css??
I tried to call a servlet method from CSS.But couldn't succeed. Is it possible to call a method like this?
background-image: url(servlet/com.abc.servlet.GetImage?name=home&GetImage('abc','123'));
Yes. As long as the images have urls, you can use it in your css.
For example:
background-image:url('/getimage.ashx?id=3');
You can even go a step further an reroute their urls - you can even use the same urls you have today, but having your server handle the request and loading files from the database.
Another tip: make sure you set the right headers. You want to use the correct content type, and probably want the images cached properly on the client side.
Yes. A CSS rule that specifies an image can contain any kind of URL that the browser can parse and fetch:
body {
background-image:
url(http://www.domain.com/servlets/my_servlet.jsp?argument=value)
}
It is possible. Just create an imageservlet like this example here. To the point just obtain the image as InputStream from DB by ResultSet#getBinaryStream() and write it to the OutputStream of the response as obtained by HttpServletResponse#getOutputStream() the usual Java IO way. Don't forget to add the HTTP content type and content length headers. If you omit the content type, the browser don't know what to do with the information. If you omit the content length, it will be sent with chunked transfer encoding, which is a tad less efficient.
As to referencing the servlet in the CSS file, just specify the URL relative to the CSS file. This way you don't need to worry about the context path. Determining the relative URL isn't that hard, it works the same way as with accessing local disk filesystem paths in the command console. cd ../../foo/bar/file.ext and so on. You've ever learnt that at schools, yes?
OK, assume that the imageservlet is located at http://example.com/context/image?id=x and that the CSS file is located at http://example.com/context/css/globalstyle.css (thus, the current folder is css), then the right relative URL to the imageservlet from inside the CSS file would be:
background-image: url('../image?id=123');
The ../ goes a step backwards in the directory structure so that you go from the folder http://example.com/context/css to http://example.com/context. If you still have a hard time in figuring the right relative path, then let us know the absolute URL of both the servlet and the CSS file, then we'll extract the correct relative path for you.
For example I have site http://localhost/site
In IIS I set that 404 error causes redirection to default.aspx
If I type something like http://localhost/site/nodirectory , (there are no such folder) all works perfectly.
But if I only add slah at end http://localhost/site/nodirectory/, page can't display css and images.
Images and css are located in their own folder. I tried different paths: "gfx/logo.gif", "/gfx/logo.gif"
Does anyone have some ideas about that?
If your css and images are relative paths, say ResolveClientUrl("~/gfx/logo.gif") this renders to the client as src="gfx/logo.gif", which the browser with a slash thinks is /nodirectory/gfx/logo.gif instead of just /gfx/logo.gif.
To resolve this, don't use .ResolveClientUrl(), use .ResolveUrl(), this will make the src render src="/gfx/logo.gif" The beginning / makes it definitive, it's that path from the root of the domain.
You'll see this same hebavior if you're doing paths that start with ../ or gfx/ yourself...make them relative to the application base so there's no chance of confusion.
There are a couple of options...
1)
In your HTML page, make the path to CSS and scripts relative...
"/scripts/myscript.js"
Where the scripts folder is the first folder after the root folder
2)
You can add the base tag to your page, which means ALL page resources will be treated as relative to the root location you specify...
<base href="http://www.mysite.com">
More info about these two options.
If you can, option 1 is perhaps a bit cleaner. You know explicitly the resources that you are affecting. Using the base tag will affect ALL relative paths on your page. Images, Links, Scripts, CSS et al. The second option works best if you developed your 404 page assuming it would be in the root folder, but it could actually be referenced from any non-existent directory. You just put your root address in the base tag and it will all behave exactly as you expect.
With either option, the images can be relative to the location of your CSS file.