Comments (3)
You need to wrap code in backticks since Markdown is an extension of HTML and tags have a meaning. I edited your post for you.
The base
tag affects links resolution pretty significantly so introducing it has consequences. There's a blog post from a former jQuery UI Team member, TJ Van Toll, that you may want to read here: https://www.tjvantoll.com/2013/02/17/using-jquery-ui-tabs-with-the-base-tag/
from jquery-ui.
I appreciate your response, and the link to the blog post, but I'm disappointed that this is closed without further consideration.
The side-effects from having <base>
in the head give very unintuitive results, and look to all intents and purposes like a bug.
The most typical use of JQueryUI tabs is to use the <a>
tag to indicate a "page" of information to be shown, and the standard way of doing this is with a fragment that matches the id of the container to be shown.
Using <base>
in the header should not change that functionality - especially when the <base>
is pointing to the current page.
There's no logical reason to apply the base url to a fragment. A fragment indicates a point on the page, a bookmark, it does not represent the contents of that element. And, even if it did, the implementation is still wrong, because it loads the entire page - not just the contents of the element.
In summary:
- Tabs should not apply
<base>
to simple fragments. - Doing so is counter-intuitive.
- Doing so creates extremely unexpected results.
- At the very least, this usage should be optional and configurable.
- The documentation should provide clear warnings about unexpected results when the
<base>
tag is used.
from jquery-ui.
It's not jQuery UI which is applying <base>
, it is the browser itself.
As explained in the blog post, the goal of the jQuery UI design here is to degrade gracefully - if the link is to the URL identical with the current one, just with the hash changed, the browser will scroll to the element with the ID matching the hash; if the URL is different beyond the hash, the browser will redirect to the new URL.
If you have a page with the address https://example.com/page1/
and you have the following in the HTML body:
<a href="#main">Go to main content</a>
<h1 id="main">Main content</h1>
then clicking on the link will scroll to the h1
. However, if you have <base href="/">
in <head>
, the link no longer scrolls but redirects to https://example.com/#main
. To restore previous behavior, the href
would need to be changed to either the absolute URL: https://example.com/page1/#main
or to one relative to the base: page1/#main
.
If you have HTML structure similar to the above and you expect the link to show you the main content, your HTML is just incorrect and that's true regardless of jQuery UI presence or not.
BTW, if base
points exactly to the current page, hashes should still work. jQuery UI doesn't analyze the href
attribute by itself, it doesn't "apply <base>
" - it just reads the full URL the browser resolves the href
attribute to and compares to the current URL. If that doesn't work then please submit a full test case.
from jquery-ui.
Related Issues (20)
- SelectMenu Demo Error HOT 7
- Selectmenu click to browser browken HOT 1
- bug report HOT 1
- With the modal option set to true, elements in the background are still available in the AOM HOT 7
- TypeScript types using different package name. HOT 4
- Greedy - disabled hoverclass bug HOT 5
- Sortable doesn't work inside of CSS container (container queries) HOT 1
- Draggable should compensate for transform: scale on parent element HOT 1
- jQuery UI v1.13 getNumber RegExp not working for dateRange HOT 1
- How to disable the jquery easing reference from Jquery "src" file HOT 2
- While reload the iframe lacking drag drop using jquery droppable HOT 1
- Deprecated Jquery code in the minified version of `jquery-ui` HOT 10
- Dialog: Allow to put the dialog title in a heading element (h1-h6) HOT 4
- jQueryUI Dialog - content shrinks on resizing when box-sizing: content-box HOT 3
- 1.14 needs `$.uiBackCompat = true;` to use `transfer` Effect HOT 3
- 1.13.3 package has inconsisent .js file names HOT 3
- Datepicker Memory Leak HOT 1
- Autocomplete widget should use bound item.label property as a fallback for empty aria-label. HOT 3
- Version questions
- NuGet Package for 1.13.3: jQuery UI File Naming (Version Number) Breaks ASP.NET MVC Script Bundling HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-ui.