base href url breaks <a href> anchor for fancybox - javascript

I've wrote some program that opens upon a link click.
<a class="myclass" href="#openfancybox">Open Fancybox</a>
It uses a fancybox, jQuery and everything works perfect.
Once I implemented it into the project, it doesn't work. The problem is this code in the project:
<base href="http://somesite.com/" />
It goes to the base url instead of opening a fancybox.
I've tried to fix it using jQuery or javascript solutions but I had no luck.
P.S. I don't want to remove base from the source code as it could break something else in the project (I have a task to implement my fancybox only).
P.P.S. Also I would definitely prefer a pure javascript solution as far as I use jQuery for my fancybox, but conflicts with other frameworks are expected. The project is for Joomla.

There is absolutely no conflict if you use a base tag and fancybox or whatsoever as you can see in this DEMO ... and there is no need of additional javascript/jQuery to hack or fix the (non-existing) issue as previously suggested.
However, I presume that you clearly understand that the base tag will affect ALL your relative paths including your anchor <a> tags as well as your <link>, <script> and/or your <img /> tags. In other words, any tag that uses the href and/or src attributes.
Having said that, consider this scenario :
Suppose that you have a page test.html which is located in a subdirectory called sandobox. The full path of such page would be http://somesite.com/sandbox/test.html, correct?
Now suppose that you are loading fancybox from within test.html using relative paths like :
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
... that is the equivalent of using the following absolute paths :
http://somesite.com/sandbox/fancybox/jquery.fancybox.css and http://somesite.com/sandbox/fancybox/jquery.fancybox.js respectively.
Now, if you decide to add a base tag like this :
<base href="http://somesite.com/" />
... all your relative paths, inlcuding your calls to fancybox files will be converted to :
http://somesite.com/fancybox/jquery.fancybox.css and http://somesite.com/fancybox/jquery.fancybox.js.
Since the fancybox file are actually located under the sandbox subdirectory, your document won't be able to load them (because the base tag) so your fancybox implementation will fail.
To solve the conflict, you could either do :
Use absolute paths in your <link> and <script> tags or
Relocate your files in relation to the base path.
Check this good question/answer about the base tag Is it recommended to use the <base> html tag?

If anyone still happens upon this. There actually is a conflict to using base href with fancybox.
There is a check in Fancybox that looks at the href of the element clicked on and checks for the # symbol and if it finds that it sets the type as inline.
https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js#L303
This works fine without using <base href>, but if you use that then the href attribute will return the full url with the hash, so the check that looks for href.charAt(0) === '#' will fail, because the first chat is no longer #, but probably an h.
Maybe instead of checking charAt(0) === '#' it should just look for a # and do a split instead.

Related

Give memory address location as a link in href of html

I have a different problem I don't know whether my question makes any sense or not, but I would like to get clarified. Actually I have an Embedded device and I will be loading html webpages in the serial flash address location of my device. Those webpages include common css but individually written in each page.Now I want to make a common page for css and link it to each individual web page using link href. I would like to mention the address location(Hexadecimal address) of css file in serial flash using href in html file.
Can I specify like that ?
Will it link to the location of serial flash ?
will my css gets adopted to my webpages?
or can I do it using Javascript ?
If yes, how can I give the address location in href. Please anyone let me know. Thanks in advance.
No need to include the hexadecimal address location.
Create the folder you would like to use and place all your files there (html, css,etc). When you brows your index.html it will search from within the same folder and if your css-files are there it is enough with below link in HTML.
<link rel="stylesheet" href="index.css">
If you have created a subdirectory (called css) for your css files you need to add the href like this:
<link rel="stylesheet" href="css/index.css">
Regarding your specific questions:
Can I specify like that ?
See above answer.
Will it link to the location of serial flash ?
See above answer.
will my css gets adopted to my webpages?
If you mean if your HTML file will find your CSS file,
- yes, if you put the correct path. If you add it as above
it will be relative meaning that you do not have to know
nor write out the full path.
or can I do it using Javascript ?
You do not need Javascript for solving your issues.
If yes, how can I give the address location in href.
No need of Javascript, use relative path as described in above answers.

apply css on elements which are present in a set of urls

