Closed parracodea closed 5 months ago
Not sure what this is trying to fix? As I'm not noticing any problems (not saying there are none, just wanting to make sure that whatever the issue is, that we have a proper fix)
Sorry, I should have described the problem a little more clearly.
On the website, there's a few links that refer to other tabs on the site. These links are at the following places:
Running A Game
> Button: Standard Setup
> Paragraph Text: The other officers each operate one of the ship's stations, which are described in the **Stations tab**.
Stations
> Science
tabRunning A Game
> Button: Game Master
> Paragraph Text: Scripting commands are covered in depth on the **Mission Scripting tab**.
Mission Scripting
tabStations
> Button: Weapons
> Paragraph Header: Beam Weapons
> Paragraph Text: The officer can use the frequency selectors at the bottom right, along with data about a target's shield frequencies provided by the **Science officer**, ...
Stations
> Science
tabHowever, clicking on these 3 links didn't actually show the contents of the referenced tab. It did add #tabs-stations
, #tabs-scripting
, and #tabs-science
, respectively, to the URL bar, though. I've tested this on Firefox and Edge, both of which had the problem.
I initially tried changing the <a>
-tag to use the "#tag-NUMBERHERE", like what appears in the URL, but that didn't work.
<!-- This doesn't work -->
<p>The other officers each operate one of the ship's stations, which are described in the <a href="#tabs=3,station-tabs=0">Stations tab</a>.</p>
So instead, I used JavaScript. A defect with the proposed solution is that the page moves down after clicking the link, no longer showing the Empty Epsilon logo and the page-navigation tabs.
What the window looks like after clicking on the
Mission Scripting
link on the Running a Game
> Game Master
tab. Ideally we should still be able to see the top of the page.
I tried adding window.scrollTo(0,0);
to the bottom of the updateHashFromTab
function definition, but that didn't seem to do anything.
// index.html, line 904
function updateHashFromTab(event, ui)
{
var target_id = event.target.id;
var target_index = $(event.target).tabs("option", "active");
var data = mapHash();
data[target_id] = target_index;
var hash = [];
for(var key in data)
{
hash.push(key + "=" + data[key])
}
location.hash = hash.join(",");
// this doesn't actually scroll us back to the top of the page
window.scrollTo(0,0);
}
There might be a more elegant solution, but I thought I'd at least attempt to solve the issue and bring attention to it!
Click on the following links and ensure they take you to the proper tab:
Running A Game
> Button: Standard Setup
> Paragraph Text: The other officers each operate one of the ship's stations, which are described in the **Stations tab**.
Stations
> Science
tabRunning A Game
> Button: Game Master
> Paragraph Text: Scripting commands are covered in depth on the **Mission Scripting tab**.
Mission Scripting
tabStations
> Button: Weapons
> Paragraph Header: Beam Weapons
> Paragraph Text: The officer can use the frequency selectors at the bottom right, along with data about a target's shield frequencies provided by the **Science officer**, ...
Stations
> Science
tabTested on:
ah, I see the issue, I have no idea on a better fix, so I'll take it. (JS and HTML/CSS are not my area of expertise)
Fixes links to other tabs. However, clicking the link scrolls the window to the tab's contents, hiding the Empty Epsilon logo and tab-buttons.