I have noticed that sometimes relative links from i.e urls in stylesheets are not working if the path in the address bar is pointing to the nsf instead of the xsp
so if I have the following inline style in a panel
background-image:url('footer-bg.png')
and I access my site using acme.com/mypage.nsf (with a launch propery set to start.xsp)
the background is not loading
but if I use the fullpath to the xsp the background is working fine e.g acme.com/mypage.nsf/start.xsp
How can I solve this issue so that my inline stylesheet background always work
The trick is to always add a trailing slash if you autolaunch an XPage in the database properties.
var h=window.location.href;
if(h.indexOf(".xsp")==-1){
if(h.substring(h.length,h.length-1)!="/"){
window.location.href+="/"
}}
I have written a blog post about it here
http://www.xpagedeveloper.com/2013/quicktip-get-right-path-when-autolaunching-an-xpage
or use this jQuery code that Thomas added
$(function(){
var h=window.location.href;
if(h.indexOf(".xsp")==-1){
if(h.substring(h.length,h.length-1,1)!="/"){
window.location.href+="/"
}}
})
I have a snippet for that that resides in my layout CC that I use on every page: http://snippets.notesx.net/Privat/osnippets.nsf/snippet.xsp?documentId=13EBFA7FDDC4354EC1257C120005018E
In the beforePageLoad you put the following code:
var url = facesContext.getExternalContext().getRequest().getRequestURI();
if(url.indexOf(".xsp")==-1){
if(url.endsWith("/")){
url = url.substr(0, url.length-1)
}
context.redirectToPage(url+view.getPageName())
}
Related
Trying to get a code generated by Crowdriff to display a gallery on a page and it is being blocked with css that I am not defining as display none. I'm not sure where this is coming from as I haven't set it anywhere to display none.
Screenshot of problem
Here is the page where it should be showing:
https://www.orillialakecountry.ca/test-gallery/
Script tags are never displayed. These are used to import and execute javascript files.
In the javascript a HTML element is probably targeted in which it tries to inject it's HTML.
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}
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 confused by some behavior in Firebug.
I'm trying to update my CSS and I made changes to the actual CSS file and saved them.
If I update a directive on an existing selector, those changes will be rendered when I reload the page.
However, if I add a new class ( e.g. boxQuestion ), and create a new selector, it won't render at all.
The new selector doesn't seem to be displaying at all. Neither in the rendered HTML or in what Firebug is displaying.
I have tried clearing the cache and restarting my development server, but it still won't add the new selectors.
What am I doing wrong?
I'm developing in Django and using runserver.
Things to try
double clicking the browser refresh button to get the new css
restarting the development server
quit Firebug and restart the browser
see if your development server is server the correct CSS file and selectors
http://localhost:8000/media/liquid.css
The Most Import thing is to:
5. Validate your CSS with the CSS validator:
http://jigsaw.w3.org/css-validator/
I had some comments in the CSS file immediately before the class selector. I had just used # to annotate the comments. This is incorrect syntax for CSS
When I surrounded the comments with /* #comment */ the problem went away.
possibly your CSS is incorrect. Do your changes appear in source view?