I have the following code on my Mac:
Skip navigation
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div id="content">Lots of code here, with more links.</div>
In OSX Chrome and Safari, I can tab to the top link, press enter, and the screen scrolls down to the <div id="content">. However, when I press the tab button again, it turns out the first link is still active, and I end up tabbing through the navigation.
In Windows, this code works as expected (i.e. I use the link to successfully avoid having to tab through the navigation at the top of the page).
Can anyone tell me what code I need to make the page's internal links properly navigable with a keyboard on OSX?
Okay, here is the answer, after a flash of inspiration.
You need to have an href="#" on the target <a id="content">. This will make it correctly navigable-to using a Mac's keyboard.
Skip navigation
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<a id="content" href="#"></a>
<div>Lots of code here, with more links.</div>
Obviously, this is not ideal, as it introduces extra mark-up, but it is the only way I could find to get it working.
Related
I'm trying to convert my chrome extension to safari. In my chrome extension popup, I've an <a> tag that links to my website under a certain condition. Even though, the mouse changes to click mode once hovered, as it detects an <a> tag, clicking on it doesn't result in any redirection. Is there a reason why a tag doesn't work in safari? Is there special permission I shall request for that I couldn't find?
The solution was to add a blank to the element:
<a href="example.com" target="_blank" ></a>
We have a catalog browser for products were the user can click and it opens a window to show the product details, this works fine in Chrome, but when tried on IE8 the popup window close button is not showing, i still can click on it, but it is not visible.
Here is my code:
<div class="k-window-titlebar k-header" style="margin-top: -32px;"> <span class="k-window-title" id="productView_wnd_title" style="right: 30px;"></span><div class="k-window-actions"><a role="button" href="#" class="k-window-action k-link"><span role="presentation" class="k-icon k-i-close">Close</span></a></div></div>
We are using .net asp mvc and kendoui.
Any ideas on what to do for fixing it?
Thanks!
Edit: found a reference to similar issue on kendo forums: window-widget-problems-on-ie8
Already found the issue, the bundle for css had missing the kendo version on path.
I am using Web browser Control in Windows phone 7 and I want to navigate within page as
<ul>
<li>
Section 1
</li>
<li>
Section 2
</li>
</ul>
then i use
<a name="chapter-1_xhtml" id="chapter-1_xhtml"></a>
...............The Div and other code..............
<a name="chapter-2_xhtml" id="chapter-2_xhtml"></a>
...............The Div and other code..............
It works perfectly in Desktop browsers but when i run the same code in Windows phone emulator its not working and after a jerk it stays there.
Thanx in advance.
By Adding the Function to Html
function ScrollTo(Id) {
document.getElementById(Id).scrollIntoView();
}
and Calling the Following code on button click achieved my Goal.
this.webBrowser.InvokeScript("ScrollTo", "chapter-1_xhtml");
I've put the HTML draft of the theme so far, with minor CSS edits.
Currently I have all the block posts and everything else that's essential to a tumblr theme but I can't seem to get the {HasPages} block to work properly.
I've tested it on a different tumblr, also. There are pages created and I already have provided some basic CSS for it just in case. But there isn't anything showing up.
Has anyone has this problem and if so, is there a solution I'm missing? The code to display the pages is included.
{block:HasPages}
<ul>
<li>Home</li>
{block:Pages}<li>{Label}</li>{/block:Pages}
</ul>
{/block:HasPages}
Also, is this a valid web masters' question. I'm not sure.
I just had this issue: a link to a page I created didn't show up.
I solved this by checking off "Show a Link to this Page" in the Page options. To find this:
Go to tumblr.com.
In the top navigator click the gear. This is where the settings are.
On the side, click on the blog you want to customize.
A customize button should show up beside the name "Theme". Click on this button.
Now your blog will show up with a Customize panel. In the Customize panel there should be a Pages section. Click the Edit button beside the page and a window will pop up.
You can find the "Show a Link to this Page" option in this window.
Let me know if you need any clarification.
As far as I can see your code is right. Have you clicked the 'show a link to this page' checkbox, which is at the bottom of the page edit popup? I bet that's it... :)
I have also been having this problem. However, everything works correctly on my actual page, even though the theme editor does not appear to be aware of the block on my custom theme, nor does the theme preview seem to be aware of the pages tagged to show.
Have you tried saving your theme and checking the links on the live page?
I've created a bookmark in Firefox that links to a hosted web application I've written and displays the application in the sidebar using the "Load this bookmark in the sidebar" option.
When the application appears in the sidebar and I click links there, those links open in the current Firefox tab rather than staying in the sidebar. I would like the linked page to appear in the sidebar.
I'm hoping there's a simple solution, like setting the default target via a base tag, but I can't find a reference that gives me the information I need. It would be useful if the solution does not limit the application to the sidebar exclusively, and still lets the application run full-window.
I think all you need to do is link, or add target="_self"
This may be more a potential workaround than a real answer, but you could try using javascript to change document.location to the new URL. Something like:
<a href="javascript:document.location='http://whatever'>click me</a>
This would use the same 'window' object to display the new page and should load in the sidebar.