I have a javascript module which creates a div with a picture of a close button ("X").
This div and javascript are placed in many places on my site.
Relative path solution: When a page includes the javascript, and the javascript uses a relative path for the image. The relative path is relative to the HTML-page. If HTML pages in different paths use this javascript I will need 2 different images.
Absolute path solution: I do not know what server my team-member is using for development (I know for sure that he is not developing on my server). This means that absolute paths will not work.
Is there a simple way of overcoming this problem? Like making the script somehow aware of its path?
Mutable paths (test/staging/production domains) is always a problem in javascript, the best option is to include the root path of your application/website in the HTML. The obvious place to do this is in your template layer. For example:
<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->
And grab it with javascript for usage in your scripts.
var rootContext = document.body.getAttribute("data-root");
Note, you can only do this when the DOM is ready (or when document.body is available, differs cross browser) ;)
An alternative and in my view less pretty option is to simply render javascript.
<script>
var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>
At least with the 'data-root' technique, you can store the value wherever you like and avoid a global definition.
So in your code where you reference an image, you can do the following:
img.src = rootContext + "/media/js/close.gif";
Or create a nice helper method:
// lets use a namespace to avoid globals.
var myApp = {
// still need to set this when DOM/body is ready
rootContext: document.body.getAttribute("data-root"),
getContext: function( src ) {
return this.rootContext + src;
}
}
img.src = myApp.getContext( "/media/js/close.gif" );
In the helper method, you can also write some code to ensure proper uses of / and whatnot.
There are three ways to specify a path to an image in html:
Completely relative: <img src="kitten.png"/>
Absolute with regard to the filesystem, but relative to the current server: <img src="/images/kitten.png">
Absolute in all respects: <img src="http://www.foo.com/images/kitten.png">
The second method may work for you.
Can't you just use a CSS class? If it's just a div containing an img, you can get rid of the img and use background-image on the div. Setting this from CSS will make sure that the image path is always relative to the CSS file and will almost certainly work no matter the environment (as long as the other images in your CSS work).
Then, you can just set the className on your div accordingly.
Related
In my web app, I have some pieces of html content (or rather markup converted into html) with relative references (to links, images, iframes etc). The content is federated, so some <img src="subfolder/img.jpg" /> can be broken in the context of a page with another path (say, <img src="../subfolder/img.jpg" /> would work correctly in some context).
I wonder if such content can be "repaired" on the DOM basis, meaning that relative paths are calced differently for different parts of DOM (so I want to set one "base" for one container and another "base" for another).
Sections 5.1.2 and 5.1.3 here describe in a nice and simple way how relative URLs are resolved into absolute ones (use base element, if present; otherwise use an HTTP header if present; otherwise use). But this regards static html. I need to understand what happens with dynamic html generation (rfc1808 doesn't seem to be clear regarding the dynamic case, too).
I've tried the following code
document.head.innerHTML += "<base href='"+
document.location.protocol+"//" + document.location.host +
"/subfolder/' />";
var container = document.querySelector('.loaded_from_subfolder');
container.innerHTML = 'some text and an added link';
/* or
var newLink = document.createElement('a');
newLink.setAttribute('href','test.html');
newLink.innerHTML = "added link";
container.appendChild(newLink);
*/
initial link
<div class="loaded_from_subfolder"></div>
in hope that the absolute url is already calced for the initial link and the new base will only be applied to the newly generated one. However, the url is changed for the first link as well.
So is there a way to change the "base" of urls in a container with JS, or the only way to "repair" them is to iterate all the a, img, iframe, link, script (and may be object, form, applet, input, ...) elements and update their relative urls (href, src attributes etc)?
I have given absolute path like src="/test.png" all across the application. I have added my base url like href="http://www.w3schools.com/images/" in HTML head section. But since I have used absolute path instead of relative in HTML, the part "/images/" in base url I have given is not appending to the url of the image.
Instead of coming like:
src="http://www.w3schools.com/images/test.png"
^^^^^^
it is coming like:
src="http://www.w3schools.com/test.png".
Is there anyway I can achieve the way I want without going through each and every pages and changing absolute path to relative?
You need to use:
src="test.png"
Without / because / will make it refer to root.
To include the parent's URL(http://www.w3schools.com/images/), use this:
src= "./test.png"
It will then result in
src = "http://www.w3schools.com/images/test.png"
I can't seem to find the correct encapsulating or prefix syntax for referencing an image located in xxxx site collection.
Right now I have three variations of one image that will be applied to the footer. And these variants are selected based on the site collection, so I can't directly set the image to the masterpage (Unless I want to make three masterpages, which is just overkill for a single image).
I have tried going about this using Javascript to set the source of an img element and CSS to set the url of a container element's background-image. Both are failing me.
In Javascript, I have tried setting the src attribute of my element to:
"<SharePoint:ProjectProperty Property='SiteUrl' runat='server' />/_catalogs/masterpage/Images/myimage.gif;"
"<% $SPUrl:~sitecollection/_catalogs/masterpage/Images/myimage.gif %>";
"~sitecollection/_catalogs/masterpage/Images/myimage.gif";
and repeated the same with CSS for background-image property to a div element. But all I ever get is errors or it doesn't translate the sharepoint code.
Does anyone have any idea what else I can try?
check these URLs for reference -
http://www.vrdmn.com/2011/08/javascript-lmenubaseurl-varaible-for.html
http://johnliu.net/blog/2012/2/3/sharepoint-javascript-current-page-context-info.html
http://blogbaris.blogspot.com/2013/01/getting-web-url-with-sharepoint-2010.html
and try the below method to get the URL.
<%script type="text/javascript">
var url = "<%= SPContext.Current.Site.Url %>";
</script>
Hope this helps!
Where exactly is this image stored? Is it in the default "Images" library of a publishing site? If so, you've got the wrong path. It would be "/PublishingImages/myimage.gif".
This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).
You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.
Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );
javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());
I have a template that gets screenscraped from an outside vendor and need to include absolute paths in the navigation so the externally hosted content will properly link back to our site.
Right now the page/template is driven by a global menu app written by our back end development staff... so anyone who updates our site goes in and changes the menus and their paths...
Right now all of the links are linking to relative paths back to the root.
For example
Home
News
Media
Other
I need a simple way (preferably with jquery) to prepend "http://www.domain.com" to each of those links.
Please note that jQuery object $("a").attr("href") is not equal to $("a").get(0).href ?
$("a").each(function() {
alert(this.href);
$(this).attr("href") = this.href;
});
In you case, this may not help you , because you want static markup, javascript generate dynamic content. But it seems that you want static markup in that case it has to be emit by server.
$('a').attr('href', 'http://www.domain.com'+$(this).attr('href'));
I don't recommend using javascript to solve this issue. This should be solved in the page template. However, if you still want a jquery solution then here you go. Assuming those links have a specific class that distinguish them from internal links:
$('a.external').each(function() {
$(this).attr('href', domain_name + $(this).attr('href'));
})
you don't need jquery for such a simple function....
var elements = document.getElementsByTagName("a");
var eachLink;
for (eachLink in elements) {
var relativeLink = eachLink.href;
var absoluetLink = ["http://",domainName,"relativeLink"];
eachLink.href = absoluteLink.join("");
}
something like this should work, and it runs much faster and you won't need to load the entire jquery library just to run 6 lines of code :P
It's very simple:
$('a').each(function(){$(this).attr('href',this.href);});
When you read the href property of a HTMLAnchorElement, you get the absolute path, so you can overwrite it with attr() method of JQuery.
I noticed that all the solutions here only work with href attributes that begin with a "/" character. If you want something more robust, you may want to try the js-uri library. It looks cool but I haven't tried it myself so I don't know how buggy it is.