I believe the following is not possible without javascript/jquery but still wanted to confirm as I am not good in css/html/jquery.
I would like to apply certain style to an element but only when a particular url is accessed in my website.
I am using asp.net so a single aspx page template can cater to a host of urls so I cannot write the style in the html of the template.
If I write this style in a css file and include it in the template it will get applied to all urls.
I can selectively load this css file through jquery but I do not want to involve jquery into this as much as possible.
I can also use a asp.net literal control and load the css based on the url from code-behind but then addition of new urls would involve a code change. Also it sounds very messy.
Currently I am applying this through javascript/jquery as below on document.ready
if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
$('#some-element-id').attr('style', 'display:none');
}
But this shows the element for a split of a second before disappearing.
A solution involving jquery/javascript but resolving the above issue will also help.
I hope I was able to explain it properly.
Please let me know if any clarification is required.
It is probably showing at first because it is rendered at least a bit before the page is loaded, so it is shown until the jQuery ready() function is called on page load.
I would think the easiest fix would be to hide the element by default, then show it if it is in the URL:
#some-element-id{
display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
$('#some-element-id').attr('style', 'display:block');
}
if #some-element-id is on a separate page then
add some-class to your element
define that class in a new .css file
only import that new .css file on the page you want the style
applied to
The URL is not part of the DOM so there’s no element to be selected by the CSS.
As you say the only way you can apply the css in a specific URL is using javascript.
The recommendation I can tell you is use addClass instead to use
.attr('style', 'display:none');
Or if you need to add a lot of css you also can include or replace the a full file like:
$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');
I hope it's helps!
the best solution is separate your css styles by codes that generated from server (independent from client).
Also you can test below code instead of $('#some-element-id').attr('style', 'display:block');
$('#some-element-id').hide();
and please insure that your jq lib imported successfully.

How to dynamically change href attribute

I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\javascript.
Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include.
However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu.
I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc).
Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. I'd like to make something more adaptable regardless of the local path.
The best way in my opinion is to use relative URL's from the root. For example in your menu.html file when you reference jquery you can do the following:
/javascript/jquery.min.js
Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory.
If you used:
javascript/jquery.min.js
That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted.
Using the <base> command within a little script to change it solved my issue.
Here is an example:
<head>
<!-- Here a direct path is need to firstly load jquery -->
<script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
<base id="host" href="" />
<script>
/* Where am I? */
here = window.location.href;
hereIndex = here.indexOf('temp-test');
/* make substring from root till temp-test/ */
newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/
$("#host").attr("href", newPathname);
</script>
</head>
Don't know if there is a better way to do it.
Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. So what's up here with the base tag? It is kinda of not getting recognized but it works..
Further investigation is needed for me.

Issues with files loading based on path

I'm using rails 2, and in one of the plugin I'm working on, I found this weird issue, I've TinyMce 4 customized text editor.
I've loaded the script at the beginning of the page, in the new form.
<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
TinyMce loads normally, and works completely fine.
In case of edit form the same script tag above doesn't work, I've move up 1 level to load it, I mean
<script type="text/javascript" src="../../tinymce/tinymce.min.js"></script>
Out of curiosity, what is going on here?
Folder Sturucture.
>>plugin_name
>>app
>>config
>>db
>>lib
>>public
>>images
>>javascripts
>>stylesheets
>>tinymce
I suspect your new page has a url like : /post/new whereas your edit page has a url like /post/1/edit
Because the edit URL has an extra / you need to go up an extra level in the relative path in your script tag.
Try changing the TinyMCE include to be an absolute path, not a relative one:
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>

Javascript onclick with base tag in ie with subfolder

Try this: create a folder test in your website, and put this html file (test.html) in it:
<html><head>
<base href="http://www.site.com/" />
</head><body>
<span onclick="window.location.href='test/test.html?done!';return false;">click me</span>
</body></html>
Click the link in your favourite browser. What's the URL?
Click the link in IE. What's the URL?
EDIT: IE takes you to: http://www.site.com/test/test/test.html?done!
Any way to fix this, that isn't (1) removing base tag, (2) changing onclick to use a function that appends the proper base? Is there a way to override the window.location.href function in IE?
This is apparently still an issue in IE11. I ran into it just now. What I've done is this:
onclick="window.location=document.getElementsByTagName('base')[0].href+'your_url_destination';"
It requires modifying the onclick line, but it doesn't require a separate function. It should work in all browsers, and has so far for me.
After moving my test.htm into a subdirectory called test (final relative path: test/test.htm), I am able to confirm the bug (I initially misunderstood what you were asking about). Googling it also confirms that it is a bug, or at the very least a non-Standard implementation of the <base> tag (this may merely be yet another case of Microsoft not following implementations according to specification).
IE will honor the <base> tag for any defined anchors.
<a href="test/test.html">Click me</span>
will go to http://www.site.com/test/test.html (provided the <base> tag is either not closed, or not self-closed for older versions of IE), but IE (all versions) will only honor the base tag for anchors, not for JavaScript.
The reason IE prepends the additional test/ to your URL is actually standards-compliant behavior. As IE is ignoring the <base> tag, your link of test/test.html indicates that there is a subdirectory called test with a test.html file relative to the current directory (test) and IE correctly navigates to `test/test/test.html'.
As far as how to fix it...
Removing the <base> tag will not help.
Changing the onclick to a function that returns the correct base URL would work, but you've stated this is not acceptable.
window.location.href is a String, not a function, so "overriding" it is a non-starter.
Changing onclick to use an absolute URL would also work.
Removing all embedded onclick attributes and assigning them via JavaScript (attachEvent or addEventListener) would be more effective in the long run (separation of content/behavior) and allow you to easily attach the correct base URL (and the method I would probably choose, although I don't know your specific circumstance).
You could use a DOM manipulation library, like jQuery/Dojo/Prototype to loop through any onclick attributes and update the URL to an absolute URL.

Categories