Relative URL in css var on iOS gets related file where this var was determined, instead of where it used, so URL is wrong.
Example: if to determinate url var into index.html
:root {--theme-bg: url('../img/white_rose.jpg');}
and to use it in separately style.css - in all browsers URL will be relative to this style.css and full URL will be http://domain/assets/img/white_rose.jpg
but on iOS will be relative index.html so final URL will be http://domain/img/white_rose.jpg
Anyone had this? Is this possible to fix somehow?
I have this exact issue, code here: https://github.com/warlockuk/safarivarurl
It's Safari. It seems to process the fallback url relative to the HTML, not the CSS file that contained it.
If you take the fallback URL out of the var and just set it straight on the HTML everything is fine.
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
I am trying to load html page in WKWebView which is linked to external javascript and css files. My web view shows me the html page but it does not seem like that its respecting css file values. Can anyone please suggest me as to what am I doing wrong here. Following my code to add html page in WKWebView:
override func viewDidLoad() {
super.viewDidLoad()
let path = NSBundle.mainBundle().pathForResource("index", ofType: "html");
let htmlString = String.stringWithContentsOfFile(path, encoding: NSUTF8StringEncoding, error: nil);
self.webView.loadHTMLString(htmlString, baseURL: NSURL.fileURLWithPath(NSBundle.mainBundle().bundlePath));
}
Also, here is the project structure where .css, .js and .html files re added.
Any help would be appreciated.
The problem is that the WKWebView renders page content inside a sandbox process that cannot access files in your application bundle. This effectively means that file:// URLs do not work.
I ended up including a small web server in my application to make it easier to serve content to the WKWebView.
I just downloaded a fresh copy of tinymce, uploaded it and tried to use it on my UTF-8 encoded website.
The menu bar icons are either garbage because it can't find it's presentation file (font?) or the encoding of one of the 10000 files is wrong.
Anyone knowing this bug? I didn't change anything, just uploaded..
TinyMCE doesn't use my german lang file either, obviously. I placed the js file into the "langs" folder.
<script type="text/javascript">
tinyMCE.baseURL = '//example.com/de/assets/scripts/tinymce';
tinyMCE.suffix = '.min';
tinymce.init({
selector: "textarea"
});
</script>
Do I have to set any configuration for path, basepath, ... ??
My actual path to tinymce is scripts/tinymce/tinymce.min.js. The origin path provided by the shipped package was tinymce/tinymce/js/tinymce/tinymce.min.js but honestly this kind of nesting folders without any reason..
update: The paths are working, it does read files not directly linked.. (like theme.min.js) successfully.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
In visual studio virtual server this works. But when I put site on IIS it doesn't display images from content folder.
var imgPath = '/Content/Images/Icons/' + icon + '.png';
var imageContent = '#Server.MapPath(Url.Content("-1"))';
image = imageContent.replace('-1', imgPath);
I get errors in browser foreach image
http://localhost/Content/Images/Icons/carwash.png Failed to load resource: the server responded with a status of 404 (Not Found)
First thing is first, are you sure that all of your 'icons' are part of the solution and are actually being deployed to your web server? I have had a few instances where I would add a file to the solution directory and VS does not automatically include in it the solution, thus it never actually gets deployed...
If that is ok and the images are actually there, my next question would be, have you tried just using the #Url.Content helper in your view to determine if that is working as it should?
<img src="#Url.Content("~/Content/Images/Icons/SomeIcon.png")"/>
EDIT
Since you are trying to accomplish this in Javascript and the above tag works in HTML, you should be able to condense that code up there to the following code:
var image = '#Url.Content("~/Content/Images/Icons/")' + icon + '.png';
Go ahead and let MVC get the path to the Icon folder and append your file and extension to that. This should eliminate the need for string replacement and still be able to process the icon paths in JS.
var image will now be the complete relative path to the icon file you have passed to this function. You can use this string to update and img src tag or create an image or whatever.